Contents Now Platform User Interface Previous Topic Next Topic Configure logo, colors, and system defaults for UI16 Subscribe Log in to subscribe to topics and get notified when content changes. ... SAVE AS PDF Selected Topic Topic & Subtopics All Topics in Contents Share Configure logo, colors, and system defaults for UI16 You can use the Basic Configuration UI16 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 UI16. Before you beginTo prepare for completing basic configuration, gather the following information: Obtain the company banner image to use in the header. The image can be high resolution, but when it displays it is scaled based on the aspect ratio. It scales to a maximum of 20px high. Get the brand color hex or RGB numbers of your company, typically from your marketing department. Use them to decide how to configure the UI background colors. Role required: admin About this taskEach color selection option provides a color picker to select a color. The text box beside the color picker lets you enter the value of the color as any of the following CSS formats: Name: predefined color names, such as red, green, or blue RGB decimal: RGB (102, 153, 204) RGB hex: #223344 Refer to HTML Color Names (W3CSchools) for information about HTML color names. Procedure Navigate to System Properties > Basic Configuration UI16. Complete the configuration by changing any of the following settings: Table 1. Basic system configuration properties Label Property Description Page header caption glide.product.description Change the text that appears next to your logo. Browser tab title glide.product.name Change the text that appears on the browser tab. System timezone for all users unless overridden in the user's record glide.sys.default.tz Select the timezone in the choice list.Click Configure available time zones to select the time zones that your users can select from in user preferences. Banner image for UI16 glide.product.image.light Click + next to the image and upload your logo. Date formatTime format glide.sys.date_formatglide.sys.time_format Select the date and time formats from the choice lists. Header background color css.$navpage-header-bg Select or enter the color. This color is also used as part of the theme preview on the Themes tab under system settings. Banner text color css.$navpage-header-color Select or enter the color. This color is also used as part of the theme preview on the Themes tab under system settings. Header divider stripe color css.$navpage-header-divider-color Select or enter the color. Navigation header/footer css.$navpage-nav-bg Select or enter the color. Navigation background expanded items css.$subnav-background-color Select or enter the color. Module text color for UI16 css.$navpage-nav-color-sub Select or enter the color. Navigation selected tab background color css.$navpage-nav-selected-bg Select or enter the color. Navigation selected tab divider bar color css.$nav-highlight-bar-active This color is also used as part of the theme preview on the Themes tab under system settings. Navigation unselected tab divider bar color css.$nav-highlight-bar-inactive Navigation separator color css.$nav-hr-color Select or enter the color. Background for navigator and sidebars css.$navpage-nav-bg-sub Select or enter the color. Currently selected Navigation tab icon color for UI16 css.$navpage-nav-selected-color Select or enter the color. Unselected navigation tab icon and favorite icons color css.$navpage-nav-unselected-color Select or enter the color. Border color for UI16 css.$navpage-nav-border Select or enter the color. Also affects the border of the Filter conversations search box in the Connect Chat sidebar. Selected base theme glide.ui.base_theme.selected_theme Switches the main content (everything other than the application navigator and the header) between the La Jolla and Cobalt themes. For most of the settings, as you make changes, the page refreshes with a preview of the change. Only you see these changes. Some settings require you to log out and log back in again to see the change. Click Save at the top or bottom of the page. ResultAfter you save the configuration changes, all users who select the System theme in their UI personalization options see the new configuration colors. La Jolla and cobalt theme comparison The La Jolla theme is the new brand theme for ServiceNow. When you upgrade to Madrid, your theme is automatically upgraded to the La Jolla theme. Any customizations you have made to the system theme will not be upgraded. Use the styles in the list below to upgrade or revert any styles to the new or old theme. Make changes to any of these styles by navigating to System Properties > Basic Configuration UI16. Table 2. La Jolla and Cobalt theme styles Property La Jolla style Cobalt style Header background color css.$navpage-header-bg #ffffff #303a46 Header divider stripe color css.$navpage-header-divider-color #5a7f71 #455464 Navigation header/footer css.$navpage-nav-bg #293e40 #303A46 Navigation background expanded itemscss.$subnav-background-color #213234 #303a46 Module text color for UI16 css.$navpage-nav-color-sub #bec1c6 #bec1c6 Navigation selected tab background colorcss.$navpage-nav-selected-bg #2f4fe #4b545f Navigation selected tab divider bar colorcss.$nav-highlight-bar-active #82c9b8 #278efc Navigation unselected tab divider bar colorcss.$nav-highlight-bar-inactive #213234 #81878e Navigation separator color css.$nav-hr-color #293e40 #303a46 Background for navigator and sidebarscss.$navpage-nav-bg-sub #293e40 #455464 Currently selected Navigation tab icon color for UI16 css.$navpage-nav-selected-color #82c9b8 #ffffff Unselected navigation tab icon and favorite icons color css.$navpage-nav-unselected-color #bec1c6 #bec1c6 Border color for UI16 css.$navpage-nav-border #7a828a #ddd Selected Base Themeglide.ui.base_theme.selected_theme La Jolla SysID: c92c1ee153002300dda1ddeeff7b125b Cobalt SysID: 6f3c9ae153002300dda1ddeeff7b124a On this page Send Feedback Previous Topic Next Topic
Configure logo, colors, and system defaults for UI16 You can use the Basic Configuration UI16 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 UI16. Before you beginTo prepare for completing basic configuration, gather the following information: Obtain the company banner image to use in the header. The image can be high resolution, but when it displays it is scaled based on the aspect ratio. It scales to a maximum of 20px high. Get the brand color hex or RGB numbers of your company, typically from your marketing department. Use them to decide how to configure the UI background colors. Role required: admin About this taskEach color selection option provides a color picker to select a color. The text box beside the color picker lets you enter the value of the color as any of the following CSS formats: Name: predefined color names, such as red, green, or blue RGB decimal: RGB (102, 153, 204) RGB hex: #223344 Refer to HTML Color Names (W3CSchools) for information about HTML color names. Procedure Navigate to System Properties > Basic Configuration UI16. Complete the configuration by changing any of the following settings: Table 1. Basic system configuration properties Label Property Description Page header caption glide.product.description Change the text that appears next to your logo. Browser tab title glide.product.name Change the text that appears on the browser tab. System timezone for all users unless overridden in the user's record glide.sys.default.tz Select the timezone in the choice list.Click Configure available time zones to select the time zones that your users can select from in user preferences. Banner image for UI16 glide.product.image.light Click + next to the image and upload your logo. Date formatTime format glide.sys.date_formatglide.sys.time_format Select the date and time formats from the choice lists. Header background color css.$navpage-header-bg Select or enter the color. This color is also used as part of the theme preview on the Themes tab under system settings. Banner text color css.$navpage-header-color Select or enter the color. This color is also used as part of the theme preview on the Themes tab under system settings. Header divider stripe color css.$navpage-header-divider-color Select or enter the color. Navigation header/footer css.$navpage-nav-bg Select or enter the color. Navigation background expanded items css.$subnav-background-color Select or enter the color. Module text color for UI16 css.$navpage-nav-color-sub Select or enter the color. Navigation selected tab background color css.$navpage-nav-selected-bg Select or enter the color. Navigation selected tab divider bar color css.$nav-highlight-bar-active This color is also used as part of the theme preview on the Themes tab under system settings. Navigation unselected tab divider bar color css.$nav-highlight-bar-inactive Navigation separator color css.$nav-hr-color Select or enter the color. Background for navigator and sidebars css.$navpage-nav-bg-sub Select or enter the color. Currently selected Navigation tab icon color for UI16 css.$navpage-nav-selected-color Select or enter the color. Unselected navigation tab icon and favorite icons color css.$navpage-nav-unselected-color Select or enter the color. Border color for UI16 css.$navpage-nav-border Select or enter the color. Also affects the border of the Filter conversations search box in the Connect Chat sidebar. Selected base theme glide.ui.base_theme.selected_theme Switches the main content (everything other than the application navigator and the header) between the La Jolla and Cobalt themes. For most of the settings, as you make changes, the page refreshes with a preview of the change. Only you see these changes. Some settings require you to log out and log back in again to see the change. Click Save at the top or bottom of the page. ResultAfter you save the configuration changes, all users who select the System theme in their UI personalization options see the new configuration colors. La Jolla and cobalt theme comparison The La Jolla theme is the new brand theme for ServiceNow. When you upgrade to Madrid, your theme is automatically upgraded to the La Jolla theme. Any customizations you have made to the system theme will not be upgraded. Use the styles in the list below to upgrade or revert any styles to the new or old theme. Make changes to any of these styles by navigating to System Properties > Basic Configuration UI16. Table 2. La Jolla and Cobalt theme styles Property La Jolla style Cobalt style Header background color css.$navpage-header-bg #ffffff #303a46 Header divider stripe color css.$navpage-header-divider-color #5a7f71 #455464 Navigation header/footer css.$navpage-nav-bg #293e40 #303A46 Navigation background expanded itemscss.$subnav-background-color #213234 #303a46 Module text color for UI16 css.$navpage-nav-color-sub #bec1c6 #bec1c6 Navigation selected tab background colorcss.$navpage-nav-selected-bg #2f4fe #4b545f Navigation selected tab divider bar colorcss.$nav-highlight-bar-active #82c9b8 #278efc Navigation unselected tab divider bar colorcss.$nav-highlight-bar-inactive #213234 #81878e Navigation separator color css.$nav-hr-color #293e40 #303a46 Background for navigator and sidebarscss.$navpage-nav-bg-sub #293e40 #455464 Currently selected Navigation tab icon color for UI16 css.$navpage-nav-selected-color #82c9b8 #ffffff Unselected navigation tab icon and favorite icons color css.$navpage-nav-unselected-color #bec1c6 #bec1c6 Border color for UI16 css.$navpage-nav-border #7a828a #ddd Selected Base Themeglide.ui.base_theme.selected_theme La Jolla SysID: c92c1ee153002300dda1ddeeff7b125b Cobalt SysID: 6f3c9ae153002300dda1ddeeff7b124a
Configure logo, colors, and system defaults for UI16 You can use the Basic Configuration UI16 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 UI16. Before you beginTo prepare for completing basic configuration, gather the following information: Obtain the company banner image to use in the header. The image can be high resolution, but when it displays it is scaled based on the aspect ratio. It scales to a maximum of 20px high. Get the brand color hex or RGB numbers of your company, typically from your marketing department. Use them to decide how to configure the UI background colors. Role required: admin About this taskEach color selection option provides a color picker to select a color. The text box beside the color picker lets you enter the value of the color as any of the following CSS formats: Name: predefined color names, such as red, green, or blue RGB decimal: RGB (102, 153, 204) RGB hex: #223344 Refer to HTML Color Names (W3CSchools) for information about HTML color names. Procedure Navigate to System Properties > Basic Configuration UI16. Complete the configuration by changing any of the following settings: Table 1. Basic system configuration properties Label Property Description Page header caption glide.product.description Change the text that appears next to your logo. Browser tab title glide.product.name Change the text that appears on the browser tab. System timezone for all users unless overridden in the user's record glide.sys.default.tz Select the timezone in the choice list.Click Configure available time zones to select the time zones that your users can select from in user preferences. Banner image for UI16 glide.product.image.light Click + next to the image and upload your logo. Date formatTime format glide.sys.date_formatglide.sys.time_format Select the date and time formats from the choice lists. Header background color css.$navpage-header-bg Select or enter the color. This color is also used as part of the theme preview on the Themes tab under system settings. Banner text color css.$navpage-header-color Select or enter the color. This color is also used as part of the theme preview on the Themes tab under system settings. Header divider stripe color css.$navpage-header-divider-color Select or enter the color. Navigation header/footer css.$navpage-nav-bg Select or enter the color. Navigation background expanded items css.$subnav-background-color Select or enter the color. Module text color for UI16 css.$navpage-nav-color-sub Select or enter the color. Navigation selected tab background color css.$navpage-nav-selected-bg Select or enter the color. Navigation selected tab divider bar color css.$nav-highlight-bar-active This color is also used as part of the theme preview on the Themes tab under system settings. Navigation unselected tab divider bar color css.$nav-highlight-bar-inactive Navigation separator color css.$nav-hr-color Select or enter the color. Background for navigator and sidebars css.$navpage-nav-bg-sub Select or enter the color. Currently selected Navigation tab icon color for UI16 css.$navpage-nav-selected-color Select or enter the color. Unselected navigation tab icon and favorite icons color css.$navpage-nav-unselected-color Select or enter the color. Border color for UI16 css.$navpage-nav-border Select or enter the color. Also affects the border of the Filter conversations search box in the Connect Chat sidebar. Selected base theme glide.ui.base_theme.selected_theme Switches the main content (everything other than the application navigator and the header) between the La Jolla and Cobalt themes. For most of the settings, as you make changes, the page refreshes with a preview of the change. Only you see these changes. Some settings require you to log out and log back in again to see the change. Click Save at the top or bottom of the page. ResultAfter you save the configuration changes, all users who select the System theme in their UI personalization options see the new configuration colors. La Jolla and cobalt theme comparison The La Jolla theme is the new brand theme for ServiceNow. When you upgrade to Madrid, your theme is automatically upgraded to the La Jolla theme. Any customizations you have made to the system theme will not be upgraded. Use the styles in the list below to upgrade or revert any styles to the new or old theme. Make changes to any of these styles by navigating to System Properties > Basic Configuration UI16. Table 2. La Jolla and Cobalt theme styles Property La Jolla style Cobalt style Header background color css.$navpage-header-bg #ffffff #303a46 Header divider stripe color css.$navpage-header-divider-color #5a7f71 #455464 Navigation header/footer css.$navpage-nav-bg #293e40 #303A46 Navigation background expanded itemscss.$subnav-background-color #213234 #303a46 Module text color for UI16 css.$navpage-nav-color-sub #bec1c6 #bec1c6 Navigation selected tab background colorcss.$navpage-nav-selected-bg #2f4fe #4b545f Navigation selected tab divider bar colorcss.$nav-highlight-bar-active #82c9b8 #278efc Navigation unselected tab divider bar colorcss.$nav-highlight-bar-inactive #213234 #81878e Navigation separator color css.$nav-hr-color #293e40 #303a46 Background for navigator and sidebarscss.$navpage-nav-bg-sub #293e40 #455464 Currently selected Navigation tab icon color for UI16 css.$navpage-nav-selected-color #82c9b8 #ffffff Unselected navigation tab icon and favorite icons color css.$navpage-nav-unselected-color #bec1c6 #bec1c6 Border color for UI16 css.$navpage-nav-border #7a828a #ddd Selected Base Themeglide.ui.base_theme.selected_theme La Jolla SysID: c92c1ee153002300dda1ddeeff7b125b Cobalt SysID: 6f3c9ae153002300dda1ddeeff7b124a
Configure logo, colors, and system defaults for UI16 You can use the Basic Configuration UI16 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 UI16. Before you beginTo prepare for completing basic configuration, gather the following information: Obtain the company banner image to use in the header. The image can be high resolution, but when it displays it is scaled based on the aspect ratio. It scales to a maximum of 20px high. Get the brand color hex or RGB numbers of your company, typically from your marketing department. Use them to decide how to configure the UI background colors. Role required: admin About this taskEach color selection option provides a color picker to select a color. The text box beside the color picker lets you enter the value of the color as any of the following CSS formats: Name: predefined color names, such as red, green, or blue RGB decimal: RGB (102, 153, 204) RGB hex: #223344 Refer to HTML Color Names (W3CSchools) for information about HTML color names. Procedure Navigate to System Properties > Basic Configuration UI16. Complete the configuration by changing any of the following settings: Table 1. Basic system configuration properties Label Property Description Page header caption glide.product.description Change the text that appears next to your logo. Browser tab title glide.product.name Change the text that appears on the browser tab. System timezone for all users unless overridden in the user's record glide.sys.default.tz Select the timezone in the choice list.Click Configure available time zones to select the time zones that your users can select from in user preferences. Banner image for UI16 glide.product.image.light Click + next to the image and upload your logo. Date formatTime format glide.sys.date_formatglide.sys.time_format Select the date and time formats from the choice lists. Header background color css.$navpage-header-bg Select or enter the color. This color is also used as part of the theme preview on the Themes tab under system settings. Banner text color css.$navpage-header-color Select or enter the color. This color is also used as part of the theme preview on the Themes tab under system settings. Header divider stripe color css.$navpage-header-divider-color Select or enter the color. Navigation header/footer css.$navpage-nav-bg Select or enter the color. Navigation background expanded items css.$subnav-background-color Select or enter the color. Module text color for UI16 css.$navpage-nav-color-sub Select or enter the color. Navigation selected tab background color css.$navpage-nav-selected-bg Select or enter the color. Navigation selected tab divider bar color css.$nav-highlight-bar-active This color is also used as part of the theme preview on the Themes tab under system settings. Navigation unselected tab divider bar color css.$nav-highlight-bar-inactive Navigation separator color css.$nav-hr-color Select or enter the color. Background for navigator and sidebars css.$navpage-nav-bg-sub Select or enter the color. Currently selected Navigation tab icon color for UI16 css.$navpage-nav-selected-color Select or enter the color. Unselected navigation tab icon and favorite icons color css.$navpage-nav-unselected-color Select or enter the color. Border color for UI16 css.$navpage-nav-border Select or enter the color. Also affects the border of the Filter conversations search box in the Connect Chat sidebar. Selected base theme glide.ui.base_theme.selected_theme Switches the main content (everything other than the application navigator and the header) between the La Jolla and Cobalt themes. For most of the settings, as you make changes, the page refreshes with a preview of the change. Only you see these changes. Some settings require you to log out and log back in again to see the change. Click Save at the top or bottom of the page. ResultAfter you save the configuration changes, all users who select the System theme in their UI personalization options see the new configuration colors. La Jolla and cobalt theme comparison The La Jolla theme is the new brand theme for ServiceNow. When you upgrade to Madrid, your theme is automatically upgraded to the La Jolla theme. Any customizations you have made to the system theme will not be upgraded. Use the styles in the list below to upgrade or revert any styles to the new or old theme. Make changes to any of these styles by navigating to System Properties > Basic Configuration UI16. Table 2. La Jolla and Cobalt theme styles Property La Jolla style Cobalt style Header background color css.$navpage-header-bg #ffffff #303a46 Header divider stripe color css.$navpage-header-divider-color #5a7f71 #455464 Navigation header/footer css.$navpage-nav-bg #293e40 #303A46 Navigation background expanded itemscss.$subnav-background-color #213234 #303a46 Module text color for UI16 css.$navpage-nav-color-sub #bec1c6 #bec1c6 Navigation selected tab background colorcss.$navpage-nav-selected-bg #2f4fe #4b545f Navigation selected tab divider bar colorcss.$nav-highlight-bar-active #82c9b8 #278efc Navigation unselected tab divider bar colorcss.$nav-highlight-bar-inactive #213234 #81878e Navigation separator color css.$nav-hr-color #293e40 #303a46 Background for navigator and sidebarscss.$navpage-nav-bg-sub #293e40 #455464 Currently selected Navigation tab icon color for UI16 css.$navpage-nav-selected-color #82c9b8 #ffffff Unselected navigation tab icon and favorite icons color css.$navpage-nav-unselected-color #bec1c6 #bec1c6 Border color for UI16 css.$navpage-nav-border #7a828a #ddd Selected Base Themeglide.ui.base_theme.selected_theme La Jolla SysID: c92c1ee153002300dda1ddeeff7b125b Cobalt SysID: 6f3c9ae153002300dda1ddeeff7b124a
La Jolla and cobalt theme comparison The La Jolla theme is the new brand theme for ServiceNow. When you upgrade to Madrid, your theme is automatically upgraded to the La Jolla theme. Any customizations you have made to the system theme will not be upgraded. Use the styles in the list below to upgrade or revert any styles to the new or old theme. Make changes to any of these styles by navigating to System Properties > Basic Configuration UI16. Table 2. La Jolla and Cobalt theme styles Property La Jolla style Cobalt style Header background color css.$navpage-header-bg #ffffff #303a46 Header divider stripe color css.$navpage-header-divider-color #5a7f71 #455464 Navigation header/footer css.$navpage-nav-bg #293e40 #303A46 Navigation background expanded itemscss.$subnav-background-color #213234 #303a46 Module text color for UI16 css.$navpage-nav-color-sub #bec1c6 #bec1c6 Navigation selected tab background colorcss.$navpage-nav-selected-bg #2f4fe #4b545f Navigation selected tab divider bar colorcss.$nav-highlight-bar-active #82c9b8 #278efc Navigation unselected tab divider bar colorcss.$nav-highlight-bar-inactive #213234 #81878e Navigation separator color css.$nav-hr-color #293e40 #303a46 Background for navigator and sidebarscss.$navpage-nav-bg-sub #293e40 #455464 Currently selected Navigation tab icon color for UI16 css.$navpage-nav-selected-color #82c9b8 #ffffff Unselected navigation tab icon and favorite icons color css.$navpage-nav-unselected-color #bec1c6 #bec1c6 Border color for UI16 css.$navpage-nav-border #7a828a #ddd Selected Base Themeglide.ui.base_theme.selected_theme La Jolla SysID: c92c1ee153002300dda1ddeeff7b125b Cobalt SysID: 6f3c9ae153002300dda1ddeeff7b124a