Question

3
Replies
187
Views
 Manash Pratim Chaliha (Manash_LSA)
Phalanx Consultancy Limited
Pega Lead System Architect
Phalanx Consultancy Limited
GB
Manash_LSA Member since 2008 49 posts
Phalanx Consultancy Limited
Posted: March 25, 2020
Last activity: March 27, 2020
Posted: 25 Mar 2020 9:12 EDT
Last activity: 27 Mar 2020 8:42 EDT
Closed

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***

Pega Platform 8.4 Low-Code App Development User Experience Financial Services Lead System Architect
Moderation Team has archived post, This thread is closed to future replies. Content and links will no longer be updated. If you have the same/similar Question, please write a new Question.
Posted: 1 year ago
Posted: 25 Mar 2020 10:06 EDT
Yathender Jalla (Yathender)
PEGA
UI Architect
Pegasystems Inc.
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? 
Posted: 1 year ago
Posted: 25 Mar 2020 13:04 EDT
Manash Pratim Chaliha (Manash_LSA)
Phalanx Consultancy Limited
Pega Lead System Architect
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. 
Posted: 1 year ago
Posted: 27 Mar 2020 1:43 EDT
Yathender Jalla (Yathender)
PEGA
UI Architect
Pegasystems Inc.
IN

Hi Manash

I tried applying the css which you attached 

In the UI Kit application it is uikitchevron

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

cosmoschevron

But this is purely customization and not recommended. 

Hope this helps!