If you are using the WS Form framework you can use classes to style tabs.
Demos
Regular
Steps
Tabs Wrapper Class: wsft-steps
Steps + Checkmarks
Tabs Wrapper Classes: wsft-steps wsft-steps-checks
Steps + Checkmarks + Green
Tabs Wrapper Classes: wsft-steps wsft-steps-checks wsft-steps-success
Vertical
Any of the tab classes can be used in conjunction with wsft-vertical. Form Wrapper Class: wsft-vertical Tabs Wrapper Class: wsft-steps
Classes
The available classes are as follows:
| Class | Description | Where To Use |
|---|---|---|
wsft-steps |
Changes tabs into numeric steps | Tabs Wrapper Class |
wsft-steps-checks |
Show checkmarks on completed steps | Tabs Wrapper Class |
wsft-steps-success |
Change steps to green color | Tabs Wrapper Class |
wsft-vertical |
Change tabs or steps to a vertical format | Form Wrapper Class |
How to Add Classes
Classes are added to the Tabs Wrapper or Form Wrapper settings in Form Settings. You can access these setting as follows:
- Click the settings icon at the top of the layout editor.
- Click the Styling tab at the top of the sidebar.
- Enter the class(es) into the Tab Wrapper and/or Form Wrapper class settings according to the table above.
- Click Save & Close