Hi,
I'm new to ServiceNow, so I'm looking for guidance on some branding items.
I would like to change the background-color of an app when hovering over it in the Application Navigator. It work like this (excuse the color):
However, I was unable to find the variable that controls this in Themes. Using the Developer tool in Chrome, I can see which class is causing the hover, but it doesn't look like you can override the CSS in the Support user side.
Additionally, I found that $nav-highlight-main applies, but then the color disappears after a second, so you don't have a visual indicator of which module you're using in the App Navigator.
Thanks,
Sheena
$nav-highlight-main is the CSS directive to modify to control the hover color of the navigator. You can find it in System UI> Themes and open the appropriate record.
I don't see it disappearing as you described though. If you pass from modules to menus, it may have a different effect. Staying on modules seems to be just fine for me.
Note: I don't use red, I only used it to identify which directive controls the hover color. 🙂
Thanks for your responses!
The hover color is still showing grey though:
And when I click a module that displays to a table, it blinks the $nav-highlight-main specified color, then goes back to the $subnav-background-color.
This is a Kingston Dev instance using UI16. This is the code from my custom theme I created in the Themes:
/* Banner */
$navpage-header-bg: #ffffff
$navpage-header-color: #333333
$navpage-header-divider-color: #d4d4d4
$navpage-header-button-color: #555555
$navpage-button-color: #555555
$navpage-button-color-hover: #d91e2a
/* Nav */
$search-text-color: #555555
$navpage-nav-border: #555555
$nav-highlight-main: #d91e2a
$subnav-background-color: #ffffff
$navpage-nav-bg: #eeeeee
$navpage-nav-bg-sub: #eeeeee
$navpage-nav-color-sub: #555555
$navpage-nav-mod-text-hover: #ffffff
$nav-hr-color: #ffffff
/* Navigator tabs */
$nav-highlight-bar-active: #d91e2a
$nav-highlight-bar-inactive: #797777
$navpage-nav-selected-bg: #949494
$navpage-nav-selected-color: #ffffff
$navpage-nav-unselected-color: #555555
/* Other */
$connect-latest-message: #777777
$nav-timeago-header-color: #d91e2a
$navpage-nav-app-text: #555555
$navpage-nav-app-text-hover: #ffffff !important /* No idea what this does */
Thanks for your responses!
The hover color is still showing grey though:
And when I click a module that displays to a table, it blinks the $nav-highlight-main specified color, then goes back to the $subnav-background-color.
This is a Kingston Dev instance using UI16. This is the code from my custom theme I created in the Themes:
/* Banner */
$navpage-header-bg: #ffffff
$navpage-header-color: #333333
$navpage-header-divider-color: #d4d4d4
$navpage-header-button-color: #555555
$navpage-button-color: #555555
$navpage-button-color-hover: #d91e2a
/* Nav */
$search-text-color: #555555
$navpage-nav-border: #555555
$nav-highlight-main: #d91e2a
$subnav-background-color: #ffffff
$navpage-nav-bg: #eeeeee
$navpage-nav-bg-sub: #eeeeee
$navpage-nav-color-sub: #555555
$navpage-nav-mod-text-hover: #ffffff
$nav-hr-color: #ffffff
/* Navigator tabs */
$nav-highlight-bar-active: #d91e2a
$nav-highlight-bar-inactive: #797777
$navpage-nav-selected-bg: #949494
$navpage-nav-selected-color: #ffffff
$navpage-nav-unselected-color: #555555
/* Other */
$connect-latest-message: #777777
$nav-timeago-header-color: #d91e2a
$navpage-nav-app-text: #555555
$navpage-nav-app-text-hover: #ffffff !important /* No idea what this does */
