[Index]

Model: tool/Theme

Themes

1. Prepare the theme file:

   1. Create a folder and add a file skin.css with the required name of the theme. The name of the folder must be the same as the intended theme name (only alphanumeric characters can be used, with no spaces or special characters).
   2. Add any CSS overrides to the file. Note that only the definitions as shown in the export of a provided CSS file skin.css can be modified.
   3. Add required image files in this folder (if any).
   4. Create a .zip archive file with the same filename as the folder.

   Refer to Download and Update a Theme for details.

2. Add the theme to the system:

   1. Choose the hierarchy level at which the theme will be created.

   2. Choose Role Management > Themes to open the Themes list view.

   3. Click Add on the button bar to open the Themes input form. Note that themes can only be customized by a Provider Administrator (or higher).

   4. Enter the Theme Name (same as the file name created above).

   5. Enter an appropriate Site Title if required. The site title entered here is the title displayed in the browser tab.

   6. Click the Browse button to import the created theme zip file. Wait until the system displays the file chosen in the Import File field.

   7. If the theme must also apply to the login page, select the Use this Theme to style Login page check box.

   8. To set login banner text and notices on the login page, refer to Set the Login Page Theme. The Use this Theme to style Login page check box does not have to be selected for banner text to show.

   9. If you want to hide the theme from lower level hierarchies, select the Hide from Lower Hierarchies check box. Users logged in at lower level hierarchies will not be able to see that particular theme on the Themes list view screen.

   10. For details on the Theme Customization tab controls, refer to Create a Theme in the Business Admin Portal. .. note:

       System Message: ERROR/3 (<string>, line 40)

       Unexpected indentation.

       If any details are added on this tab, *all* fields should be provided with input.
       

   11. Click Save on the button bar when complete.

Download and Update a Theme

1. Choose the hierarchy level at which the theme will be applied. Note that themes can only be customized by a Provider Administrator (or higher).

2. Choose Role Management > Themes to open the Themes list view.

3. Click the theme that you want to download.

4. Click Action > Download on the button bar to download the theme. The exported file is a .zip archive with the name of the theme. The archive contains a folder with the theme name and files called skin.css and skin.less in it.

5. Refer to the recommended practice to edit the Less file at the end of this topic, otherwise save the file and open the CSS file in a text editor.

   • Headers are clearly marked and apply to design areas within the GUI.
   • Colors, sizes, fonts, images, and so on, can all be overwritten with the required formats.
   • Images must be identified with the correct file path name. Preferably, do not use '/' preceding the path name; rather use relative paths, in other words a path relative to the CSS file location. For example, if your created an image sub-folder called 'img', use 'img/myimage.png'. After upload, the image should be viewable when opening the URL: http://<hostname>/www/themes/mytheme/img/myimage.png

6. When editing is complete, make sure the directory folder name is the same as your theme name. Compress the folder and save the file with the theme name and a .zip file extension.

   An error message will display on the user interface if the file does not have a valid file extension.

   Note that any files or folders inside the zip file archive that start with a '.' character will be silently discarded when unzipping the theme. For example, if the zip archive contains any files named ._.DS_Store or .directory, they will be ignored.

7. Choose Role Management > Themes:

   1. For an update, choose the theme name and click Browse adjacent to Import File and then open the same theme name. Optionally select the Backup Enabled check box to create a backup of the current theme on the server. Click Save to complete the import process.

      If a theme update does not require an updated CSS in a zip file but only updates the text of the theme, then no file upload is required. For information about the other fields on this form, refer to Add a Theme.

   2. To delete a theme, choose it from the list and click Action > Delete.

The preferred way to edit a theme is to edit and compile the Less files. Refer to the "Less files and Theme Customization" topic in the "Advanced Configuration Guide".

• All changes that are made directly in the CSS files will have to be manually carried over after each changes in the Less files.
• Edit the Less files and compile them to get the new CSS files.
• The aim with Less is that a theme can be customized with the minimum of technical knowledge (as with for example Twitter Bootstrap [http://getbootstrap.com/customize/>].

For an introduction to Less, visit the official website [http://lesscss.org/]. To compile the Less theme, a Less compiler is required. The following list shows examples:

• Online [http://lesscss.org/usage/index.html#online-less-compilers>]
• on your desktop [http://lesscss.org/usage/index.html#guis-for-less]
• IDE [http://lesscss.org/usage/index.html#editors-and-plugins]

Theme Field Reference

Base

Login Page Details

Model Details