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’