Time for customizing: ServiceNow CSS Themes for Now Platform UI

It’s time for customizing the ServiceNow instance. In this article I’ll explain you how to create custom CSS themes for your ServiceNow instance.

In our company we wanted to customize our instance with two themes. A light one and a modern looking dark one. The most popular pros of dark themes are, they are battery saving, good to look at and more important, they are better four your eyes ūüėČ but only if you are working on night-time or dimmer workspaces. When you work in bright environments, a light theme is better for your eyes.

Both themes should be leaned to our corporate identity. So we asked our marketing to get the color codes. Since the color codes are in RGB we had to transform them into hex color codes. You can find a appropriate website below under Related Lists.

Required Roles
admin

UI16
The easiest way to customize the look of your instance is to edit the System Properties -> Basic Configuration UI16 module. In this module you are able to change some popular design options like the following:

Label Description Related System Property
Page header caption Custom Text in the Banner Frame. glide.product.description
Browser tab title Title of the browser tab.
Note: the browser tab title is divided into two sections: the title of the current displayed module and the defined Browser tab title. Both separated by a ‘|’ character.
undefined
Knowledge is the current selected module ant ‘ITSM universe – DEV’ is the Browser tab title.
glide.product.name
System timezone for all users unless overridden in the user’s record Select the time zone in the choice list. This is the default time zone every user has initially selected. The user is able to change this time zone in the user settings. You can click on Configure available time zones to prevent the users from selecting unnecessary time zone. glide.sys.default.tz
Banner image for UI16 Add a custom logo. glide.product.image.light
Date format Time format Select the date and time formats from the choice lists glide.sys.date_format Glide.sys.time_format
Header background color Color for the Banner Frame background.
undefined
css.$navpage-header-bg
Banner text color Color for the Banner Frame text.undefinedcss.$navpage-header-color
Header divider stripe color Color for the divider between the Banner Frame and the Application Navigator.undefined css.$navpage-header-divider-color
Navigation header/footer Color for the header/footer of the Application Navigator section.undefinedcss.$navpage-nav-bg
Navigation background expanded items Background color for the expanded modules in the Application Navigator.undefined css.$subnav-background-color
Module text color for UI16 Color for the module text.undefined css.$navpage-nav-color-sub
Navigation selected tab background color Color for the active tab in the Application Navigator.undefined css.$navpage-nav-selected-bg        
Navigation selected tab divider bar color         Color of the divider of the active tab and the Application List in the Application Navigator.
undefined
Note: This color is also used as part of the theme preview on the Themes tab under system settings.
css.$nav-highlight-bar-active        
Navigation unselected tab divider bar color         Color of the divider of the inactive tab and the Application List in the Application Navigator.undefined css.$nav-highlight-bar-inactive        
Navigationseparator color Color for the divider of  navigation separator.undefinedcss.$nav-hr-color
Background for navigator and sidebars         Background color of the navigator and sidebars.undefinedcss.$navpage-nav-bg-sub        
Currently selected Navigation tab icon color for UI16         Color of the active Navigation tab icon.undefinedcss.$navpage-nav-selected-color        
Unselected navigation tab icon and favorite icons color         Color of the inactive Navigation tab icon.undefinedcss.$navpage-nav-unselected-color        
Border color for UI16         Select or enter the color. Also affects the border of the Filter conversations search box in the Connect Chat sidebar.undefined css.$navpage-nav-border        
Selected base theme¬†¬†¬†¬†¬†¬†¬†¬† Switches the main content (everything other than the application navigator and the header) between the La Jolla and Cobalt themes. glide.ui.base_theme.selected_theme        

Do not forget to Save your settings. ūüėČ

Base Theme
Maybe you are asking yourself, what the base theme is as I have done. Therefore I want to provide clarity.

The two base themes are ‘La Jolla’ and ‘cobalt’. La Jolla is the new brand theme for ServiceNow. Since the Upgrade from previous Versions to Madrid, the theme is automatically upgraded to the La Jolla theme. Any customizations you have made to the system will not be upgraded.

