Appboard/2.4/builder/themes

Sample View of the AppBoard Theme Editor

An AppBoard Theme is a collection of settings that manage the overall visual presentation of the application to the end-user in the web browser. Elements included in a Theme include colors, button styles, shadows, borders, backgrounds, and so on.

Multiple Themes can be configured in an AppBoard system. One Theme is in place at any given time. For example, you could create four seasonal Themes, and change the selected Theme once every three months to give the system a fresh look.

This page contains general instructions for creating and managing Themes in AppBoard. For more detailed documentation of configuring Theme layering and controls, see Theme Configuration.

Managing Themes

Perform the following to manage Themes:

1. Log in to AppBoard Builder as an administrator.
2. In the Builder Modes panel, select Settings, then select Theme Manager. This will launch the Theme Manager panel.

Base Themes

AppBoard ships with several base themes:

1. Dark
2. Frosted Glass
3. Light
4. Minimalist
5. Smoked Glass

The default theme is set to Dark. The base Themes are not editable, and are shown in gray with a lock icon, to help differentiate from custom Themes that can be edited. To activate a different theme, select another theme from the list of available themes, and click the "Activate Theme" option in the bottom toolbar. The checked Theme indicates the Theme that is currently active.

After changing or modifying themes, a browser refresh is required to see the Theme changes take effect.

Creating a New Custom Theme

Perform the following steps to create a new Theme:

1. Click "Add" in the bottom toolbar. This will launch the "Theme Editor".
2. Enter a name for the new Theme to be created.
3. Click "Add Theme".
4. The Theme is created with a set of default settings.
5. Modify the Theme as desired, and then click "Save Changes" to save the changes to the Theme.
6. Apply the theme to the system, if desired, by clicking "Activate Theme" in the bottom toolbar.

Deleting a Theme

Perform the following steps to delete a Theme:

1. Select the Theme from the list of available Themes.
2. Click "Delete" in the bottom toolbar.

You can only delete custom themes. You can not delete the base themes that ship with AppBoard. You also can not delete a Theme while it is the currently active Theme. In such case, activate another Theme first, and then delete the Theme.

Editing a Theme

Perform the following steps to edit the settings for a Theme:

1. Select the Theme from the list of available Themes.
2. Click "Edit" in the bottom toolbar. This will launch the "Theme Editor".
3. Modify the Theme as desired, and then click "Save Changes" to save the changes to the Theme.
4. Apply the Theme to the system, if desired, by clicking "Activate Theme" in the bottom toolbar.

You can only edit custom themes. You can not edit the base themes that ship with AppBoard.

Advanced Editing

It is possible to edit base themes outside of the AppBoard Builder. The attributes for each base theme are loaded from: /server/webapps/enportal/WEB-INF/data/pkg/BaseThemes.CSV

Altering the values in BaseThemes.csv will modify the base themes that ship with AppBoard, and requires a server restart to take effect. However, it is recommended that users go through the Builder for modifying Themes. Small syntax errors inside of BaseThemes.csv can cause AppBoard to crash. Always create a backup of BaseThemes.CSV before modifying the attributes in this file.

Using the Theme Editor

An AppBoard theme is a collection of overrides for a default set of attributes. Rather than build up a Theme from scratch, AppBoard Themes start with default values pre-populated from a template. AppBoard ships with 4 base themes to provide a range of starting points.

To get started, select a Theme Template using the pull-down selector at the top of Theme Editor. The base template is all that is required for a Theme. A new Theme without any overrides is basically just a copy of the Theme Template.

By selecting a different Theme Template, you will swap out the base values used by the current Theme. Any overrides configured as part of your new Theme will persist; however, the values used in your overrides may no longer make sense after you have switched from a "Dark" theme to a "Light" theme.

Attribute Overrides

Theme-able elements are organized into categories, which can be selected using the list on the left side of Theme Editor.

Each attribute has a default value that it inherits from its template. To provide an override for that value, check the check box next to the desired attribute. If you decide you do not like the new values you entered, uncheck the checkbox next to the attribute, and the theme will return to its default value.

Details on certain options for attribute overrides are available in the theme configuration detail page.

After changing or modifying themes, in most cases a browser refresh is required to see the Theme changes take effect.

Migrating Custom Themes

Perform the the following steps to export a custom theme:

1. Log in to AppBoard as an administrator.
2. Click "Settings" to open the System Configuration panel on the right.
3. Click "Backup" to open the Backup screen.
4. Click "Create" and select "Backup AppBoard" or "Backup All". For more information on backups, see Backup and Recovery.

The above steps will create an archive of AppBoard settings in [AppBoard_Home]\server\webapps\enportal\WEB-INF\archive\. Inside this archive, located at [AppBoard_Home]\server\webapps\enportal\WEB-INF\xmlroot\appboard\config, will be a file named "themes.xml".

You can explore the exported archive by using an archival software package that opens jar files, or by simply changing the extension of the archive from "jar" to "zip" and opening the archive using a standard archival software package.

Importing a custom theme from another AppBoard installation will require collecting the "themes.xml" file as shown above. It will also be prudent to collect the associated image files, typically found in [AppBoard_Home]\server\webapps\enportal\visualizer\assets\images (include ".\backgrounds" as well) from the source AppBoard installation.

Once all associated files are collected, perform the following steps on the target AppBoard installation:

1. Shut AppBoard down, if running.
2. Copy the “themes.xml” file (that you captured in the section above) to [AppBoard_Home]\server\webapps\enportal\WEB-INF\xmlroot\appboard\config\.
3. Copy the image files to [AppBoard_Home]\server\webapps\enportal\visualizer\assets\images\ and .\backgrounds\ (if any backgrounds were used).
4. Start AppBoard.
5. Log in to AppBoard and within Builder, click Settings|Theme Manager to see that the new theme has been imported.

The above procedure assumes there are no custom themes existing in the target AppBoard installation. To add a custom theme to a system that already has custom themes will require manually merging the two "themes.xml" files and should be done with extreme care.