How can we change the colour of privious step in progress wizard when we move from one step to another step.

0
i have attatched 2 images , in 1st image i am in step 1 and when we move in 2nd step then i want that step 1 colour should be changed  like another colour.
asked
1 answers
0

You should place ‘wizard-step wizard-step-visited’ in the Properties > Class of the container with the first step on your second page.

You also might want to check out the Wizard building blocks in Atlas UI module for some examples and easy setups for your pages.

This is default Atlas UI styling in _wizard.scss in your theme foler.

    // States
.wizard {
    .wizard-step-active {
        .wizard-step-number {
            color: #FFFFFF;
            border-color: $brand-primary;
            background-color: $brand-primary;
        }
        .wizard-step-text {
            color: $brand-primary;
        }
    }
    .wizard-step-visited {
        .wizard-step-number {
            color: #FFFFFF;
            border-color: $brand-success;
            background-color: $brand-success;
        }
        .wizard-step-text {
        }
    }
 }
}

It makes use of variables. So check your $brand-success color in _custom-variables.scss. Make sure to set up the page elements and variables correctly. When changing anything in your scss files make sure to compile with Koala or Calypso to see the changes in the front-end.

answered