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:

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

Create a Theme

To create a Theme:

  1. Open the Theme Manager.
  2. Select the Create New button.

    The New Theme window opens.

  3. Provide a display name to use within CSM (search this property in CSM Item Managers).

  4. Select OK.

Define Form Properties for a Theme

To define Form properties for a Theme:

  1. Create a Theme.
  2. From the Property Area drop-down list, select Forms.
  3. Define the following Form properties:
    In some instances where there is an option for more than one color, the additional colors are used for a gradient.
    • 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).
      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. The two color options are available for a variety and to support a gradient.

      The figure shows a two-part gradient shading from the light gray to black on the banner and a three-part gradient on the form background shading from white to red to peru from top to bottom.

    • Form background
      • 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. 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. 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

To define Dashboard properties for a Theme:

  1. Create a Theme.
  2. From the Property Area drop-down list, select Dashboards.

  3. Define the following Dashboard items:

    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. In the figure, the background color is Silver and the face colors are Coral and Brown. A gradient is shown using the two colors if the Background style under the Miscellaneous group is set to None or Legacy.
    • Charts: Select the Dashboard Widget chart legend background color (red in the figure), legend border color (white in figure), legend text color (white in figure), chart palette (the bars appear blue), and grid-line tick color (black in figure).
    • Gauges: Select the Dashboard Widget alert colors (high, low, and medium) and gauge pointer color (Cyan in figure).
    • Miscellaneous: Select the Dashboard Gauge Widget background style, either None, Legacy, Flat (shown in figure), or Chrome.
    • Text: Select the Dashboard Widget label colors (navy, purple, and crimson in figure).

Define Portal Properties for a Theme

To define Portal properties for a Theme:
  1. Create a Theme.
  2. From the Property Area drop-down list, select Portal.
  3. Define the following Portal Properties:
    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:
      • Menu link: Select the color, link font, link hover background color, link hover color.
      • Menu list: Select the item background hover color, item link color, item link hover color.
      • Portal Menu bar: Select the background color (in figure below the large whitespace in preview area), 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.
  4. Define the following Header properties:
    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.
  5. Define the following Footer properties:
    The Text group is not available to preview.
    • Background: Select the footer background colors (two are used in the figure for a gradient), 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 (red in figure).
    • 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 (blue in figure).
  6. Define the following Grid properties:
    None of the Grids 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

To define Action Catalog properties for a Theme:

  1. Create a Theme.
  2. From the Property Area drop-down list, select Action Catalog.
  3. The default Action Catalog displays in the preview. Select the Browse... button above the preview to select an Action Catalog Widget.
    Action Catalog Widgets using the Cards with Search style cannot be previewed.

  4. 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

To edit a Theme:

  1. Open the Theme Manager.
  2. Select a Theme, and then select the Edit button.
    Tip: Also select File>Edit or right-click>Edit.

    The Theme opens in the Theme Manager.

  3. Make changes.
    To rename a Theme, right-click a Theme in the Theme Manger, and then select Rename.

  4. Select OK.