How to Modify Specific Page Element CSS

Jason Morse1
Tera Contributor

‎08-11-2022 01:43 PM

Hi - we recently enabled the Next experience in our Development environment. I created a new UX Style record (on the sys_ux_style table), customized several CSS properties to align with our corporate branding, and then associated this record with the Polaris UX theme. (I followed the steps outlined on this Community post.) Everything is looking good for the most part.

However, there are a few page elements that don't have a custom CSS hook associated with them. They are controlled with a generic CSS property (i.e. --now-color--neutral-0). This is an issue, because modifying that CSS property has adverse effects across the rest of the site.

For example, with --now-color-neutral-0 set to RGB(255, 255, 255) (white), the unified nav search bar placeholder text and matched search results in the navigator are difficult to read.

find_real_file.png

If I change --now-color--neutral-0 to RGB(52, 55, 65) (dark gray), the above problems are resolved, but our dashboard widget backgrounds all turn gray, as does the helper text in some hover tooltips.

find_real_file.png

Is there a way to modify specific page element CSS, possibly by using the HTML element's class name? Or maybe we could set the style on page load using a script of some sort?

Any help would be much appreciated. Thank you!

Preview file
127 KB
Preview file
108 KB
  • 2,554 Views
1 REPLY 1

Tom Sienkiewicz
Mega Sage

‎08-12-2022 12:00 AM

Hi, I imagine you could affect the specific page style with an onLoad client script, but I would not recommend doing that, as you would need to play around with DOM of the page. You could theoretically find the right element by class/ID or both, then enforce a specific style for that element, but this would be very error prone.

Unfortunately I am not aware of any page-specific CSS. This is quite easy to do for Service Portal or UI Builder pages, but not for backend AFAIK. I know you can create style overrides as described here:

https://docs.servicenow.com/en-US/bundle/sandiego-platform-user-interface/page/administer/navigation... but this is global.

Maybe someone else can offer a better solution as I have not had a chance to investigate Next UI styles too much, but I would generally discourage you from pursuing this requirement if it means tapping into core page DOM.