CSM 10.4 Documentation

Home

Theme Editor

The Theme Editor is a tool within the Theme Manager that enables you to define colors, fonts, images, and styles for a theme.

Use the Theme Editor to define colors, fonts, images, and styles for:

  • Dashboards.
  • Forms: alert colors and controls.
  • Portal Sites: header, footer and grids.
  • Action Catalogs.

There are two versions of the Theme Editor that can open when editing a theme, the universal Theme Editor and the classic Theme Editor. The editor that opens when you edit an existing theme depends on which version of the editor the theme was created in. This topic describes the universal Theme Editor, for help on the classic Theme Editor, see Classic Theme Editor.

Tip: The Theme Editor opens automatically when you create a new theme in the Theme Manager, see Create a Theme.

The universal Theme Editor is split into two panes, the Theme pane where you edit your theme, and a Preview pane where you can see the changes you have applied.

Theme Pane

The Theme pane contains sections in which you define the various elements of your theme. The sections displayed depend on the item you have open in the Preview pane, for example a form, dashboard, portal or action catalog.

Palette Colors:

Displayed for all themes and contains a series of color swatches in which you define a color and associations.

Each element present on your theme has specific named associations; when added to a swatch the color defined in the swatch is applied to the theme element.

Associations displayed in color swatches can be filtered, which is useful when a large number of associations are displayed and you want view only the ones you are working with.

See Working with Theme Editor Palette Colors.

Fonts:

Displayed for all themes and contains font controls for all text elements in your theme.

The Theme Font drop-down list applies the font you select to an entire theme. When you select a font in the Theme Font drop-down, it changes the fonts in all of the element font controls (in which the theme font is defined) to the font you selected.

Font control dialogs are used to define a font that you want to apply to individual text elements in a theme. You can also add new font types to apply to text elements.
Note: For the Dashboard Preview and Action Catalog Preview only the theme font is displayed, the font control dialogs are not displayed.

See Working with Theme Editor Fonts.

State Override:

Overrides the associated colors applied to an element in the Color Palette when the element changes state (example: when it is disabled or changed to read-only). Each State Override swatch contains three colors, which apply to an element's text, border and background. State overrides are displayed for the Form Preview only.

Each swatch is named to identify the element types to which it applies.

You can edit the colors for each swatch present in this section.

See Working with Theme Editor State Override.

Dashboard Properties:

Applies the color selected in the drop-down list to the Chart Palette in a dashboard. Dashboard Properties is displayed for the Dashboard Preview only.

Preview Pane

In the Preview pane you can preview the theme applied to a form, dashboard, portal site, or action catalog. Any changes you apply in the Theme pane are immediately displayed in the Preview pane.

The sections displayed in the Theme pane are dependent on the item you are previewing.


Was this article useful?