CSS class support
With CSS variables you have more power to customize the look of the instance than with the Basic Configuration UI16 module.

CSS class Description How to configure Affected area
$navpage-header-bg Header background color Navigate to System Properties > Basic Configuration UI16 > Header background color
$navpage-header-color Color for header text and the global search icon Navigate to System Properties > Basic Configuration UI16 > Banner text color
$navpage-header-button-color Color for logged in user name text, and the global searchConnect, Help, and settings icons Add the CSS property to the CSS field of a theme. For more information, see Create or customize a theme.
$navpage-header-divider-color Header divider color Navigate to System Properties > Basic Configuration UI16 > Header divider stripe color
$navpage-button-color Color for the following icons in the sidebars Expand/collapse Create a conversation (in the Connect sidebar) Open Connect workspace Add the CSS property to the CSS field of a theme. For more information, see Create or customize a theme.
$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 Add the CSS property to the CSS field of a theme. For more information, see Create or customize a theme.
$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.
$navpage-nav-border Border color for the navigation filter and the conversation filter Navigate to System Properties > Basic Configuration UI16 > Border color for UI16
$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.
$subnav-background-color Background for expanded navigation items Navigate to System Properties > Basic Configuration UI16 > Navigation background expanded items
$navpage-nav-bg Header and footer for navigator and sidebars. Navigate to System Properties > Basic Configuration UI16 > Navigation header/footer
$navpage-nav-bg-sub Background for navigator and sidebars Navigate to System Properties > Basic Configuration UI16 > Background 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.
$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 Properties > Basic Configuration UI16 > Navigation separator color
$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 Properties > Basic Configuration UI16 > Navigation selected tab divider bar color
$nav-highlight-bar-inactive Line under the inactive tabs in the application navigator Navigate to System Properties > Basic Configuration UI16 > Navigation unselected tab divider bar color
$navpage-nav-selected-bg Navigation selected tab background color Navigate to System Properties > Basic Configuration UI16 > Navigation selected tab background color
$navpage-nav-selected-color Currently selected Navigation tab icon color Navigate to System Properties > Basic Configuration UI16 > Currently selected Navigation tab color for UI16
$navpage-nav-unselected-color Unselected navigation tab icon and favorite icons color Navigate to System Properties > Basic Configuration UI16 > Unselected navigation tab icon and favorite icons 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.
$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.
$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.

Add Theme
I’ll provide you two examples of themes, a dark and a light one. Maybe you’ll need to play with your color variables to get the best suited design for your instance. In some cases you could set one color to two variables and the worst could be to no longer see your text. The best is to test your custom CSS themes in your companies dev instance or your personal dev instance. ūüėČ

To upload your custom theme, go to System UI -> Themes and click New.

You have to provide the following information:
Name: provide a name for your theme like COMPANYNAMELight or COMPANYNAMEDark.
Base Theme: Selest a base theme. As you learnd, select the La Jolla theme.
Application: keep Global.
Active: select if you are ready to offer the theme for your coworkers.
CSS: provide the CSS variables and settings in the following format:
$navpage-header-bg: #3c3c3c
Device: select one of the following from the Device choice list to identify the user interface version for the theme:

Option Description
Browser Identifies a Legacy: UI11 theme.
Doctype Identifies a UI15 theme.
Concource Identifies a UI16 theme.

To apply the theme, go to Settings in the Banner Frame, Theme and then choose your preferred theme.

Note: When you are already creating themes for the prod instance, keep thinking on create one single theme with other colors for your dev or each other instance in order to be able to distinguish them visually quickly.

Download

Referred Links
https://docs.servicenow.com/bundle/newyork-platform-user-interface/page/administer/navigation-and-ui/reference/customizing-instance-appearance.html
https://www.color-hex.com/
https://docs.servicenow.com/bundle/newyork-platform-user-interface/page/administer/navigation-and-ui/task/t_ConfigureLogoColorsSysDfltsUI16.html

