How can I change the color in Theme Cosmos User Portal

User Experience
, ,
1

Hello,

I am trying to find where I can change the color in Theme Cosmos User Portal, marked as below. Can anyone please tell me how?

Cosmos Color.png
Cosmos Color.png855×489 26.3 KB

Cosmos Color Expanded.png
Cosmos Color Expanded.png1919×271 18.9 KB

Regards,

2

Hi @CloeW938: Can you please check by overriding “case-header” css class in your application specific css file. You need to add the new css file in the additional style sheets in skin rule.

Thanks.

3

@CloeW938

Go to Skin rule - Included styles - Add a new CSS file with a proper name ex -PegaStyleOverrides

In it override the Pega OTB class of case header as :

.case-header{

background-color: #c7d1db (your color code)

}

Log-off and login, should work.

4

@DineshP7654

Thanks, this approach worked. We used to be able to customize the background color from portal header in pyEndUser skin rule without using css (How to change background colour in portal header | Support Center), but seems like this approach is not applicable to Theme Cosmos. pyEndUser is not even referenced in Theme Cosmos any more. As per your suggestion, I added a custom css file and included your snippet as below. Thank you!

  1. From my application level Skin rule, add style sheet in included styles tab as below. The name is arbitrary.

Skin.png
Skin.png1289×827 45.7 KB

  1. Include below snippet.
.case-header{ background-color: green }

css.png
css.png1256×327 22.6 KB

  1. Here is the results.

Portal Header customization.png
Portal Header customization.png897×623 33.6 KB

Regards,

5

@CloeW938 Awesome that’s for theme-cosmos. You will be able to do it back like earlier without writing code, while you use the latest - Constellation framework, under themes and settings.

6

@Dinesh Panda

Really! That’s good to know. Thank you very much for the additional information!

Regards,