14
Views
8
Comments
Solved
Wizard Item in Traditional Web Application
Application Type
Traditional Web

I am using Wizard items in my traditional web app as shown below (I am not using the Wizard widget I am just using wizard Items widget) and I want to change the colour of the wizard item for previous step but I am not able to change it..

I want to change this colour to different one.. 


I tried using the below css but it did not work out. 

.wizard-wrapper-item.past .wizard-item-icon {    background-color: #00000;    border-color: var(--color-primary);    color: var(--color-neutral-0); }


How to change the colour if only wizard item is used??

Solution

Hi Padmanjali,

put this:

.wizard-item.active .wizard-item-icon {

  background-color: var(--color-neutral-0);    border-color: #357276;   color: #32c3ca;

}

in the HomeScreen CSS. 

hope this help.

Thanks

Rank: #5796

Hi Samiksha,

Thank you for your response.


But this css is changing the border of current active step but I want to change the colour of filled circle for the completed step.


thanks and regards

Padmanjali ch


.wizard-item.past .wizard-item-icon {

   background-color: #6ce9f3;  border-color: #18de16;  color: #ffffff;

}

**Note: paste this css in HomeScreen css.

Rank: #5796

Hi samiksha,


Thank you for your immediate response. My problem is solved after using the recent css that you have shared.

Thanks and Regards

Padmanjali ch

Hi Padmanjali,

Your CSS looks fine, it should work, but it depend where did you put it.

Its very likely that its being overridden by the OutSystems Theme. Check here priority and order of the CSS.

Best Regards,

Cláudio

Rank: #5796

Hi Cláudio ;

I found out that I have used ".wizard-wrapper-item.past" instead of ".wizard-item.past"


Thanks and Regards

Padmanjali

Ye, It looked fine at the first look but after I seeing the response from Samiksha I saw the difference.

Regards,

Cláudio