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?

[jason_siegrist]

When will SNC allow us to change the main pane background to a dark er color ... my whole company is asking for this .... and I do not like the idea of a global client script that tries to inject CSS on load.

[ChrisBurks]

The possible reason that the main pane currently isn't available for the background color to change is that it still uses an iframe. And although a background color of an iframe can be applied, they would have to keep track of every page that would ever be rendered in that iframe to not only have coordinating colors but make sure that there wouldn't be spaces that conflict with any page's layout or design that is rendered in that iframe. To me that would be a nightmare to maintain even though forms and lists are what mostly get rendered. But there are various other types of pages that get rendered that may contain charts, graphs, tables and the sort.

You can use the browser's inspect element to play around with applying a color to that iframe and then applying a transparency on the rendered page inside that iframe to get a glance of what I'm describing.

Who knows? They might change this if and when they move away from using the iframe for that main pane.

Disclaimer: This is not fact on the reason why styling is not available for the main pane. It's just my observation.

[jayw]

Thanks for sharing! One question I'm not finding a good answer for - Which property controls the color of the placeholder text in the inputs for the filter navigator and global text search? The $search-text-color variable doesn't seem to handle it completely - if we set that variable to #000000 or #ffffff, it still appears as a dull grey. Thanks!

[FinToy]

Does anyone have information about this problem? I'm also fighting with the same issue. For some reason the text is exactly the same color as the hover but I cannot find the correct place to fix it. All the other tabs are fine.

trying to change font color of history tab in navigation pane.

[FinToy]

Answering myself:

$navpage-header-color affects both top bar text color AND history text color when hovered. Not good.

How can these be so poorly documented in Docs?