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??
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
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
Please share your oml to me
.wizard-item.past .wizard-item-icon {
background-color: #6ce9f3; border-color: #18de16; color: #ffffff;
**Note: paste this css in HomeScreen css.
Hi samiksha,
Thank you for your immediate response. My problem is solved after using the recent css that you have shared.
Thanks and Regards
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
Hi Cláudio ;
I found out that I have used ".wizard-wrapper-item.past" instead of ".wizard-item.past"
Padmanjali
Ye, It looked fine at the first look but after I seeing the response from Samiksha I saw the difference.
Regards,
