CSS Help Needed for updating Employee Center Navbar& Divider

[Brian Bouchard]

I'm trying to configure Employee Center with corporate color palette, but running into an issue when updating the navbar and navbar divider CSS in the EC Theme.

The issue is I would like a dark background for the navbar and a light color for the dividier, but the color of links in both are controlled by the $navbar-inverse-link-color & $navbar-inverse-link-hover-color variables, I have not been able to find a suitable color for the links that will work with both the dark and light background colors in use.

How can I configure the navbar and navbar divider, so they use different color text for the links,  allowing me to use a light text against the dark background and a darker text against the light background?

See attached image for example of the issue.

[Harish KM]

Hi Brian,

I think i got your issue. The reason you not able to find widget page css is the employee center navigation widget is getting called by widget Employee Center Header in server script  line 63 below

data.escNavigation = $sp.getWidget("employee-center-navigation"); // this is where widget is called

so you can clone employee-center-navigation widget and adjust the CSS property in this widget CSS. once done replace this custom widget to Employee center widget that should help you get your CSS changes 

data.escNavigation = $sp.getWidget("customwidgetID"); 

[gayatri13]

Hi Harish after making changes to navigation page how can we link it to our portal to check updates?

[Mohith Devatte]

Hello @Brian Bouchard ,

Hope you are doing good.

Please follow below steps to do it in east way 

1) Navigate to service portal configuration

2) Once clicking on the above highlighted module click on branding editor

3) After clicking on branding editor please select employee center in the drop down like below and go to theme colors and there you can find first two attributes Navbar background and Navbar divider. Use this to change color codes (dark and light) which will be applied to your portal directly

Please mark my answer correct if it helps you

[Brian Bouchard]

Hi Mohith - Unfortunately, this does not address my question. I believe @Harish KM has me on the right path, but I can't seem to get to the screen mentioned in their post.

[Mohith Devatte]

I think then @Harish KM mentioned is perfect solution! 

You have admin access in your instance ? if yes then you should be able to do it