UPDATED on July 25, 2018
Summary: Tab snippets provide an easy way to add pre-styled areas of tabbed content to your page, without having to write html code from scratch. Once placed on a page, the tab layout becomes part of the page's code, and can be modified as needed.
Examples of Tab Layouts
- Dates and deadlines for academic years on International Programs/Current Students/Dates & Deadlines page
Accessing Tab Layout Snippets
- Login to OU Campus and check out page
- Click green edit button to enter editable region
- click 'Show Gadgets' icon at top right of page
- Click 'Snippets' dropdown to display available snippets. Sort by 'all', or by 'Table Transforms'.
- Select desired Tab snippet ( Tabs Horizontal, or Tabs Vertical). Scroll down this page for descriptin of each type.
Inserting Tab Layout Snippets
- In edit mode, place your cursor on your page where you want to insert a tab layout
- Click 'show Gadgets' icon at top right of page
- Click 'Snippets' dropdown to display available snippets. Sort by 'all', or by 'Table Transforms'.
- Select desired Tab snippet ( Tabs Horizontal, or Tabs Vertical). Scroll down this page for descriptin of each type.
- Dialog box showing layout for selected tab snippet will appear. Click 'Insert'.
- Tab layout will be placed on your page.
- Replace placeholder content with your own content.
- Save and submit for publish.
How to Modify Existing Tab Layouts
As part of routine website maintenance you will need to add or delete tab rows.
Add Row
- Right click in row you wish to add, and select 'Row/Insert Row Before', or Row/Insert Row After'
- Selected row will be added.
Delete Row
- Right click in row you wish to delete, and select 'Row/Delete Row'.
- Selected row will be deleted.
Examples of Unmodified Tab Layouts
Tabs Horizontal
This tab layout places 3 initial tabs across your page. More may be added, as needed.
Tabs Vertical
This tab layout places 3 initial tabs down your page. More may be added, as needed.