The following topics explain how to maintain your themes list by adding, updating and deleting themes.
Adding New Themes
To maximize efficiency and minimize errors, a new theme can be added to your account only by cloning an existing theme. Both default and customized themes may be cloned. Once a theme is cloned, you may modify the clone as required to create a new theme.
To clone a theme:
- At the left side of the Themes page, select the checkbox in the row of the theme that you want to clone. Make sure that the theme you select is dedicated to the required client type (Mobile or Web).
The Clone button (at the upper right corner of the page) is enabled
- Click Clone.
The Clone Theme popup opens.
- In the Name textbox, enter an appropriate name for the new theme. The name must be unique.
- If desired, in the Description textbox, enter relevant comments or notes about the new theme.
- Click OK.
A confirmation message is displayed, and the clone is added to the list of themes on the Themes page.
- Continue by editing the clone's CSS as required.
Editing a theme is done from the theme's Details page, which enables you to view and update the cascading style sheets (CSS) that define the theme.
Note: Default themes cannot be edited. To modify a default theme, first duplicate the theme, and then make required updates on the clone.
To facilitate the editing process and reduce the chances for error, it is recommended that you import the entire content of the Theme CSS tab into a theme editor (e.g., ThemeRoller), so you can view your changes in real time. For convenience, a link to the ThemeRoller editor is provided on the Details page of every cloned theme. The modified css is then downloaded from ThemeRoller as a .zip file, and this .zip is imported back into the Admin Console.
Note: Use caution when importing the theme back into the Admin Console, as the imported theme will overwrite the currently defined theme.
To edit a theme:
- From the Themes page, in the row of the theme that you want to edit, click the link in the Theme Name column. Verify that the theme you select is not a default theme.
The theme's Details page appears, comprising the following tabs:
- Theme CSS: Determines the look and feel of the Interaction presentation, based on the jQuery css() method.
- Jacada CSS: Determines the look and feel of the Jacada elements and controls.
- Copy the contents of the relevant tab to the clipboard.
- At the top of the page, click the ThemeRoller link.
The appropriate ThemeRoller application (jQuery Mobile or jQuery UI) is launched.
- At the top of the page, click Import, and then paste the copied content into the Import Theme popup.
- In the upper left corner of the popup, select the version that is closest to the version used by Jacada Interaction Server (currently version 1.4.0). For example:
Then, at the lower right corner of the poup, click Import. The swatches are displayed in ThemeRoller.
- Customize the theme as required.
- When your updates are complete, click Download. Enter a name for the theme, and then click Download Zip.
The updated theme is downloaded.
- Return to the Admin Console, and click Import. From the popup, navigate to the downloaded .zip file, and click Import.
A confirmation message is displayed, and the updated theme is saved.
- To view your changes, from the Applications menu, apply the theme (from the Client Settings tab) and then run the application (by clicking the URL in the Details tab).
- To make additional changes to the theme, repeat Steps 2-7. To view the changes in the application, refresh the application's browser page.
Deleting a theme removes it from the list of themes on the Themes page. The following guidelines apply to deleting themes:
- Default themes cannot be deleted.
- If a theme is currently being used by one or more active applications, it cannot be deleted.
To delete a theme:
- At the left side of the Themes page, select the checkbox in the row of the theme that you want to delete.The Delete button (at the upper right corner of the page) is enabled.
- Click Delete.
The Confirm deletion popup opens.
- Click Yes.
A confirmation message is displayed, and the theme is removed from the list of themes on the Themes page.