Branding a ServiceNow instance in the System UI becomes somewhat complicated if you don’t know all the various options for the CSS classes ServiceNow offers. You can spend a lot of time modifying the system or creating a new theme. The result will be that you find out not all buttons and colors are getting adjusted with your selections.
In this article, I’m going to guide you through the modifications of a UI16 theme. Firstly, I will show you how you can add the missing properties to the Basic Configuration UI16 module including your company’s branding, logo, and slogan. Secondly, I will offer you everything as a download update set so you can directly start with a new custom theme.
If you can’t wait you can directly download the missing properties update set which will add all properties offered for the UI16 theme branding to the module.
Basically, you can find a lot of information about how to create a custom theme or adjust one of the default themes in ServiceNow via the documentation in the Default CSS configurations section. However, after you’ve read through the documentation you will recognize that nobody is really helping you to explain what these strange CSS system properties mean. Therefore I will try to help you with that in the rest of this article.
creating a custom theme in Servicenow
ServiceNow comes with several built-in themes that you can select via the System Settings at the top-right. In this paragraph, I would like to explain how you can create your own custom theme for ServiceNow. In the end, you will be able to use that in the theme selector as well.
To get started:
- Navigate to System UI > Themes.
- Click New.
- Enter a Name.
- Select a Base Theme, for instance La Jolla or Cobalt..
- Check Active checkbox.
- Select Device “Concourse” for UI16.
- Click Submit.
Now you have set the baseline for your custom theme. This should now be already selectable in the System Settings.
To override the CSS of the default system theme you can add CSS selectors to your own. After that you can change the colors for them. Unfortunately there is just an explanation for some of the CSS selectors available on ServiceNow docs and not all existing ones are explained. Therefore I added some more details on each of the CSS selectors:
| CSS Selector | Short Description |
| $navpage-header-bg | Header background color |
| $navpage-header-color | Header text color |
| $navpage-header-divider-color | Header divider stripe color |
| $navpage-header-button-color | Header buttons color |
| $navpage-button-color-hover | Header button color hover |
| $navpage-button-color | Header Button Color (Update Set/Application Picker) |
| $navpage-nav-bg | Navigation header/footer |
| $navpage-nav-bg-sub | Background for navigator and sidebars |
| $subnav-background-color | Navigation background expanded items |
| $navpage-nav-color-sub | Module text color for UI16 |
| $navpage-nav-selected-bg | Filter Navigator selected/active tab background color |
| $navpage-nav-selected-color | Filter navigator selected/active tab icon color |
| $nav-highlight-bar-active | Navigation selected/active tab divider bar color / Header icons tob right selected color |
| $navpage-nav-unselected-color | Filter navigator unselected/inactive tab icon color |
| $nav-highlight-bar-inactive | Navigation unselected/inactive tab divider bar color |
| $navpage-nav-border | Border color for UI16 |
| $nav-hr-color | Navigation separator color |
| $search-text-color | Filter Navigator / Global Search text color |
| $navpage-nav-app-text | Filter Navigator App color |
| $connect-latest-message | Helptext area body color |
You can add these CSS selectors to your custom theme in the CSS field and add your custom color as hex value. If you don’t use any of the above mentioned CSS selector the selected default theme will define the value for the CSS selector.
Customize the Default Theme
In case you don’t like to create a new theme and would like to adjust the default system one, you can do this with the same CSS selectors listed above. This might be helpful if you just want to have one theme and remove all selection options.
To customize the default theme completely add the CSS selectors mentioned above as a system property in the following form:
- Name: css.$connect-latest-message
- Type: color
- Value: hex value (e.g. #000000)
- Category: System Configuration UI16
In case you want to go fast, you can download and install this update set (TLGR – Missing System UI Theme properties.xml). By this, all missing system properties will be added and displayed on the System Properties > Basic Configuration UI16 page.
In addition, you will get the try. learn. grow. repeat update set as well. This will add a custom theme that looks like mine, just in case you don’t want to build one from scratch.
Don’t know how to install an update set? – Tutorial: How to install update sets from TLGR or other sources?
