--- sourceDocument: Australia ServiceNow AI Platform user interface sourceDocumentLink: https://servicenow-prod.fluidtopics.net/r/pt-BR/platform-user-interface Release : - australia ft:locale : - pt-BR ft:publication_title : - Australia ServiceNow AI Platform user interface ft:clusterId : - platux bundleId : - platux workflow : - Platform --- # Customizing instance appearance # Customizing instance appearance {#ariaid-title1} * Versão de lançamento: Australia * * Atualizado 12 de mar. de 2026 * * ![](https://www.servicenow.com/docs/portal-asset/ico-clock) 4 min. de leitura 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 {#customizing-instance-appearance__section_ag1_qz2_p1b} Navigate to System PropertiesCSS. The following properties are available through CSS Properties. Nota: Colors are specified using predefined [color names](https://www.w3schools.com/css/css_colors.asp), 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) {#customizing-instance-appearance__ul_yxr_f3k_2p} ## UI properties {#customizing-instance-appearance__section_b45_d2f_p1b} Navigate to System PropertiesUI 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 {#customizing-instance-appearance__ul_chy_f2f_p1b} ## CSS class support {#customizing-instance-appearance__section_nzg_l2f_p1b} In Core UI (UI16), CSS properties and how they affect the platform UI change depending on the release. {#customizing-instance-appearance__table_xxt_5bk_11b__entry__4} | CSS class | Description | How to configure | Affected area | |-|-|-|-| | $navpage-header-bg | Header background color | Navigate to System PropertiesBasic Configuration UI16Header background color | ![Header background]() | | $navpage-header-color | Color for header text and the global search icon | Navigate to System PropertiesBasic Configuration UI16Banner text color | ![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](https://servicenow-prod.fluidtopics.net/zu69ywRVk8WH6Sctq28hzA "You can create themes or customize existing themes."). | ![Header with User name and Connect, Help, and settings icons highlighted]() | | $navpage-header-divider-color | Header divider color | Navigate to System PropertiesBasic Configuration UI16Header divider stripe color | ![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 {#customizing-instance-appearance__ul_tt4_ckt_b1b} | Add the CSS property to the CSS field of a theme. For more information, see [Create or customize a theme](https://servicenow-prod.fluidtopics.net/zu69ywRVk8WH6Sctq28hzA "You can create themes or customize existing themes."). | ![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 * Help * Settings * Clear text icon in the navigation filter {#customizing-instance-appearance__ul_dh2_lkt_b1b} | Add the CSS property to the CSS field of a theme. For more information, see [Create or customize a theme](https://servicenow-prod.fluidtopics.net/zu69ywRVk8WH6Sctq28hzA "You can create themes or customize existing themes."). | ![Point to the Help icon to show that it is blue when a user points to it]() ![Point to Clear option in the Application Navigator to show that it is also blue on point to]() | | $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](https://servicenow-prod.fluidtopics.net/zu69ywRVk8WH6Sctq28hzA "You can create themes or customize existing themes."). | ![Search in application navigator showing "incident" in white]() | | $navpage-nav-border | Border color for the navigation filter and the conversation filter | Navigate to System PropertiesBasic Configuration UI16Border color for UI16 | ![Filter navigator]() | | $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](https://servicenow-prod.fluidtopics.net/zu69ywRVk8WH6Sctq28hzA "You can create themes or customize existing themes."). | ![Selected conversation in the Connect Workspace showing the correct color]() | | $subnav-background-color | Background for expanded navigation items | Navigate to System PropertiesBasic Configuration UI16Navigation background expanded items | ![Application with expanded modules to show the difference in color]() | | $navpage-nav-bg | Header and footer for navigator and sidebars. | Navigate to System PropertiesBasic Configuration UI16Navigation header/footer | ![Navigation]() | | $navpage-nav-bg-sub | Background for navigator and sidebars | Navigate to System PropertiesBasic Configuration UI16Background 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](https://servicenow-prod.fluidtopics.net/zu69ywRVk8WH6Sctq28hzA "You can create themes or customize existing themes."). | | | $navpage-nav-mod-text-hover | Text color when hovering over items in the main navigation | Not supported | Not supported | | $nav-hr-color | Navigator separator color | Navigate to System PropertiesBasic Configuration UI16Navigation separator color | ![Separators]() | | $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 PropertiesBasic Configuration UI16Navigation selected tab divider bar color | ![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 | Navigate to System PropertiesBasic Configuration UI16Navigation unselected tab divider bar color | ![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 PropertiesBasic Configuration UI16Navigation selected tab background color | ![Selected tab]() | | $navpage-nav-selected-color | Currently selected Navigation tab icon color | Navigate to System PropertiesBasic Configuration UI16Currently selected Navigation tab color for UI16 | ![Navigation icon]() | | $navpage-nav-unselected-color | Unselected navigation tab icon and favorite icons color | Navigate to System PropertiesBasic Configuration UI16Unselected navigation tab icon and favorite icons color | ![Favorite icon 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](https://servicenow-prod.fluidtopics.net/zu69ywRVk8WH6Sctq28hzA "You can create themes or customize existing themes."). | | | $nav-timeago-header-color | Timestamp header backgrounds in History tab | Not supported | 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](https://servicenow-prod.fluidtopics.net/zu69ywRVk8WH6Sctq28hzA "You can create themes or customize existing themes."). | | | $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](https://servicenow-prod.fluidtopics.net/zu69ywRVk8WH6Sctq28hzA "You can create themes or customize existing themes."). | | [Tabela 1. CSS class support for Australia] {#customizing-instance-appearance__table_xxt_5bk_11b} * **[Configure logo, colors, and system defaults for Core UI](https://servicenow-prod.fluidtopics.net/KaAbsUfbDQ29Nz7aKp_Xpw#t_ConfigureLogoColorsSysDfltsUI16)** 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](https://servicenow-prod.fluidtopics.net/0scbskGPBI~zWIuht38USQ)** You can switch between different themes for the user interface. * **[Customize menu categories](https://servicenow-prod.fluidtopics.net/ki_AGG5vIU6PoH7Lrw0P~Q)** Use menu categories to apply CSS styles to application labels. * **[Change survey question header colors](https://servicenow-prod.fluidtopics.net/4DWa~BEtIESSD3UKjlySeA)** The Classic Environment uses a header color from the base color, which allows theming from CSS properties. * **[CSS theme support](https://servicenow-prod.fluidtopics.net/BtaQh0sS6a3lZKuLq55dJw)** Themes give the user interface a specific look and feel by using different color combinations.