Login



Lost Password? Create An Account
Demos

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 module.


The S5 Tab Show will display up to 20 modules in various styles within sliding tabs, and is compatible with responsive sites. Simply publish the S5 Tab Show module to your desired module position and pages. Then start publishing modules to the positions in the Tab Show (s5_tab1, s5_tab2, etc); these modules 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 extensions. These styles cannot be transferred from one product to another; they are integrated into the design. The same extension is used on all installations, the themes themselves contain the styling overrides. If a particular theme does not include unique styling for a particular extension, then the default style is used.

Be sure to read the tooltips and other descriptions in the backend of this extension. 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 module. Once you have it downloaded it just follow the below tutorial if you need help installing the module into Joomla. Refer to your template's module layout to determine the best position to publish this module to, some modules are designed for specific locations.

http://www.shape5.com/documentation/Joomla/Getting-Started/How-To-Install-An-Extension-Into-Joomla

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

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

  1. Module Class Suffix - If your template has any compatible module 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.

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

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

  1. Tab Show Positions To Be Used - These are the positions you would like to use as slides for this specific copy of the tab show module. If you use another copy of the module make sure you use set that copy to use different positions. Also, make sure if you have selected a position here, that you do in fact have a module published to that position as well, ie: if you select s5_tab1 then a module should be published to that position. Modules published to these positions should be published to all pages, but they will only show on the pages that the master tab show module is published to, because they are contained inside of it. Any module can be published to a tab show position.
  2. Show Text Only On Mouse Over - This will keep any button tab text hidden until you hover over the tab.
  3. Button Text - Each tab has a button text field. This is the actual text will show in the button tab.
  4. Optional Image - Here you can set an image to the background of the button tab.

Looking for the largest variety in template designs? Look no more. Never buy 1 theme again. Signups start at just $49 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.