The CreatorCon Call for Content is officially open! Get started here.

Trying to find where to change the colors for the banner text and application manager

GEM1
Tera Expert

For this instance it is using the Cobalt theme.  They want the white/grey text to be dark blue and the banner text blue.  This is my first time doing this and I thought I could see this in CSS settings, tried it and nothing changed.  Tried changing it within the Cobalt CSS, nothing.  Was hoping someone can walk me through this.

GennaMcConnel1_0-1670884006132.png

 

GennaMcConnel1_0-1670883967460.png

 

 

 

 

1 ACCEPTED SOLUTION

Could you please use the below css and try. I've marked the color details in plain text instead of hex color format.

Also please refer to the docs link that will help you understand more on customizing the themes

https://docs.servicenow.com/en-US/bundle/tokyo-platform-user-interface/page/administer/navigation-an...

 

/* Header Colors  */
/* Search text color */
$search-text-color: #ffffff
/* Topbar background color*/
$navpage-header-bg: #303a46
/* Topbar text color #002d72 */
$navpage-header-color: orange
/* Bottom border color on topbar */
$navpage-header-divider-color: #455464


/* Left nav and navigation toolbar background color */
/* Navigator hover color */
$nav-highlight-main: #3d4853
/* Background for expanded navigation items  #303a46*/
$subnav-background-color: white
$nav-background-color: pink
/* Backgorund for navigator (left side only).  */
$navpage-nav-bg: #303a46
/* Background for Favorites list, history list, and Connect list background. */
$navpage-nav-bg-sub: #455464

/* Text color when hovering over items in main nav */
$navpage-nav-mod-text-hover: #ffffff
/* Divider color in Navigator */
$nav-hr-color: #303a46

/* Navigator tabs */
/* Active nav item underneath search */
$nav-highlight-bar-active: #278efc
/* Inactive nav items underneath search */
$nav-highlight-bar-inactive: #81878e
/* Background for currently selected navigation item underneath search */
$navpage-nav-selected-bg: #4b545f
/* Color of icon for currently active nav item. */
$navpage-nav-selected-color: #ffffff
/* Color of icons for non inactive nav items.*/
$navpage-nav-unselected-color: #bec1c6

/* Navigator Application text */
/* Color for latest connect messages in right bar. */
$connect-latest-message: #e6e8ea
/* Timestamp header backgrounds in History tab*/
$nav-timeago-header-color: #303a46
/* Core content text color #002d72 */
$navpage-nav-app-text: yellow
/* Core content text color hover*/
$navpage-nav-app-text-hover: #ffffff


/* Text color in main navigation */
$navpage-nav-color-sub: blue 

/* color of the text, and icons/buttons in the banner frame */
$navpage-header-button-color : red

/* Color of outline for search */
$navpage-nav-border: #dddddd
/* Default button/icon colors */
$navpage-button-color: #ffffff
/* Hover color for ^^^ */
$navpage-button-color-hover: #278efc

 


Thanks & Regards,
Vasanth

View solution in original post

5 REPLIES 5

Could you please use the below css and try. I've marked the color details in plain text instead of hex color format.

Also please refer to the docs link that will help you understand more on customizing the themes

https://docs.servicenow.com/en-US/bundle/tokyo-platform-user-interface/page/administer/navigation-an...

 

/* Header Colors  */
/* Search text color */
$search-text-color: #ffffff
/* Topbar background color*/
$navpage-header-bg: #303a46
/* Topbar text color #002d72 */
$navpage-header-color: orange
/* Bottom border color on topbar */
$navpage-header-divider-color: #455464


/* Left nav and navigation toolbar background color */
/* Navigator hover color */
$nav-highlight-main: #3d4853
/* Background for expanded navigation items  #303a46*/
$subnav-background-color: white
$nav-background-color: pink
/* Backgorund for navigator (left side only).  */
$navpage-nav-bg: #303a46
/* Background for Favorites list, history list, and Connect list background. */
$navpage-nav-bg-sub: #455464

/* Text color when hovering over items in main nav */
$navpage-nav-mod-text-hover: #ffffff
/* Divider color in Navigator */
$nav-hr-color: #303a46

/* Navigator tabs */
/* Active nav item underneath search */
$nav-highlight-bar-active: #278efc
/* Inactive nav items underneath search */
$nav-highlight-bar-inactive: #81878e
/* Background for currently selected navigation item underneath search */
$navpage-nav-selected-bg: #4b545f
/* Color of icon for currently active nav item. */
$navpage-nav-selected-color: #ffffff
/* Color of icons for non inactive nav items.*/
$navpage-nav-unselected-color: #bec1c6

/* Navigator Application text */
/* Color for latest connect messages in right bar. */
$connect-latest-message: #e6e8ea
/* Timestamp header backgrounds in History tab*/
$nav-timeago-header-color: #303a46
/* Core content text color #002d72 */
$navpage-nav-app-text: yellow
/* Core content text color hover*/
$navpage-nav-app-text-hover: #ffffff


/* Text color in main navigation */
$navpage-nav-color-sub: blue 

/* color of the text, and icons/buttons in the banner frame */
$navpage-header-button-color : red

/* Color of outline for search */
$navpage-nav-border: #dddddd
/* Default button/icon colors */
$navpage-button-color: #ffffff
/* Hover color for ^^^ */
$navpage-button-color-hover: #278efc

 


Thanks & Regards,
Vasanth