“TurboTabs” Documentation by “Aleksej Vukomanovic” v1.0

“TurboTabs” Help - Options

Thank you for purchasing my plugin. If you have any questions that are beyond the scope of this help file, visit my support forum. Thanks so much!

B) Options

options

There are four groups of options:

Basic group consists of some basic styling options that focus more on its primary functions than on design itself. Here you can change how tab is displayed, it's animation, interaction, etc. More about each option in detail is available in the options panel itself. To acquire more information just hover with your mouse over the red question mark next to the selected option.

Colors group, as it's name says, is focused on the tab design, it's appearance. You can change almost any aspect of it - you can put your imagination to play.

Hover colors group consists of option designed to take effect when mouse hover action is applied. In this group tere is also an option for active state - this applies to the selected tab(mostly navigation tab and its title, subtitle and icon). Don't get it confused with :active state if you are familiar with CSS. I used term active to describe the state of the currently opened tab. Other details are also present via in-content help as all other groups.

Dimensons group covers primarly Width of the tab, along with it's Padding that should be calculated in final Width. Both can be selected in pixels (px) or percents (%). entered Padding value is calculated per side. Which means if you enter 20% to be the value for the padding it will be calculated as 20% for the left side and as equal (20%) for the right side - which means that 40% of the screen is taken and your tab width have to be 60%. This way you use 100% of the screen and your tab is centered. So for full screen tab you would use 100% width and 0% padding. For usage in px, you need to calculate final width of your layout (if it is fixed type layout width predefined width in px's).

In this group are also included box shadow spread, or size which affects, as it's title says, the spread of the shadow that tab drops to the parent element. Beside that you can also edit border radius of the tab (curvings around the tab's corners).

NOTE: If your theme layout is set to fixed (meaning it is not responsive) tabs won't have responsive behaviour either. In order for responsivness to take effect it must detect change in width of the parent element, it's holder, which in most cases would be the body of the document. If this remains the same when the page is resized on smaller screen TurboTabs will not detect any change and will behave just as the rest of the page - as fixed. Also if you set fixed width (in pixels) for the tab it will not be responsive. For responsive design you need to set width in percents(%).