Tabs is packed with options, giving you control over how the tabs look and behave. Here is the full list of the options you can find in the Tabs system plugin settings:
Styling
Load Stylesheet | Select to load the extensions stylesheet. You can disable this if you place all your own styles in some other stylesheet, like the templates stylesheet. |
Main Class | Optionally add extra class names to the main Tabs container. |
Positioning Handles | Select the positioning (placement) of the handles. Can be overruled via the first tag with position="..." .Options: Top, Bottom, Left, Right |
Alignment Handles | Select the alignment of the handles. Option 'Auto' will align the handles left or right based on the language settings. Can be overruled via the first tag with align="..." .Options: Auto, Left, Right, Center, Justify |
Color Inactive Handles | Select to have a grey background for the non-active tab handles. Can be overruled via the first tag with color_inactive_handles="true" or color_inactive_handles="false" . |
Outline Handles | Select to have a border around the tab handles. Can be overruled via the first tag with outline_handles="true" , outline_handles="false" or nooutline="true" . |
Outline Content | Select to have a border and padding around the content. Can be overruled via the first tag with outline_content="true" , outline_content="false" or nooutline="true" . |
Behaviour PRO
Fade | Select to enable fading of the content when switching between tabs. Can be overruled with fade="..." . |
Mode | Select whether the tabs should change on mouse click or hover. Can be overruled with mode="..." .Options: Click, Hover |
Scroll to Top PRO
Scroll to Top | If selected, the window will scroll to the top of the tabs when a tab is opened. |
Scroll on Links | If selected, the window will scroll to the top of the tabs when a tab is opened via a link. |
Scroll by URL | If selected, the window will scroll to the top of the tabs when a tab is opened via the URL. You can overrule this option by adding a minus (-) to the end of the tab name in the URL. If not selected, you can overrule this and make the page scroll by adding a plus (+) to the end of the tab name in the URL. |
Scroll offset | The scroll offset in pixels. If this is set to a negative number, the browser will scroll to a point above the tab. This can be useful when your website has a floating top menu. |
Scroll offset (mobile) | The scroll offset in pixels. If this is set to a negative number, the browser will scroll to a point above the tab. This can be useful when your website has a floating top menu. |
Slideshow PRO
Slideshow Interval | The time each tab should show before going to the next tab (in milliseconds). Default: 5000 |
Stop on click | Select to make the slideshow stop when clicking on one of the tab handles. |
Editor Button Options
Button Text | This text will be shown in the Editor Button. |
Enable in frontend | If enabled, it will also be available in the frontend. |
Use Simple Button | Select to use a simple insert button, that simply inserts some example syntax into the editor. |
Maximum number of Tabs | Set the maximum number of tabs shown in the editor button popup window. Increasing this number can cause that window to take longer to load. Options: 5, 10, 20, 30 |
Use Custom Code | When Using "Simple Button": If selected, the Editor Button will insert the given custom code instead. |
Custom Code | When Using "Simple Button": Enter the code the Editor Button should insert into the content (instead of the default code). |
Tag Syntax
Opening Tag | The word used for the opening tags for tabs. By default this is 'tab'. So an opening tag looks like: {tab title="My Tab Title"} You can change the word if you are using another plugin that uses this tag syntax. |
Closing Tag | The word used for the closing tag for tabs. By default this is 'tabs'. So an closing tag looks like: {/tabs} You can change the word if you are using another plugin that uses this tag syntax. |
Tag Characters | The surrounding characters of the tag syntax. Note: If you change this, all existing tags will not work anymore. Options: {...} , [...] , {{...}} , [[...]] , [:...:] , [%...%] |
Advanced
Use alternative mobile view | Select to change the tabs to a stacked navigation list on mobile width screens. |
Output Title tag | Select to output the title tag. These tags will be hidden when the tabs are generated, but will be visible on pages where the sliders are not handled (like on browsers that do not support javascript). |
Title tag | This is the tag type used for the tab titles. These tags will be hidden when the tabs are generated, but will be visible on pages where the tabs are not handled (like on the print page or on browsers that do not support javascript). Can be overridden with the title_tag="..." attribute in the {tab} tag. |
Use Hash | If selected, the active tab can be set via the hash fragment in the URL (#my-tab-title) and will be added to the URL when a tab is activated |
Reload Iframes | Select to make the iframes reload the first time the tab it is in gets activated. Only use this when you have iframes that cause issues when loaded in closed tabs. |
Initialise Delay | Set the delay in milliseconds to initialise the Tabs script after pageload. You can use this to make Tabs initialise after other scripts that may require this to function. |
Use Cookies | If selected, the active tabs will be stored in the cookies and will remain active when page is revisited. |
Save Cookies | If selected, the active tabs will be stored in the cookies. Enable this if you want to use this information in other custom scripts. |
Disable on Components | Select in which frontend components NOT to enable the use of this extension. |
Remove in Disabled Components | If selected, the plugin syntax will get removed from the component. If not, the original plugins syntax will remain intact. |
Enable in administrator | If enabled, the plugin will also work in the administrator side of the website. Normally you will not need this. And it can cause unwanted effects, like slowing down the administrator and the plugin tags being handled in areas you don't want it. |
Place HTML comments | By default HTML comments are placed around the output of this extension. These comments can help you troubleshoot when you don't get the output you expect. If you prefer to not have these comments in your HTML output, turn this option off. |
Use Media Versioning | Select to add the extension version number to the end of media (js/css) urls, to make browsers force load the correct file. |
Load Bootstrap Framework | Disable to not initiate the Bootstrap Framework. Tabs needs the Bootstrap Framework to function. Make sure your template or other extensions load the necessary scripts to replace the required functionality. |