Training Path

In this section we proposed a list of topics which is progressively arranged by the complexity of the module`s settings in order to get you familiar with Tabs Pro. We also have a short clip with a nice presentation of the module, which will help you get a picture about what is and does Tabs Pro - click here to see the video.

You can begin by understanding what Tabs Pro is and why we recommend it for you by visiting the Home page from the documentation and if and when you decide Tabs Pro is your choice, please visit the Getting Started - Download and Install page in order to get help on the installation process.

Managing Tabs

To learn how to create new tabs, delete and order them, please check the Getting Started section of the documentation - to be more specific, see How to set up the Tabs here and How to customize the Tabs page from Layout section here.

Working with icons and images

Tabs Pro integrates with Font Awesome but also lets you manually create and upload on the portal your own icon/image - if you want to see how you can do it, please go to Add Icon to Tabs section from this documentation. We feel the need to apologize in advance for the fact that on Tabs Pro the documentation for the Image headers is not developed yet due to migration delays in the new build.

On How to page from this documentation, there are some tips which will help you add your own icon to the portal.

Theming the Bootstrap template

With the release of Tabs Pro, we’ve completely rewritten the module to be based on Bootstrap 3 instead of jQuery UI - to see what is Bootstrap and how it looks on a final front-end product, please check the Layout page. If you want to customize Bootstrap, we have some tips for you on How to page and on Templates page.

Displaying multiple modules inside the same tab

If you want to display multiple modules inside the same tab, firstly you have to add on the page you want to work the modules you want (there are lots of options like HTML module, Action Grid, Action Form etc.). Don’t forget to add Tabs Pro as well. Then, while you’re in edit mode, you have to go to the admin interface by clicking on Manage Tabs option displayed on the right side of Tabs Pro module and create a new tab by clicking on “New Tab” button and you’ll see all the previously added modules on the page displayed as options - here we recommend to use the “Display in accordion” option if you want to optimize the space.

For more info on this, please visit the Getting Started page - How to set up the Tabs and the Accordion Layout page and for more customization options, we also recommend the Layout page.

Tabs Persistence

We implemented the persistence options with the purpose of not losing the current tab when the page is refreshed or when you navigate on another site. On Tab Persistence page you’ll find the explanations for each Persistence option.

Settings available for Admin users only

As admin you have the Advanced Settings list which should be handled carefully because the existing options can very easily break Tabs Pro - to see more details on these options, please visit the Advanced Settings page from this documentation and for some additional info to understand the Admin users “powers” vs non-admin users, you can check the Admin View page.

Tab Pro integrations

We’ve done the integration testing with several modules, but Tabs Pro integrates with any DNN module - for more info, please visit Integration page.

Localization

Tabs Pro supports the localization for tab titles and also for back-end with a default fallback language for situations in which a localization is not found - more on this on Multi Language Support page.

Tabs Pro Responsive

More info on the mobile user experience can be found on Responsiveness page. Last but not least, we’ve prepared a Tabs Pro playlist where we’ve managed to add several clips which, we hope, they’ll help you - click here to check it.