1LD Tutorials & Blogs


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.

#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.

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.

RapidWeaver Stack Tutorials

RapidWeaver Theme Tutorials

RapidWeaver Project Documentation

Tutorials and documentation for all 1LD Project files can be found at the link below.

See Documentation

Get the power of a framework, for the price of a theme, in the convenience of a prebuilt RapidWeaver project file


Scroll Shift Stack

Scroll Shift Screenshot

Scroll Shift is the ultimate tool for adding seamless scroll-based animations to your web design projects. Create captivating and engaging websites by effortlessly animating elements as the user scrolls through the page. This tool can bring your designs to life with smooth transitions, eye-catching movements, and precise timing.

Create captivating visuals by linking multiple elements together to form a stacked layer effect. These elements can separate and come together to form a unified element, adding depth and dimension to your designs. The possibilities are endless as you craft intricate animations that leave a lasting impression.

Drive attention to essential content by implementing animations that trigger only when the user scrolls past a specific section. By strategically timing the animations, you can ensure that users take notice of crucial information and engage with your content effectively.

Check it out!

Latest News


Join our newsletter to get notified of new releases, updates, and discounts.


Popular Links

Free Stacks & Themes
See Order History
Product Tutorials

© 2011 One Little Designer, 1 Little Designer (1LD)

RapidWeaver is a trademark of Realmac Software