Change colour of content experience widget for banners

[Community Alums]

I am working on branding the EC Pro and would like to know how to change the Content experience widget below highlighted in red:

Thank you in advance!

[sachin_namjoshi]

You will have to create your own theme with CSS and apply this theme to ESC service portal configuration.

Regards,

Sachin

[Paul Curwen]

The Widget uses the colors defined in your theme. 

For employee center you get the OOTB Theme 'EC theme'. If you look at the OOTB EC Theme you will see on the CSS Includes there is an entry named: 'ec-theme-content-experience-widget'

If you open that up the Style Sheet for it you will see that it uses $brand-primary-darker for the back ground color and it also uses $brand-primary for the buttons etc 

So simply altering these values in your main Theme record CSS will cascade the change down to the Content Experience widget. It you do not want to use these values you could also just specify any HEX color value here, but it's better to have all color definitions in one place for ease of maintenance. 

If you change the values in your Theme record these will change your Content Experience widget colors as well:

Once changed you will see the CSS take effect:

Note best practice is to leave the OOTB Theme as is and create your own custom theme by copying the OOTB one. 

If helpful please mark and Helpful/Correct

[scottneeb]

There seems to be some sort of gradiant in the background.  I can change half of the color but it still fades into a blue color.  Does more than one setting need to be changed?

[iDNS]

The below one is that is driving the color in gradient. Changing that should change it 

$brand-primary:                         #4f52bd!default; //--now-color--primary-1