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

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

  1. Right click in row you wish to delete, and select 'Row/Delete Row'.
  2. 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.