Creating a Theme

ISVs have the ability to create a new GUI theme for the platform using jQuery and CSS.

To replace an existing theme (e.g. "tan"):

1. Go to ThemeRoller to create the theme.
   ThemeRoller lets you interactively select colors and styles for GUI items until you get the look you want. It then generates a css/ subfolder with images and a CSS file. That subfolder is the part that needs to be integrated into the platform.

2. Download the zip file for the theme. Choose all components and version: 1.8.5
3. From the zip file, extract the css/ directory to networking/css/themes/tan:
4. In networking/css/themes/tan/css/custom_theme rename jquery-ui-1.8.5.custom.css to jquery-ui-1.8.2.custom.css
5. In your browser, and change the platform theme to tan.
   Your theme is loaded.

Considerations

• Save your theme. When you upgrade the platform, the custom theme will be overwritten with the standard theme. Replace it with your custom version to reactivate your custom theme.
• You can also create a new theme choice by modifying ColorManage.jsp, as explained below. After an upgrade, you'll need to update ColorManage.jsp, as well.

To add a new choice to the Theme selection dropdown:

1. Create a new theme by following the instructions in step #1 above.
2. Create a folder in networking/css/themes.
   Name it for your theme. For example: networking/css/themes/myNewTheme
3. Download the zip file for the theme and copy its css/ folder into the new directory.
   Creating, for example: networking/css/themes/myNewTheme/css
4. In the css/ folder, rename the CSS file to jquery-ui-1.8.2.custom.css
5. Add your new option to ColorManage.jsp:

<select name="theme" class="dropDown1">
    <option value="dark_blue"  
        <%=theme.equals("dark_blue") ? "selected" : ""%>>Dark Blue</option>
    ...
    <option value="dark_red" 
        <%=theme.equals("dark_red") ? "selected" : ""%>>Dark Red</option>
    <option value="myNewTheme" 
        <%=theme.equals("myNewTheme") ? "selected" : ""%>>My New Theme</option>
</select>