Modifying the Vanilla Theme
In Adapt themes are plug-ins. To add and deploy a new theme, you create a zip file that includes all the files required by an Adapt plug-in, and upload it to the authoring tool using Plugin Management. Once uploaded, you can select and apply your new theme.
While there are a variety of ways to create a theme, perhaps the most straightforward method is to modify the bundled Vanilla theme as outlined below.
In a typical installation of the authoring tool, the root folder of Vanilla can be found at this location:
adapt_authoring\adapt_framework\src\theme\adapt-contrib-vanilla
Copy the adapt-contrib-vanilla folder to another convenient location. Change the name of the folder to reflect your new theme. Two files must be updated: bower.json and package.json. At a minimum, the 'displayName' (bower.json) and the 'name' (package.json) must be changed to reflect your theme. However, it is a good time to update as much of these files as you can (e.g., "version": "0.0.1"). More about this below in [Updating Your Theme](#Updating Your Theme).
Adapt uses the Less CSS preprocessor. One of the big advantages is that Less allows Adapt to use variables within CSS. You don't have to install it, but you have to work with it. When you publish your course, the .less files are processed and converted into .css files.
The .less files are located in the less folder. The file names help to locate style rules that you want to change. Several files deserve comments. The variables in variables.less are referenced by many of the other files. The file is worth reviewing before undertaking your modifications. theme.less provides a home for bespoke classes that might extend the use of your theme. icons.less identifies the font icons located in fonts/vanilla.eot, etc.
Adapt also uses Handlebars. The name of these HTML templates are referenced by JavaScript files elsewhere in the source code. And the patterns discernible in their CSS classes are not arbitrary. To modify the styling of the templates, it is recommended that the style rules associated with these classes be changed rather than replacing the class names in the templates. Note: Templates associated with plug-ins (components, extensions, menus, themes) are not located here in the templates folder. They are included in the source code of the plug-in. Plug-in developers are encouraged to style their templates using the class names found in the .less files so that your theme is extended to them, too.
Be sure to visit Styling Your Course in the Adapt framework wiki for more insights, especially about the most Less significant variables.
The name the Zip file will not affect the name of the theme within the authoring tool, so feel free to change it if desired. Zip from the root of your theme folder, like this:
folder.zip/
theme root folder/
assets/
fonts/
... etc.
Not like this:
folder.zip/
assets/
fonts/
... etc.
Note:
At this point in development Mac users should not use the built-in Compress utility. Instead use Terminal to navigate to the folder that is the parent of your custom theme. Run the following command
zip -r my-custom-theme-name.zip my-custom-theme-folder
where my-custom-theme-name is an arbitrary name for the zip file and my-custom-theme-folder is the actual name of the folder you want to zip.
Because your theme is a plug-in, use the authoring tool's Plugin Management feature to upload your Zip file.
Once the upload completes successfully, your theme will be appear as a selection alongside Vanilla.
The Plugin Management feature does more than insert your theme into the proper folders. It tracks the version numbers of all plug-ins to ensure they are compatible with versions of the authoring tool and the framework. When plug-ins are registered, Plugin Management notes when new versions are available and makes it easy for you to update them.
When you make a change to your theme, or any other type of plug-in, Plugin Management requires that it have a different version number than the one in its database. Before zipping your file, you will need to increment the version numbers found in bower.json and package.json.