Schedules Public Holiday Germany for SLA Definitions

In the company I’m employed at we’re currently planning our service level agreements based on the different contracts, wondering how we can do justice to the situation of various public holidays of the German states.

Now I’m sitting here and wondering, how to easily create a single data source in excel for the public holidays in Germany and import them all at once.  There should be a solution to make a bulk import but I’m not able to find something on the world wide web.

So now I’m on my own. To my luck there are some default schedules for the U.S. Holidays on which I can orient myself.

The entries shown there are very well. But what’s with the dynamic holidays like Easter Sunday? – One solution came around in mind: Create an own schedule with all dynamic days for this and then create an parent-child relationship. For this it should be possible to create an excel file and then import everything all at once.

Export source data

First of all, I viewed the schedules table (cmn_schedule) where all schedules are stored. To export this table, you only need to click on one column option , select Export and then Excel (.xlsx).

To export the second table, I had to find the name. For this, I opened an schedule entries entry and right clicked on Show – ‘name’. After this, a small window appeard and I was able to see the table name (cmn_schedule_span):

I searched for this table by typing in cmn_schedule_span.list in the navigation field and hit enter. I exported this table like the one before.

Now I have the data of both, the schedules and the schedule entries.

From now it would be easy – I thought.

After I viewed the Content frame, I saw a related list which handles the parent/child relationships. This is a requirement as well. To find this table, I had to search a lot. But I’ve done it.

You need to klick in the table, e.g. Child Schedules on the Column Options , Configure and then select table. A new form is shown and you can see the table name cmn_other_schedule. Now I searched again in the navigation field to view the entries and export them.

Now I have all three source tables where I can orient myself:

Cmn_schedule.xlsx
– all schedules are stored here

Cmn_schedule_span.xlsx
– all schedule entries are stored, like the holiday “Neujahr” and it’s value, even if and when it’s repeated.

Cmn_other_schedule.xlsx
– all parent child relationships are stored here

Plan the data

I have opted for a detailed and yet simple method. For each object I make an own schedule where either the entry is stored or at least the reference to the child schedule.

So I had to gather all the information. You can see them in the following list:

  • Allerheiligen
  • Augsburger Friedensfest
  • Baden-W√ľrttemberg
  • Bayern
  • Berlin
  • Brandenburg
  • Bremen
  • Bu√ü- und Bettag
  • Christi Himmelfahrt
  • Deutsche einheitliche Feiertage
  • erster Weihnachtstag
  • Fronleichnam
  • Hamburg
  • Heiligabend
  • Heilige drei K√∂nige
  • Hessen
  • internationaler Frauentag
  • Karfreitag
  • Mari√§ Himmelfahrt
  • Mecklenburg Vorpommern
  • Neujahr
  • Niedersachsen
  • Nordrhein-Westfalen
  • Ostermontag
  • Ostersonntag
  • Pfingstmontag
  • Pfingstsonntag
  • Reformationstag
  • Rheinland-Pfalz
  • Saarland
  • Sachsen
  • Sachsen-Anhalt
  • Schleswig-Holstein
  • Silvester
  • Tag der Arbeit
  • Tag der deutschen Einheit
  • Th√ľringen
  • Weltkindertag
  • zweiter Weihnachtstag

In the second step I need the relationship of the individual schedules.

