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.
Before you begin
Gather the following:
Obtain the company banner image to use in the header. The image can be high resolution, but when it displays it’s scaled based on the aspect ratio. It scales to a maximum of 20 px
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 task
Each 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
Navigate to All > 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 time zone in the list.
Select Configure available time zones to select the time zones that your users can select from in user preferences.
Banner image for Core UI
glide.product.image.light
Select + next to the image and upload your logo.
Date format
Time format
glide.sys.date_format
glide.sys.time_format
Select the date and time format 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 the Core UI application navigator
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 Core UI
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 Core UI
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.
Select Save at the top or bottom of the page.
Result
After 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 items
css.$subnav-background-color
#213234
#303a46
Module text color for UI16
css.$navpage-nav-color-sub
#bec1c6
#bec1c6
Navigation selected tab background
color
css.$navpage-nav-selected-bg
#2f4fe
#4b545f
Navigation selected tab divider bar
color
css.$nav-highlight-bar-active
#82c9b8
#278efc
Navigation unselected tab divider bar
color
css.$nav-highlight-bar-inactive
#213234
#81878e
Navigation separator color
css.$nav-hr-color
#293e40
#303a46
Background for navigator and sidebars
css.$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
We use cookies on this site to improve your browsing experience, analyze individualized usage and website traffic, tailor content to your preferences, and make your interactions with our website more meaningful. To learn more about the cookies we use and how you can change your preferences, please read our Cookie Policy and visit our Cookie Preference Manager. By clicking “Accept and Proceed,” closing this banner or continuing to browse this site, you consent to the use of cookies.
