Tutorials

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.

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

Blog

Movable Windows

Move beyond the confines of static content layouts! Movable Windows allows your page visitors to effortlessly drag and reposition custom content windows anywhere in the browser viewport. Windows can be minimized to free up space and stay fixed to the browser viewport so they are always accessible.

Resize & Minimize

Windows can be resized to take up more or less space, or maximized to fill the entire screen. But that’s not all – these windows are like handy sidekicks, always ready to assist. Need quick reference? No problem! Windows can be minimized when not in use, saving precious screen space for what really matters – your page content.

Inline

Open windows stay fixed on screen so they are always accessible. Minimized windows have three modes to choose from. “Inline” keeps it in line with other content, “Fixed” is always on screen, and “Draggable” lets you move it around while minimized.

Customizable

It’s not just about functionality; it’s about style too. Customize your windows by size, position, and color. Add in text, images, forms, links – you name it! Want a little more flair? Allow window resizing, choose whether they start minimized or open, change the toggle icon, or hide the window title when minimized.

Check it out!

 

 

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

RapidWeaver is a trademark of Realmac Software