Customizing instance appearance

An administrator can change global CSS or system properties to alter the look and feel of the default instance interface. Functionality is not affected.

For example, organizations often use multiple instances to separate development, testing, and production activities. To help users avoid accidentally changing the wrong instance, administrators can configure each with a visually distinct theme. Several approaches are available for defining an instance theme.

CSS Properties

Navigate to System Properties > CSS.

The following properties are available through CSS Properties.

Note:

Colors are specified using predefined color names, RGB decimals, or RGB hexadecimals.

• Banner text color
• Banner and list caption background color
• Font used in forms and lists (this is a global font setting)
• Button styles (background color, border color, border width, text color)
• Field status indicator colors (including the indicators for Changed, Mandatory Populated, Mandatory Unpopulated, and Read-only)
• List cell vertical alignment
• Navigator menu styles (text font size, background color, text color)
• Header font name and size
• List and form caption color override
• Global text search background color (both for catalog results and knowledge base results)

UI properties

Navigate to System Properties > UI Properties.

The following properties are available through UI Properties.

• Icons used in the activity formatter
• Background colors for Additional Comments and Work Notes
• Button placement on forms
• Icons used in the Task Activity formatter
• Background colors for Incident Additional Comments and Work Notes

CSS class support

In Core UI (UI16), CSS properties and how they affect the platform UI change depending on the release.

Note:

Settings configured from the Basic Configuration UI16 page are not applicable to instances with Next Experience enabled.

Table 1. Supported CSS classes

CSS class	Description	How to configure
$navpage-header-bg	Header background color	Navigate to System Properties > Basic Configuration UI16 > Header background color
$navpage-header-color	Color for header text and the global search icon	Navigate to System Properties > Basic Configuration UI16 > Banner text color
$navpage-header-button-color	Color for logged in user name text, and the global search Connect, Help, and settings icons	Add the CSS property to the CSS field of a theme. For more information, see Create or customize a theme.
$navpage-header-divider-color	Header divider color	Navigate to System Properties > Basic Configuration UI16 > Header divider stripe color
$navpage-button-color	Color for the following icons in the sidebars Expand/collapse Create a conversation (in the Connect sidebar) Open Connect workspace	Add the CSS property to the CSS field of a theme. For more information, see Create or customize a theme.
$navpage-button-color-hover	Color for the following icons when a user points to the control: Global search Help Settings Clear text icon in the navigation filter	Add the CSS property to the CSS field of a theme. For more information, see Create or customize a theme.
$search-text-color	Color of the search text, both in the navigation filter and the global search fields	Add the CSS property to the CSS field of a theme. For more information, see Create or customize a theme.
$navpage-nav-border	Border color for the navigation filter and the conversation filter	Navigate to System Properties > Basic Configuration UI16 > Border color for UI16
$nav-highlight-main	Highlights the module after the user has clicked it. In the Connect workspace, highlights the selected conversation.	Add the CSS property to the CSS field of a theme. For more information, see Create or customize a theme.
$subnav-background-color	Background for expanded navigation items	Navigate to System Properties > Basic Configuration UI16 > Navigation background expanded items
$navpage-nav-bg	Header and footer for navigator and sidebars.	Navigate to System Properties > Basic Configuration UI16 > Navigation header/footer
$navpage-nav-bg-sub	Background for navigator and sidebars	Navigate to System Properties > Basic Configuration UI16 > Background for navigators and sidebars
$navpage-nav-color-sub	Text color for modules in the main navigation	Add the CSS property to the CSS field of a theme. For more information, see Create or customize a theme.
$navpage-nav-mod-text-hover	Text color when hovering over items in the main navigation	Not supported
$nav-hr-color	Navigator separator color	Navigate to System Properties > Basic Configuration UI16 > Navigation separator color
$nav-highlight-bar-active	Line under the active tab in the application navigator. This color is also used as part of the theme preview on the Themes tab under system settings.	Navigate to System Properties > Basic Configuration UI16 > Navigation selected tab divider bar color
$nav-highlight-bar-inactive	Line under the inactive tabs in the application navigator	Navigate to System Properties > Basic Configuration UI16 > Navigation unselected tab divider bar color
$navpage-nav-selected-bg	Navigation selected tab background color	Navigate to System Properties > Basic Configuration UI16 > Navigation selected tab background color
$navpage-nav-selected-color	Currently selected Navigation tab icon color	Navigate to System Properties > Basic Configuration UI16 > Currently selected Navigation tab color for UI16
$navpage-nav-unselected-color	Unselected navigation tab icon and favorite icons color	Navigate to System Properties > Basic Configuration UI16 > Unselected navigation tab icon and favorite icons color
$connect-latest-message	Color of the currently selected message in Connect	Add the CSS property to the CSS field of a theme. For more information, see Create or customize a theme.
$nav-timeago-header-color	Timestamp header backgrounds in History tab	Not supported
$navpage-nav-app-text	Core content text color for items such as applications and the empty state text for the Connect sidebar.	Add the CSS property to the CSS field of a theme. For more information, see Create or customize a theme.
$navpage-nav-app-text-hover	Text color for a selected module	Add the CSS property to the CSS field of a theme. For more information, see Create or customize a theme.

• Configure logo, colors, and system defaults for Core UI
  You can use the Basic Configuration Core UI module to brand your instance with your company logo and colors and set basic system defaults. This place is the best starting point if you are setting up your instance for the first time or if you have recently enabled Core UI.
• Select a theme in Core UI
  You can switch between different themes for the user interface.
• Customize menu categories
  Use menu categories to apply CSS styles to application labels.
• Change survey question header colors
  The Classic Environment uses a header color from the base color, which allows theming from CSS properties.
• CSS theme support
  Themes give the user interface a specific look and feel by using different color combinations.