Parent Schedule Child schedule
Baden-W√ľrttemberg Heilige drei K√∂nige
Baden-W√ľrttemberg Fronleichnam
Baden-W√ľrttemberg Allerheiligen
Bayern Mariä Himmelfahrt
Bayern Allerheiligen
Bayern Heilige drei Könige
Bayern Fronleichnam
Berlin internationaler Frauentag
Brandenburg Reformationstag
Bremen Reformationstag
DE consostent Holidays DE consostent dynamic Holidays
Deutsche einheitliche Feiertage Ostermontag
Deutsche einheitliche Feiertage Pfingstmontag
Deutsche einheitliche Feiertage zweiter Weihnachtstag
Deutsche einheitliche Feiertage Tag der Arbeit
Deutsche einheitliche Feiertage Tag der deutschen Einheit
Deutsche einheitliche Feiertage Silvester
Deutsche einheitliche Feiertage Karfreitag
Deutsche einheitliche Feiertage Christi Himmelfahrt
Deutsche einheitliche Feiertage Heiligabend
Deutsche einheitliche Feiertage Ostersonntag
Deutsche einheitliche Feiertage Pfingstsonntag
Deutsche einheitliche Feiertage erster Weihnachtstag
Deutsche einheitliche Feiertage Neujahr
Hamburg Reformationstag
Hessen Fronleichnam
Mecklenburg Vorpommern Reformationstag
Niedersachsen Reformationstag
Nordrhein-Westfalen Fronleichnam
Nordrhein-Westfalen Allerheiligen
Rheinland-Pfalz Fronleichnam
Rheinland-Pfalz Allerheiligen
Saarland Mariä Himmelfahrt
Saarland Fronleichnam
Saarland Allerheiligen
Sachsen Buß- und Bettag
Sachsen Reformationstag
Sachsen-Anhalt Heilige drei Könige
Sachsen-Anhalt Reformationstag
Schleswig-Holstein Reformationstag
Th√ľringen Reformationstag

To plan the data for the entries, I searched the web to find a list where every holiday in germany and the corresponding states are stored. After a short time I found what I was looking for. On the web page of excelformeln (http://www.excelformeln.de/formeln.html?welcher=3) is a well explained forumla to identify the Ostersonntag. Based on this holiday, it’s easy to calculate each other dynamic holiday. There is also a file stored which already provides every holiday in each state. A nice benefit!

With this file it was very easy for me to plan the holidays and transform them into the file.

The most important fields for the entries are the following in a specific format:

Field name Example
Name Neujahr
All day TRUE
Repeat on 1
Start date time 01.01.2019 00:00:00
End date time 01.01.2019 23:59:59
Class Schedule Entry
Month 1
Monthly type Day of the month
Repeat every 1
Repeat until 0
Repeats Yearly
Schedule Deutsche einheitliche Feiertage
Show as Busy
Type Busy
Yearly type Day of the year

Import the update sets

Warning: it’s necesarry to import the files in the following order. If not, the importing process will  go wrong:

Cmn_schedule

Cmn_schedule_span

Cmn_other_schedule

To import the updates, I first have to load the data. Go to System Import Sets -> Load Data.

I created a new table like displayed in the image and hit submit:

The data was successfully loaded. Now I have to create a transform map. Therefore click on the Next steps Create transform map. After I provided all necessary information, I clicked on Auto Map Matching Fields.

Sometimes you have to use the Mapping Assist to map the source field to the correct target field. After everything has been mapped, you can Transform.

Now you can view the Schedules list and validate the import.

Now repeat this with the other two tables:

Cmn_schedule_span.xlsx
Load Data:
– Import set table: Create table
– Label: cmn_schedule_span holiday import
– Source of the import: File
– File: cmn_schedule_span.xlsx
Create transform map:
– Name: cmn_schedule_span holiday import
– Target table: Schedule Entry [cmn_schedule_span]
Auto Map Matching Fields
Mapping Assist (optional) NOTE: check Name field
Transform

Cmn_other_schedule.xlsx
Load Data:
– Import set table: Create table
– Label: cmn_other_schedule holiday import
– Source of the import: File
– File: cmn_other_schedule.xlsx
Create transform map:
– Name: cmn_other_schedule holiday import
– Target table: Other Schedule [cmn_other_schedule]
Auto Map Matching Fields
Mapping Assist (optional)
Transform

Please validate the new Schedules. Now you and we are able to create SLAs to provide correct functionality based on your needs.

I don’t want to deprived the files:

Download