Designate a default theme

This procedure explains how to designate a default theme and lock it.

1. Open the brand.properties file in the /lib folder and add the following two lines of text, replacing “themeName” with your custom theme name, as shown in Figure 80:

   workbench.theme.default=themeName

   workbench.theme.locked=true

   Figure 80. Text to designate default theme and lock it.

   
   
   
   
   

2. Click File->Save to save your changes in the brand.properties file.

3. Restart Workbench for this change to take affect.

Create a new theme module

This procedure describes the steps used to create a new theme module.

1. In the Workbench Nav pane, under My File System, navigate to Niagara 3.7.x and expand it. Create a new /themes subfolder there to store your custom themes. This is where the new theme module that you create will be located.

2. Click Tools->New Module and fill-in the fields in the New Module dialog box, as shown in Figure 83.

   • Enter the path to the /themes folder created above (for example: C:/niagara/Niagara-3.7.x/themes).

   • Enter a name for the theme using this naming convention, themeName (for example: themeCitrus).

   • Enter a Preferred Symbol (four-letter abbreviation) for the new theme name (for example: thci).

   • Enter a Description (for example: Niagara Workbench theme module).

   • Enter a Vendor (for example: Tridium).

   • Clear the checked check box for Create Lexicon and click the Next button to advance to the next screen.

   Figure 83. New Module dialog box

   
   
   
   
   

3. Remove any Dependencies listed in the dialog box and click the Next button.

4. No Packages are required. Click the Finish button to create the new module.

   The new module contains the two required XML files: build.xml and module-include.xml, as shown in Figure 84.

   Figure 84. New module

   
   
   

   
   

5. Using a text editor, open module-include.xml and add the <defs> tag to identify this module as a theme module, as shown in Figure 85:

   Figure 85. Add <defs> tag in module-include.xml

   
   
   

   
   

Copy resources from a built-in theme module

This procedure describes how to obtain resources from another theme module and add appropriate resources tags to the build.xml file in the new theme module.

In addition to the .xml files mentioned earlier, the theme module requires that at least one Niagara Style Sheet (NSS) file be located in: /src/nss. Copying an existing NSS file, along with other resources, from one of the built-in themes will save time and reduce the chance of introducing errors.

1. In the Nav pane under My File System, navigate to your new theme module in the /themes folder. Create a new subfolder there named /src (for example: /themes/themeCitrus/src). This is where all resources must be located.

2. In the Nav pane under My Modules, scroll down to locate the built-in theme modules (themeFrost.jar, themeLucid.jar, themePalladium.jar).

   Double-click themeLucid.jar to display its resources. Select all the resource folders and copy them.

3. Under My File System, navigate to your new theme module in the /themes folder, and paste the copied resource folders into the /src subfolder.

4. Using a text editor, open the build.xml file in your theme module and add a <resources> tag for each folder copied from the built-in theme module , as shown in Figure 86:

   Figure 86. Specify resources in build.xml

   
   
   

   
   

   At this point, your new theme module has everything needed to build a .jar file. However, since the NSS file was copied from another theme, your new theme will have an identical appearance. To make your new theme distinguishable from the other, you must change design elements within the NSS file.

Modify design elements in the NSS file

This procedure briefly describes an approach to modifying design elements in an NSS file to give Workbench a unique appearance.

1. In the Nav pane under My File System, navigate to your theme module and expand it to access the NSS file in /src/nss. Using a text editor, open the NSS file and scroll to the Define statements (#define...) located at the top of the NSS file. These statements define certain font and color styles that typically are applied repeatedly throughout the NSS file. Modifying a few color definitions in the #define statements will have the most noticeable impact on the Workbench display.

   Colors may be specified as RGB colors in hexadecimal format (for example: #000, #ffffff ); or in many cases, colors may be specified according to their common English names, such as gray, white, blue, etc.

   Refer to the NiagaraAX Developer Guide section on HX Theming for more information on NSS file properties. Also, an Internet search for “html color codes” will result in many color code examples.

2. After completing modifications, save the NSS file.

Build a.jar file for the theme module

This procedure describes building a .jar file for a new theme module so that the module can be deployed in Workbench.

1. Open the Niagara Console and run the following build command, as shown in Figure 87:

   build -p [path to build.xml file] jar

   Figure 87. Enter command in Niagara Console to build .jar file

   
   
   
   
   

2. Confirm that the .jar file (for example: themeCitrus.jar) was created in the /modules folder.

3. Exit and restart Workbench to load the .jar file.

Activate the new theme module

This procedure covers activating a new theme module.

1. Select the new theme module in Tools->Options under the Active Theme drop-down, as shown in Figure 88.

   Figure 88. New theme is selectable in the Active Theme drop-down

   
   
   

   
   

2. Click File->Close and restart Workbench, the new theme will be active, as shown in Figure 89.

   To save changes made in Workbench Options, such as a theme change, you must close/exit Workbench using File menu options or click the window’s close box (). Closing Workbench in the console will not cause those changes to be saved.

   Figure 89. New theme is applied to Workbench