Question
Phalanx Consultancy Limited
GB
Last activity: 27 Mar 2020 8:42 EDT
Unable to change color of the Case Stages
Hi,
I am trying to change the the background color of the stages of an application built on Pega 8.4 as per branding requirement. I tried update stages element from py-portal-stage css in my own overriding CSS which i have configured in the skin rule. But the change is not getting reflected. I performed similar changes in Pega 8.3 with UI Kit and it worked. But its not working in Cosmos UI.
Can someone kindly assist?
Code snippet can be found below
|
.stages .chevron.past *, .stages .chevron.past *::before { color: white !important; } .stages .chevron.active *, .stages .chevron.active *::before { color: white !important; } .stages .chevron.future *, .stages .chevron.future *::before { color: black!important ; font-weight: bold; } .stages > .content-item .chevron.future a { opacity: 1; } |
***Edited by Moderator: Pallavi to update platform capability tags***
IQZ Systems
IN
Hi
The css you attached has classes applicable to the chevron in UI kit based applications. These classes are not used in the Cosmos based application. You need to change the css. What do you want to achieve with the above styling you mentioned?
Phalanx Consultancy Limited
GB
I want to change the default colour of the stages based on the branding requirement. Completed , Active and future stages will have different colours.
IQZ Systems
IN
Hi Manash
I tried applying the css which you attached
In the UI Kit application it is 
I tried to meet the rquirement with custom css in Cosmos application
Try replacing the css with following
.flex.content.layout-content-inline_middle.content-inline_middle.Past * {
color: white !important;
}
.flex.content.layout-content-inline_middle.content-inline_middle.Active * {
color: white !important;
}
.flex.content.layout-content-inline_middle.content-inline_middle.Future * {
color: black !important;
font-weight: bold;
}
The output would be
But this is purely customization and not recommended.
Hope this helps!