List of CSS Theme Variables

[davidmcdonald]

Hi all,

We're looking to do a slightly in-depth theme customisation of the UI16 interface. It looks like theme's use variables to populate the CSS that goes out to the client, the ones that start with a $.

However, I'm having issues locating a complete list of the variables available for use.

I've been able to piece together a couple from the docs.servicenow.com article;

Default CSS styles

and from the default themes available, but I still haven't located a solid & complete list.

Any thoughts?

[davidmcdonald]

Ones that I've found so far;

Section	Description	Variable	Notes
Header Colors	Search text color	$search-text-color	Found in Terminal theme
Header Colors	Topbar background color	$navpage-header-bg	Found in Terminal theme
Header Colors	Topbar text color	$navpage-header-color	Found in Terminal theme
Header Colors	Bottom border color on topbar	$navpage-header-divider-color	Found in Terminal theme
Header Colors	Top Navbar button color	$navpage-header-button-color	Estimated & worked
Left nav and navigation toolbar background color	Navigator hover color	$nav-highlight-main	Found in Terminal theme
Left nav and navigation toolbar background color	$nav-highlight-sub	Estimated & worked
Left nav and navigation toolbar background color	$nav-highlight-subnav	Estimated & worked
Left nav and navigation toolbar background color	Background for expanded navigation items	$subnav-background-color	Found in Terminal theme
Left nav and navigation toolbar background color	Backgorund for navigator (left side only)	$navpage-nav-bg	Found in Terminal theme
Left nav and navigation toolbar background color	Background for Favorites list, history list, and Connect list background	$navpage-nav-bg-sub	Found in Terminal theme
Left nav and navigation toolbar background color	Text color in main navigation	$navpage-nav-color-sub	Found in Terminal theme
Left nav and navigation toolbar background color	Text color when hovering over items in main nav	$navpage-nav-mod-text-hover	Found in Terminal theme
Left nav and navigation toolbar background color	Divider color in Navigator	$nav-hr-color	Found in Terminal theme
Navigator tabs	Active nav item underneath search	$nav-highlight-bar-active	Found in Terminal theme
Navigator tabs	Inactive nav items underneath search	$nav-highlight-bar-inactive	Found in Terminal theme
Navigator tabs	Background for currently selected navigation item underneath search	$navpage-nav-selected-bg	Found in Terminal theme
Navigator tabs	Color of icon for currently active nav item	$navpage-nav-selected-color	Found in Terminal theme
Navigator tabs	Color of icons for non inactive nav items	$navpage-nav-unselected-color	Found in Terminal theme
Navigator Application text	Color for latest connect messages in right bar	$connect-latest-message	Found in Terminal theme
Navigator Application text	Timestamp header backgrounds in History tab	$nav-timeago-header-color	Found in Terminal theme
Navigator Application text	Core content text color	$navpage-nav-app-text	Found in Terminal theme
Navigator Application text	Core content text color hover	$navpage-nav-app-text-hover	Found in Terminal theme
Color of outline for search	$navpage-nav-border	Found in Terminal theme
Default button/icon colors	$navpage-button-color	Found in Terminal theme
Hover color for ^^^	$navpage-button-color-hover	Found in Terminal theme

[FinToy]

https://fruitionpartners.eu/blog/2016/02/03/customize-your-servicenow-geneva-interface-in-5-easy-ste...

However, even this list is not complete. Hope this helps anyway.

[ChrisBurks]

Nice mapping of the CSS styles and what area they change.

[davidmcdonald]

Very nice mapping. I'd love to see that image on the ServiceNow docs or wiki, it'd be perfect.