Style Tabs

If you are using the WS Form framework you can use classes to style tabs.

Demos

Regular

Steps

Tab Wrapper Class: wsf-steps

Steps + Checkmarks

Tab Wrapper Classes: wsf-steps wsf-steps-checks

Steps + Checkmarks + Green

Tab 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
Tab 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 Tab Wrapper Class
wsf-steps-success Change steps to green color Tab 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:

  1. Click the settings icon at the top of the layout editor.
  2. Click the ‘Styling’ tab at the top of the sidebar.WS Form PRO - Style Tabs - Form Settings - Styling Tab
  3. Enter the class(es) into the ‘Tab Wrapper’ and/or ‘Form Wrapper’ class settings according to the table above.WS Form PRO - Style Tabs - Form Settings - Tabs Wrapper Class Setting
  4. Click ‘Save & Close’