If you are using the WS Form framework you can use classes to style tabs.
Demos
Regular
Steps
Tabs Wrapper Class: wsf-steps
Steps + Checkmarks
Tabs Wrapper Classes: wsf-steps wsf-steps-checks
Steps + Checkmarks + Green
Tabs Wrapper Classes: wsf-steps wsf-steps-checks wsf-steps-success
Vertical
Any of the tab classes can be used in conjunction with wsf-vertical.
Form Wrapper Class: wsf-vertical
Tabs Wrapper Class: wsf-steps
Classes
The available classes are as follows:
| Class | Description | Where To Use |
|---|---|---|
wsf-steps |
Changes tabs into numeric steps | Tabs Wrapper Class |
wsf-steps-checks |
Show checkmarks on completed steps | Tabs Wrapper Class |
wsf-steps-success |
Change steps to green color | Tabs Wrapper Class |
wsf-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