Thank you for your feedback.
Form temporarily unavailable. Please try again or contact docfeedback@servicenow.com to submit your comments.
Versions
  • London
  • Kingston
  • Jakarta
  • Istanbul
  • Helsinki
  • Geneva
  • Store
Close

Helsinki CSS class support

Helsinki CSS class support

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

Table 1. CSS classes and what they do
CSS class Description How to configure Affected area
$navpage-header-bg Header background color Navigate to System Properties > Basic Configuration UI16
Header background
$navpage-header-color Color for header text and the global search icon, as well as the Application and Update set list icons (these lists must be enabled in the header) Navigate to System Properties > Basic Configuration UI16
Banner text color
$navpage-header-button-color Color for logged in user name text and 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. Header with User name and Connect, Help, and settings icons highlighted
$navpage-header-divider-color Header divider color Navigate to System Properties > Basic Configuration UI16
Header divider striper
$navpage-button-color Color for the following icons in the sidebars
  • Expand/collapse
  • Create a conversation (in the Connect sidebar)
  • Open Connect workspace
  • 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.
Connect sidebar with arrow pointing to the plus icon
$navpage-button-color-hover Color for the following icons when a user points to the control:
  • Global search
  • Expand/collapse
  • Create a conversation (in the Connect sidebar)
  • Open Connect workspace
  • 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.
Point to Clear option in the Application Navigator to show that it is also blue on hover
Point to Clear option in the Application Navigator to show that it is also blue on hover
$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.
Search in application navigator showing "incident" in white
$navpage-nav-border Border color for the navigation filter Navigate to System Properties > Basic Configuration UI16
Filter navigator
$nav-highlight-main Highlights the module after the user has clicked it and 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.
Selected conversation in the Connect Workspace showing the correct color
$subnav-background-color Background for expanded navigation items Add the CSS property to the CSS field of a theme. For more information, see Create or customize a theme.
Application with expanded modules to show the difference in color
$navpage-nav-bg Header and footer for navigator and sidebars Navigate to System Properties > Basic Configuration UI16
Navigation
$navpage-nav-bg-sub Background for navigator and sidebars Navigate to System Properties > Basic Configuration UI16
Navigator, sidebars
$navpage-nav-color-sub Text color in main navigation Add the CSS property to the CSS field of a theme. For more information, see Create or customize a theme.
Application navigator with Incident open and the modules beneath incident showing the text color is white
$navpage-nav-mod-text-hover Text color when hovering over items in the main navigation Add the CSS property to the CSS field of a theme. For more information, see Create or customize a theme.
Module text on hover displays as a different color
$nav-hr-color Navigator separator color Navigate to System Properties > Basic Configuration UI16
Separators
$nav-highlight-bar-active Line under the active tab in the application navigator Add the CSS property to the CSS field of a theme. For more information, see Create or customize a theme.
Application navigator with the All Applications tab selected and an arrow indicating the fact that the line under the tab is blue
$nav-highlight-bar-inactive Line under the inactive tabs in the application navigator Add the CSS property to the CSS field of a theme. For more information, see Create or customize a theme.
Application navigator with the All Applications tab selected and an arrow point to the other tabs to indicate that the line is a different color
$navpage-nav-selected-bg Navigation selected tab background color Navigate to System Properties > Basic Configuration UI16
Selected tab
$navpage-nav-selected-color Currently selected Navigation tab icon color Navigate to System Properties > Basic Configuration UI16
Navigation icon
$navpage-nav-unselected-color Unselected navigation tab icon and favorite icons color Add the CSS property to the CSS field of a theme. For more information, see Create or customize a theme.

$connect-latest-message Color of the latest message in the Connect workspace Add the CSS property to the CSS field of a theme. For more information, see Create or customize a theme. Connect workspace with latest message pointed out by arrow
$nav-timeago-header-color Timestamp header backgrounds in History tab Add the CSS property to the CSS field of a theme. For more information, see Create or customize a theme.
History with the time ago header highlighted
$navpage-nav-app-text Core content text color Add the CSS property to the CSS field of a theme. For more information, see Create or customize a theme.
Application navigator with arrow pointing at Service Desk to show that the text is white
$navpage-nav-app-text-hover Core content text color when a user points to the text Not supported Not supported