Home‎ > ‎

Training Path

In this section we proposed a list of topics which is progressively arranged by complexity of the settings of the module in order to get you familiar to Tabs Pro 2.0. 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 2.0 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 and How to customize the Tabs page from Layout section.

Working with icons and images

Tabs Pro integrates with Font Awesome but also let's 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 2.0 the documentation for the Image headers is not developed yet due to migration delays in the new build.
On How to section from this documentation, there are some tips which will help you to add your own icon to the portal. 

Theming the Boostrap template

With the release of Tabs Pro 2.0, 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.

Theming the jQuery UI template

On our 2.0 Tabs Pro version, we still support jQuery UI library as a legacy - if you want to use this option you can find more details on the Layout and Templates page and some tips regarding the styling of themes on the How to page.

Displaying multiple modules inside 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.) and 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 - How to set up the Tabs and the Accordion Layout page and for more customization options, we also recommend the Tabs Layout page.

Tabs Persistence

We implemented the persistence options with the purpose of not loosing the current tab when the page is refreshed or for cases 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 2.0 integrations

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

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 from the documentation.

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. 

Tabs Pro Video Tutorials