Change the colors and fonts of the ESC portal

[Soeren]

Hey,

I need to configure the looks of the Employee Service Center and have some trouble with this task.

I'm trying to use the Branding Editor, but not all changes made there are taking effect.

These settings are working properly:
Navbar background
Navbar divider
Navbar link color
Navbar link hover
Panel background
Primary
Text color
Text muted

But these are not (if i change the color to e.g. purple and reload the page nothing changes, a cache reset doesn't make a difference):
Page background
Button default background
Success 
Info
Warning
Danger
Text success
Link color

At least I can change the "Page background" color somehow if I change $background-secondary in the EC Theme.

Can someone explain where I can find out where I can change the other options and also where I can change the used font?

My Google research was not very successfull^^'

[Community Alums]

Hi @Soeren ,

This doc covers all the requirements you have :

https://docs.servicenow.com/bundle/sandiego-servicenow-platform/page/build/service-portal/concept/c_...

The font color there is usually defined based on the portal configuration (Service Portal >  Service Portal Configuration > Branding Editor > select the correct portal). 

Be sure you are in the correct application scope for the selected portal or the changes you enter will not save.

If that does not work, the color could be in several different places.  Your actual portal page may have some overriding CSS in the page specific CSS field,  the "Theme" that is on the portal record, the Widget instance or CSS includes could also be overriding it.  Start with the branding editor first though.

Mark my answer correct & Helpful, if Applicable.

Thanks,

Sandeep

[Soeren]

Thanks for the quick reply 🙂

Ok so in general it's kind of try and error to find out which setting is made in the Branding Editor and which in another file? (except if you already have the experience?)

What I did on the Employee Center Branding (within the Employee Center Core application) is e.g. this: 

But it looks like this:

[Community Alums]

Check the hex codes again for the colors.

[Community Alums · Accepted solution]

The branding editor is in bad need of an update to support Employee Center/Pro.   Some of the options in the Branding Editor GUI work, most don't because Employee Center doesn't use them.  For example to change the background of your EC portal...that style property isn't in the branding editor.

I found you will have to edit the Theme associated w/ the Employee Center portal (EC Theme).   If you look at the out of box EC portal and go look at the Theme associated with it you'll see all the new stuff.  Most of the CSS document is commented out so don't freak out b/c it's so long.