Create a Theme

Use the Theme Editor (accessed from within the Theme Manager) to create a Theme to apply to a Dashboard, Form, or Portal.

When creating a Theme, define:

Dashboard theme properties: Background, Charts, Gauges, Miscellaneous, and Text.
Form theme properties: Accent Colors, Alert Colors, Banner background, Form background, Group box, Label, Miscellaneous, and Text.
Portal theme properties: App bar, Content, List, Menu, Miscellaneous, and Toolbar. Forms has property area sub-groups for Header, Footer, and Grids.
Action Catalog theme properties: Background, Border, Header, and Text.

Tips:

To display all (Dashboard, Form, and Portal) properties in one list, select All in the Property Area drop-down list.
Use the Theme preview to test the font, color, and style combinations.

Create a Theme

Open the Theme Manager. For more information, see Open the Theme Manager.
Select the Create New button.
The New Theme window opens.
Provide a display name to use within CSM (search this property in CSM Item Managers).
Select OK.

Define Form Properties for a Theme

Create a Theme.
From the Property Area drop-down list, select Forms.
Define the following Form properties:
Note: In instances where there is an option for more than one color, the additional colors are used when a gradient property is set.
- Accent Colors: Select the accent colors used to emphasize a color scheme.
- Alert Colors: Select the alert colors to indicate an alert condition (high, low, and medium).
  Note: Accent and alert colors are not automatically applied to any elements. Manually apply the colors (or any colors for that matter), if needed. Often, these colors are used in Expressions to conditionally change the color.
- Banner background: Select the banner background colors.
- Form background: Define the following Form background properties:
  - Form background color: Select the Form background colors.
  - Background divide point: This is the place on the Form where the gradient colors begin on a three-point gradient. Scale is 0-999.
  - Background style: Select the style of background from None, Solid Color, Tiled Image, or a gradient left-to-right, top-to-bottom, three part left-to-right, or three part top-to-bottom.
  - Group box: Select the group box background, border, and text colors. Group box color is applied by default. You must manually apply Group box 2.
  - Label: Select the Label background, border, font, and text colors. In the preview, the text color is shown as Foreground and Foreground 2. Foreground is applied by default. You must manually apply Foreground 2.
  - Miscellaneous: Select form control colors for the control background color, border color, font (type, size, and attributes like bold, underline, italic, and strike out), required field border, and text color.
    Tip: Specify a font size that fits inside the box boundaries.
  - Text: Select the banner font, banner text color, and web form field error text color (not visible in the preview).

Define Dashboard Properties for a Theme

Create a Theme.
From the Property Area drop-down list, select Dashboards.
Define the following Dashboard items:

Note: In instances where there is an option for more than one color, the additional colors are used when a gradient property is set.
- Background: Select the Dashboard Widget background color and Widget face colors. If the Background style under the Miscellaneous group is set to None or Legacy, a gradient is shown using the two colors.
- Charts: Select the Dashboard Widget chart legend background color, legend border color, legend text color , chart palette, and grid-line tick color.
- Gauges: Select the Dashboard Widget alert colors (high, low, and medium) and gauge pointer color.
- Miscellaneous: Select the Dashboard Gauge Widget background style (None, Legacy, Flat, or Chrome).
- Text: Select the Dashboard Widget label colors.

Define Portal Properties for a Theme

Create a Theme.
From the Property Area drop-down list, select Portal.
Define the following Portal properties:
Note: None of the Portal properties are available to preview.
- App Bar: Select the app bar background color, hover color, image, font, and font color.
- Content: Select the content background color, background image, description font, description font color, header font, and header font color.
- List: Select the list background color, border color, border style, border thickness, font, font color, hover font color, hover background color, subtext font, and subtext color.
- Menu Define the following menu properties:
  - Menu link: Select the color, link font, link hover background color, and link hover color.
  - Menu list: Select the item background hover color, item link color, and item link hover color.
  - Portal Menu bar: Select the background color, background image, background image alignment, background image repeat, and list background color.
- Miscellaneous: Select the Portal icon set type.
- Toolbar: Select the Portal border color, border style, border thickness, background color, font, and font color.
Define the following Header properties:
Note: The Miscellaneous and Text groups are not expanded and not available to preview.
- Background: Select the banner background colors, image, image alignment, image repeat, and background style.
- Baseline: Select the banner baseline font, font color, and text alignment.
- Miscellaneous: Select the banner image (a single image that can be aligned with the banner, not the background image) and image alignment.
- Subtitle: Select the banner subtitle font and subtitle font color.
- Text: Select the banner link active color, color, font, hover color, and visited color.
- Title: Select the banner title font, font color, and text alignment.
Define the following Footer properties:
Note: The Text group is not available to preview.
- Background: Select the footer background colors, image, image alignment, image repeat, and background style (solid, left to right gradient, top to bottom gradient, or image).
- Baseline: Select the footer baseline font, font color, and text alignment.
- Miscellaneous: Select the footer image (a single image that can be aligned with the footer, not the background image) and image alignment.
- Subtitle: Select the footer subtitle font and subtitle font color.
- Text: Select the footer link: active color, color, font, hover color, and visited color.
- Title: Select the footer title font, font color, and text alignment.
Define the following Grid properties:
Note: None of the Grid properties are available to preview.
- Alternating row properties: Select the grid alternating row background color, row font, row font color, and table rows.
- Background: Select the grid background color.
- Border: Select the grid border color, style, and thickness.
- Header: Select the grid header background color, image, image alignment, image repeat, border color, border style, font, and font color.
- Miscellaneous: Select the grid select row background color.
- Row properties: Select the grid row background color, hover color, font, and font color.

Define Action Catalog Properties for a Theme

Create a Theme.
From the Property Area drop-down list, select Action Catalog.
The default Action Catalog displays in the preview. Select the Browse button above the preview to select an Action Catalog Widget.
Note: Action Catalog Widgets using the Cards with Search style cannot be previewed.
Define the following Dashboard items:
- Background: Select the Action Catalog background colors for each Service Category level.
- Border: Select the Action Catalog border color.
- Header: Select the Action Catalog header title and background colors.
- Text: Select the Action Catalog text color and the link active color, color, hover color, and visited color.

Edit a Theme

Open the Theme Manager. For more information, see Open the Theme Manager.
Select a Theme, and then select the Edit button.

Tip: You can also select File > Edit or right-click and select Edit.

The Theme opens in the Theme Manager.
Make the necessary changes.
Note: To rename a Theme, right-click a Theme in the Theme Manger, and then select Rename.
Select OK.