Customization Terminology

General Controls

• Theme – controls theme style (6 options)
• Tab Count – Total amount of tabs displayed
• Tab Font Size – Size of font inside of tabs
• Content Font Size – size of font inside content sections below tabs
• Border radius – controls the rounded effect on corners (not supported in older versions of internet explorer
• Container Width – Percentage width of cleanTabs inside its containing element
• Minimum Width – Smallest width size that cleanTabs will allow
• Animation On – If turned off Animation Speed control is removed
• Animation Speed – Normal, Fast and Slow options

Color Controls

• Border Transparency – Turn on to remove borders
• Tab Transparency – Turn on to remove border colors
• Content Transparency – Turn on to remove content/description section colors
• Inherit Text Styling – Turn on to remove text color controls
• Inherit Link Styling – Turn on to remove link color controls
• Main Background – Background color of the active tab & content section
• Main Border – Color of border for everything except inactive tabs
• Active Tab Text – Color of the active tab’s text
• A Tab (Hover) – Color of the active tab’s text when mouse hovers over it
• Inactive Tab Text – Color of text in tabs that are not selected
• I Text Hover – Color of the text in non-selected tabs when the mouse hovers over
• Inactive Bg – Background color of non-selected tabs
• I Bg Hover – Background color of non-selected tabs when the mouse hovers over
• Inactive Border – Color of the border for non-selected tabs
• I Border Hover – Color of inactive tab border when hovered over
• Content Color – Color of all text in the content sections below the tabs
• Content Links – Color of all links inside content sections
• C Links Hover – Color of all links inside content sections when the mouse hovers over them

Advanced Controls

• Collapsible – Turn on to allow tabs to be completely collapsed
• 1st Active Tab – The tab that you wish to be open when the window loads (default = “1”)
• Tabs 50% – At what pixel width the tabs will increase to 50% width (default = “768” which is iPad Portrait and smaller)
• Tabs 100% – At what pixel width the tabs will increase to 100% width (default = “480” which is iPhone Landscape and smaller)
• Control Tab Width – Turn on to ‘Control Tab Width’ (next option)
• Tab Width Size – Control width of tabs (default is in pixels, but supports other formats such as %, em, ex).

Changing position of Tabs

cleanTabs positions Tabs to the left by default and there is currently no support for justification (width auto / percentage widths) or right alignment. You can adjust there positions though by pushing the first tab over – the other tabs will adjust accordingly. To do so use the following code in your Page Info > Header > CSS section.

1
2
3

#tab-container ul.etabs li.tab {
     margin-left: 20px;
}

You can, of course, adjust the 20px to any value that achieves the visual layout you are looking for.

Transparent Background for Theme 1

The 2.3.0 Update provides a downloadable snippet file, though you can alternatively add the code manually.

1
2

ul.etabs li.tab {background: transparent !important;}
.panel-container {background: transparent !important;}

Line 1 controls transparency to the tabs and line 2 controls transparency to the content area contained below the tabs (should you want to turn one off/on and not both).

Adding & Removing Tabs

After creating a cleanTabs section simply select (left click) the section and in the customization section on the right-hand side drag the slider called “Tab Count” left or right. By default cleanTabs is set to 4 tabs, though it can be reduced to 1 tab or increased all the way up to 12 tabs (version 2.3.0 allows for up to 20 tabs).

Adding Images to Tabs

You can manually drag images into the tab sections or you can use a web font, such as Font Awesome, which is demonstrated on the preview page (top left green tab preview).

For a complete tutorial on adding Font Awesome to your page.