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.

Changelog

v3.8.9 (March 18, 2014)

  • Adds customization option to open on Hover (opens on Click by default)

v3.8.8 (March 14, 2014)

  • Added customization option for moving the first tab left (pixels or percentages) – if done in the default theme you may want to apply the following to the Page Info > Header > CSS (adjust the pixel width to whatever you set your border radius to):
.panel-container {
	border-top-left-radius: 4px;
}

v3.8.6 (March 10, 2014)

  • Force Clearfix is now an option (very bottom) in the Advanced section. This is turned off by default as it was causing conflicts with some stacks being placed inside of cleanTabs. Turning the option on will also fix some stacks to display that were not displaying in version 3.5.7 and earlier – the option adds CSS that fixes collapsed displaying for some floated element and iFrames.

v3.8.5 (February 26, 2014)

  • Added customization option “Start Collapsed” when the “Collapsible” option is selected (off by default)
  • Cleaned up other coding

v3.8.3 (February 21, 2014)

  • Static height now only effects inside text section & vertical scrolling is forced when text section exceeds container height
  • Opacity on links set to 1

v3.8.0 (February 12, 2014)

  • New theme “Dots” displays either dots or arrows below links for a new cool minimal look (control over size, distance, colors)
  • Added Static Height option (off by default) – set to the largest open section and cleanTabs will not push content down
  • Responsiveness can be turned on/off (advanced section)
  • Fixed Minimalist Folder Theme border radius issue
  • Minimalist Underline & Border removed border line at half screensize or smaller (768px by default)
  • Setting Collapsible to true loads cleanTabs collapsed for space saving
  • Added animation effects “Slide Up” and “Slide Down” as options (Fade In & Fade out by default)
  • Minimum width fix
  • Display fix for some stacks placed inside the content section
  • More padding control (horizontal, top & bottom)

v3.5.7 (January 13, 2014)

  • Removed JS causing IE8 Conflict

v3.5.6 (November 19, 2013)

  • Tabs 50% & 100% Advanced Customization options fixed

v3.5.4 (November 12, 2013)

  • Bottom tabs now available for 4 themes (excludes the 2 folder themes)
  • Minimal Border control – pixel size of border for Minimal Rectangle & Underline themes
  • Customization options changes – some sliders made into number dials
  • Container padding customization now available
  • CSS coding improvements for more browser support in use of the effects

v3.1.2 (November 11, 2013)

  • Minimum Width customization option fixed

v3.1.1 (October 29, 2013)

  • Group changed back to ’1LD Stacks’

v3.1.0 (September 4, 2013)

  • Collapsible Advanced Option (allows tabs to be completely collapsed)
  • Tabs tested to support Font Awesome without conflict – tutorial here

v3.0.0 (August 28, 2013)

  • New Flat Icon
  • Improved Customization Section
  • Various Input Fields Changed to Number Fields
  • Added Depth to CSS to Resolve Certain Theme Conflicts
  • Animation Option (on/off)
  • Hashtag Appearing in URL Removed
  • Background Transparency Option for Borders, Tabs, & Content (on/off)
  • Inherit Styling Option for Text & Links (on/off)
  • Border Inactive Hover Color Controls
  • Static Width Option in Advanced Settings (can set to pixel or percentage width)

v2.5.0 (July 2, 2013)

  • SPARKLE ready

v2.4.0 (May 23, 2013)

Small patch that removes a local call of jQuery version 1.7.1 with Stacks’ built-in call of the latest jQuery API (previous version of jQuery wasn’t compatible, but this is now fixed).

v2.3.0 (May 21, 2013)

  • Tab Count increased from 12 to 20
  • New Edit UI changes – tab content sections display what Tab # they are connected to
  • Theme 1 transparency snippet included (alternatively you can manually add the code)

v2.0.1 (April 1, 2013)

  • Removes font-family call – will now inherit theme font or Stacks assigned font

v2.0.0 (March 27, 2013)

  • Fully compatible back to Internet Explorer 8
  • Theme 1 compatible back to IE 7
  • Fully Responsive with controls to adjust to varying themes
  • 3 New Minimalist themes
  • Fix compatibility in some themes caused by CSS 3 backface-visible conflict
  • Improved backend interface
  • Reorganized customization options area
  • Customization option added – change the initial tab that is open
  • Width customization option default changed to 98% (fixes right-side border from cutting in some stack columns)
  • Firefox :focus outline fix (caused minor display issues)
  • Fixed issue where tab clicks would effect multiple instances of cleanTabs on a single page

v1.3.7 (January 28, 2013)

  • 1 tab option returned (previously removed, but returned on request)
  • Fixed error/conflict that occurred in some tab counts
  • De-minified some of the coding for greater ease in editing (advanced users)

v1.2.4 (January 7, 2013)

  • Minimum Width option available (fixes tab collapsing in smaller screens)
  • Tab Count & Border Radius Options altered (minimum & Maximums changed)
  • Clearfix added to content section to fix collapsing issue in smaller screens on Responsive themes