CSS on Employee Center Portal

[Wesley Breshear]

Hello,

Is there a way to change the CSS (font color) in the Employee Center Banner and not change the Taxonomy Banner color at the same time?  Currently, both are being controlled by the 'Navbar Link Color' under the Branding Editor. If I darken the gray for the header text, it looks good but then looks bad in the Taxomony banner and vice versa.  Currently, looks okay in the Taxonomy banner but is too light in the Employee Center Header menu.

Example

I also tried changing the Navbar color under the Theme's CSS variables but again, it changed both banner text menus together to the same color.

Thank you,

-Wesley

[Mark Roethof · Accepted solution]

Hi there,

I've encountered this also at two customers. What I ended up doing, is creating a custom stylesheet attached to the Theme of the portal record. Amongst the CSS code:

// Main menu
.vd0009941eb103010ed7966d6475228c1 .navbar-inverse .navbar-right .navbar-nav > li > a {
  color: $brand-primary !important;
}
.vd0009941eb103010ed7966d6475228c1 .navbar-inverse .navbar-right .navbar-nav > li > a:hover {
  color: $brand-secondary !important;
}

.vd0009941eb103010ed7966d6475228c1 .navbar-inverse .navbar-nav .open .dropdown-menu > li > a {
  color: $brand-primary !important;
}
.vd0009941eb103010ed7966d6475228c1 .navbar-inverse .navbar-nav .open .dropdown-menu > li > a:hover {
  color: $brand-secondary !important;
}

I came up with this by inspecting the browser. For example:

If my answer helped you in any way, please then mark it as helpful.

Kind regards,
Mark
2020-2022 ServiceNow Community MVP
2020-2022 ServiceNow Developer MVP

---

LinkedIn
Community article, blog, video list

[Rajender1]

@Mark Roethof I have tried your code and worked only  'Tours' and  Profile, Impersonate and Logout only. Can you please suggest me where to change the font colors of My tasks, My requests and and My favorites in header with White background in esc portal?

I have attached screenshot For your reference.

[Janos1]

This is caused by changes in an updated version of the ESC. The structure of the HTML changed, therefore the above CSS by Mark doesn't apply to the now "missing"/invisible menu items. For me, I could set their color with this CSS:

.vd0009941eb103010ed7966d6475228c1 .gt-menu-item > a {
  color: $brand-primary !important;
}

[Wesley Breshear]

Excellent!  It works great.

Thank you,

-Wesley