Hi,

You can clone the component and change what you need.

For that, open the OutsystemsUI module (it will open a clone version), copy the widget and it's dependencies for the module that you want, and then edit it there.

Hope this can help.

Best regards,

Ricardo M Pereira

Hi,

Try the below discussion thread:
https://www.outsystems.com/forums/discussion/47586/styling-of-wizard-pattern-for-web/

Hi,

For this specific layout which you want to create using wizard you can follow below steps and you will get what you want:

1. Set IsVertival property to True.
2. Add a main container inside the wizard Content place holder
3. Add your containers in this main container. For example if you want to create 4 steps then add 4 containers and set the width of eac container to 3 columns.
4. Add your wizard steps in each of these containers.

What we are doing in above steps is using vertical layout of the wizard because it has same structure which you want (step label is at the right side of the icon/ number) and then with containers and their arrangement making it horizontal again.

Simple right?

Hi Gnana Sahithi,

You can also customize the navigation wizard widget's CSS definitions as per your requirement..

see this sample app - ProgressWizard

refer the attached .oml file

Hope this helps you!

Kind regards,

Benjith Sam

Hi Gnana, 

Sorry for the late reply.. For the mentioned use-case, you just have to define/override/customize the below mentioned wizard CSS class definition with the required property value.

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

Glad to help you :)

Kind regards,

Benjith Sam