How to customize/change colors of a Two-Step Order Form.

Customizing a Two-Step Order Form is a great way to design your page. The page editor itself does not offer full custom settings for a Two-Step Order Form when it comes to color changes, however, with a simple snippet of code, you can fully customize your Two-Step Order Form with the colors of your choice. 



Watch Video: 
https://www.loom.com/share/f25c3b5d6dca4c9c80c9330e96da9015

Video Recap: 
As shown in the video, once you have added the custom code to the CSS Code area in the page editor, you will have full control of the colors for each part of it.  

CSS Code:

.order2Step-step.order2StepActive {
    padding: 8px 15px;
    background-color: #5686CC;
  padding-bottom: 22px;
}

.order2Step-step {
    background-color: #f5248a;
    color: white;
    opacity: 1;
    border-radius: 5px 5px 0 0;
}

.order2StepNumber {
    background-color: #3f6cae;
    width: 40px;
    height: 40px;
    text-align: center;
    border-radius: 40px;
    margin-top: 8px;
}

.order2StepProgress {
    background-color: #2F5A99;
    height: 10px;
}

.o2step_wrapper {
    background-color: #4572B6;
    border-radius: 0 0 5px 5px;
    color: white;
}

.elS1Shipping {
    background-color: #4571b6;
    color: white;
}

.order2Step-step.order2StepActive .order2StepTitle {
    color: white;
}

.order2Step25:before, .order2Step75:before {
  display: none !important;
}

.order2StepHeader {
border-bottom: none;
  background-image: none;
background-color: #2f5999;
  border-radius: 5px;
}

.elOrder2Step {
    background-color: none !important;
    border: none !important;
    border-radius: 5px;
}

.order2ButtonSubText, .order2ButtonSubText2 {
    color: white;
}

Note: If you copy the above code and it appears to not function after adding it to the page, please click HERE and copy it from the document and use it instead. 

Adding the code in the page editor:
To add the code to your page, simply click on Settings>Custom CSS and paste it there as shown here: https://d.pr/2NAIt8. Be sure to click Save when done.


Changing colors: 
The color codes for each part of the CSS code will be in orange. An easy way to obtain different color codes/IDs is to click on an element of the page as if you were going to change its color, and copy the color code from there as shown here: https://d.pr/acuSHL 

Important Note: Due to the custom and varying nature of CSS code, our support team is unable to provide assistance with any custom code added to your page. If you experience troubles while setting up your custom CSS, please consult a qualified developer to assist you.