Search Our Knowledgebase

  • Joomla
  • Video
  • WordPress
Or ask a question in our official product support forum boards

S5 Tab Show

This tutorial will explain how to install and configure the S5 Tab Show widget.


The S5 Tab Show will display up to 20 widgets in various styles within sliding tabs, and is compatible with responsive sites. Simply publish the S5 Tab Show widget to your desired widget position and pages. Then start publishing widgets to the positions in the Tab Show (s5_tab1, s5_tab2, etc); these widgets will become the slides. This is a great way to organize and showcase your site's content or images.

Note - Many of our club products contain specific styling for our plugins. These styles cannot be transferred from one product to another; they are integrated into the design. The same plugin is used on all installations, the themes themselves contain the styling overrides. If a particular theme does not include unique styling for a particular plugin, then the default style is used.

Be sure to read the tooltips and other descriptions in the backend of this plugin. There are a lot of tips and further information found in these areas.

1. Installation

The first thing you'll need to do is install the widget. Once you have it downloaded it just follow the below tutorial if you need help installing the widget into WordPress. Refer to your theme's widget layout to determine the best position to publish this widget to, some widgets are designed for specific locations.

http://www.shape5.com/documentation/WordPress/Getting-Started/How-To-Install-A-Widget-Into-WordPress

2. Next you will need to setup the options in the admin

First off you will need to navigate to the Tab Show widget. From here you can setup the widget by clicking the buttons:



Below is a complete list of all the settings on the "Basic Options" button. Typically the deafult settings here work well, the most common settings to change are: Transition Effect and Duration.

  1. Widget Class Suffix - If your theme has any compatible widget classes you can supply that here.
  2. Custom Class - Sometimes it's necessary to stylize a particular tab show different than others. With this function you can wrap the tab show in a custom class for your own unique css.
  3. Activation Method - Tab Buttons - Select either onclick or onmouseover for each slide to enter.
  4. Activation Method - Arrows - If you have the side arrows enabled select either onclick or onmouseover for each slide to enter.
  5. Location - Tab Buttons - Select the location of the tab buttons.
  6. Location - Arrows - Select the location of the side arrows if they are enabled.
  7. Center - Tab Buttons - Would you like the tab buttons to be centered?
  8. Center - Arrows - Would you like the side arrows to be centered if they are enabled?
  9. Hide Until Mouse Over - Tab Buttons - This option will keep the tab buttons hidden until you mouse over them.
  10. Hide Until Mouse Over - Arrows - This option will keep the side arrows hidden until you mouse over them if they are enabled.
  11. Show For Small Devices - Tab Buttons - Here you can set the tab buttons to show or hide on smaller devices.
  12. Show For Small Devices - Arrows - Here you can set the side arrows to show or hide on smaller devices if they are enabled.
  13. Transition Effect - Select either: Fade, Snap, Slide and Fade, or Slide
  14. Duration - How long should each slide be present before it transitions to the next slide?
  15. Pause On Hover - Enabling this feature will cause the tab show to stop sliding if you are hovering over it.
  16. Extra Padding On Each Slide - This feature will add a bit of padding between each slide, rather than them being directly against each other.
  17. Show Text Only On Mouse Over - This will keep any button tab text hidden until you hover over the tab.

3. Next you will need to configure the positions for each slide, and assign tab text for each slide

Each slide in the Tab Show widget is a widget position where you publish other widgets to, ie: other widgets become the slides of the Tab Show widget. Once you have configured this widget, publish your desired widgets to the s5_tabX positions and they will become the slides of the Tab Show widget. Select the positions below that you would like to show in this copy of the widget. If you are using more than one copy of this widget on a single page be sure to select different positions for each copy of the Tab Show widget or else the widgets will appear is both copies of the widget.

Most Shape5 themes already contain the s5_tabX positions, if your theme does not have them you will need to edit the themeDetails.xml file in your tepmlate's root folder and add them.

  • "Tab X Options" buttons - This is where you enable/disable positions you would like to use as slides for this specific copy of the tab show widget. If you use another copy of the tab show widget make sure you use set that copy to use different positions. Don't enable the same tab on each tab show widget on your site. Also, make sure if you have enabled a position here, that you do in fact have a widget published to that position as well, ie: if you select s5_tab1 then a widget should be published to that position. Widgets published to these positions should be published to all pages, but they will only show on the pages that the master tab show widget is published to, because they are contained inside of it. Any widget can be published to a tab show position.
    1. Button Text - Each tab has a button text field. This is the actual text will show in the button tab.
    2. Optional Image - Here you can set an image to the background of the button tab.


Below is a screenshot of all the settings on a "Tab X Options" button. From here you can enable a tab position or disable and also set background options for the tab button. You can also set another background for the entire tab slide background:

Looking for the largest variety in template designs? Look no more. Never buy 1 theme again. Signups start at just $89 for access to all of our themes.
Send Us An Email
Please send us your questions and we will email you back as soon as we can. Product support questions should be posted in our support forums under the Help menu. Our staff will assist you from there.