cleanTips

cleanTips is a great tool for displaying small notes, information, and links next to information that a visitor might have questions about.

Basic Setup

cleanTips ToolTip Sections

cleanTips has two sections in the edit area. In this example the top is the ToolTip message that will appear when the bottom section is hovered over by the mouse arrow. Note that both sections will accept any other stacks: text, images, media, videos, and other stacks.

After you have placed content inside of both sections select a theme: currently there are two themes “Default” and “Outlined.”

Next select a direction for the ToolTip: Top, Bottom, Left, or Right.

Size of ToolTips & Padding is Important!

Important! cleanTips is intended for small amounts of data by design, though it is not limited to it. The larger the toolTip becomes the more you must adjust the container’s padding to account for it’s size. In addition, depending on the direction the ToolTip is appearing, you may need to adjust the ToolTip’s distance from the message it hovers next to.

Important! There are so many influencing factors to the exact positioning of the ToolTips that the alignment of the ToolTip shown in Edit mode will most often vary from the exact position shown in Preview mode. Fine tuning usually isn’t too hard, but will take a few often take a few tries to get perfect.

Positioning Left & Right

cleanTips position left

When positioning to the left and right the ToolTip will appear outside of the box and can even bun unable to edit at times.

cleanTips position shown in edit

For this reason I created the option to turn off the actual position so that it’s easier to edit.

cleanTips position not shown in edit fix

This makes the ToolTip much easier to edit. So why is this even an option? To help you place the ToolTip horizontally & vertically as it will more closely appear in it’s actual position when in Preview.

Sizing & Positioning

Many of the customization options are very straightforward and lack a need of explanation in most circumstances. For that reason I will be focusing more on the ones that seem the most important.

Position. This option is set to make the ToolTip centered by default, though can be adjusted (the arrow can also be adjusted in another option).

Distance. This option refers to the distance of the ToolTip from the message it appears next to. Negative amounts will distance the ToolTip away from the message where positive amounts will bring the ToolTip closer to the message.

Inherit Width. This is an option available for the Top & Bottom positions as it did not make as much sense for Left & Right. It will set the ToolTip to be the same width as the Message section that it appears next to. This can be turned off and a manual width set.

Padding Exceed Width. This option lets you decide if the padding will increase the size of the ToolTip or if it will not (then pushing the content inside rather than growing the size of the ToolTip.

Arrow On & Arrow Position. These refer to the small triangle that appears next to the ToolTip, which is On by default. You can turn it off and also position it in other areas (centered by default).

Please follow & like us :)
Follow by Email
Facebook
Twitter
INSTAGRAM
Google+
http://onelittledesigner.com/rapidweaver/topics/rapidweaver-stacks/cleansuite/">
RSS

cleanBinders

Adding Font Awesome to Individual Binder Tabs

If you prefer not to add the same Font Awesome icon to all the Binder Tabs, but prefer to assign unique icons to each individual tab then do not select “Font Awesome On” in the customization options, but rather manually install Font Awesome and insert into the Binder Tabs manually (the next 2 steps).

Step 1. Install Font Awesome as outline in this tutorial.

Step 2. For step 5 place the HTML code inside the Binder Tabs text.

Definition of Terms

General Controls

  • Theme: Folder Tabs, Detached Tabs, Contained Tabs, Minimalist Thin. Controls the general theme/look of the stack. Depending on the selected theme some options may not be available or may not have an effect.
  • Binder Tab Width: Default, Small, Large, Largest. Controls the size of the tabs in comparison to the main content area, so the large setting will create a larger tab, but respectfully a smaller content area.
  • Font Awesome On. If turned on you will activate font awesome’s use in the stack’s tabs, though Font Awesome must be installed separately. A tutorial on how to install Font Awesome can be found here.
    • Right Side. This option places the Font Awesome Icon on the right hand side instead of the default left.
    • Font Awesome: Use this field to select the Font Awesome Icon, you can ignore the ‘icon-’ part.
  • Tabs on Right Side. Turning this on will move the tabs to the right hand side instead of their default placement on the left.
  • Tab Text on Right Side. By default the text is aligned to the left, though selecting this option will have the text align to the right.
  • Tab Count: By default is 4, though can range from 1 – 20.
  • Tab Font Size. Controls the pixel size of the tab font.
  • Content Font Size. Controls the pixel size of the content font.
  • Border Radius. Controls the roundness of the corners (zero turns it off)
  • Tab Margin. Controls the spacing between the tabs.
  • Tab Line Height. Controls the size of the line height in the tabs.
  • Animate On. If this option is active you can control the next option, which is the speed of the animation. Otherwise, tab content will be displayed immediately on click with no animation.
    • Animation Speed: Normal, Slow, Fast. Basic speed options (Normal = 400 millaseconds (ms), Flow = 600ms, Fast = 200ms).
  • Static Height On. This option allows the user to control a set height for the stack. Otherwise, the height will adjust depending on the content.
    • Static Height: Sets the pixel height of the stack.

Background Color Controls

  • Tab Gradient On. Turns the gradient colors and controls on.
    • Gradient Fade Out. Controls the percentage the gradient ranges across the tab.
  • Tab Transparency. Turns the background color off for the tabs.
  • Content Transparency. Turns the background color off for the content area.
  • Main Background. Background color for the main content area and the active tab in the ‘Folder Tabs’ theme.
  • Active Tab. Not available for the ‘Folder Tabs’ theme, this sets the color of the active tab. This option has no effect when the gradient is turned on.
  • Active Tab Hover. Not available for the ‘Folder Tabs’ theme, this sets the color of the active tab when hovered over. This option has no effect when the gradient is turned on.
  • Inactive Tab. Background color for any/all inactive tabs.
  • Inactive Tab Hov. Background color when inactive tabs are hovered over.
  • Active Gradient. The gradient color for the active tab.
  • Inactive Gradient. The gradient color for the inactive tabs.
  • Active Tab Fade. The color the gradient fades into for the active tab.
  • Inactive Tab Fade. The color the gradient fades into for the inactive tabs.

Border Color Controls

  • Border Transparency. Turns the borders off.
  • Subtle Tab Embed On. Turns on the inner border that has a slight ‘embed’ appearance to it. The color option that is made available when this is turned on will not have any effect in the ‘Folder Tabs’ theme (uses background color from the content section).
  • Main Border. Sets the color for the main border of the stack.
  • Inactive. Sets the border color for inactive tabs.
  • Inactive Hover. Sets the border color for inactive tabs when hovered over.
  • Embed Color. Sets the subtle embed color for the ‘Contained’ & ‘Detatched’ Tab themes.

Text Color Controls

  • Inherit Text Styling. Turns styling for text in this stack off.
  • Inherit Link Styling. Turns styling for links in this stack off.
  • Active Tab Text. Color for the text inside the active tab
  • A Tab (Hover). Color for the text inside the active tab when hovered over.
  • Inactive Tab Text. Color for the text inside inactive tabs.
  • I Text Hover. Color for the text inside inactive tabs when hovered over.
  • Content Color. Color of text in the content section.
  • Content Links. Color of links inside the content section.
  • C Links Hover. Color of the links inside the content section when hovered over.

Advanced

  • Collapsible. If selected this makes the content section able to be completely collapsed. Otherwise, one tab must always be active.
  • 1st Active Tab. By default this is set to the first tab, though if you prefer to have a tab other than the first active when the page is loaded you can change it to any of the others.
Please follow & like us :)
Follow by Email
Facebook
Twitter
INSTAGRAM
Google+
http://onelittledesigner.com/rapidweaver/topics/rapidweaver-stacks/cleansuite/">
RSS

cleanSearch

A Brief Overview:

cleanSearch is actually two stacks that work together. The first is the search bar. It contains all of the customization options, and controls the text input field, as well as an icon, and the drop-down suggestions. The second is the content area, this is what the stack searches through to find matches with the entered text.

Getting Started:

1. Drag and drop the search bar stack and the search content stack on your page, be sure not to place the search bar inside of the content area. You can place each stack anywhere on your page, they don’t need to be next to eachother.

2. Next, place the content that you want to be searchable, inside of the content area. cleanSearch treats nested elements and stacks as one single item. So if you put Stack A inside of Stack B, it will treat Stack A as a part of Stack B. If you want Stack A and Stack B to be individual items, place them each within the content area, but not within another stack or with one inside of the other.

Here’s a visual representation:
cleanTut-01a

3. Select the search bar stack, in the customization options, go to ‘CleanSearch – Icon Styles’ and make sure that the box at the top titled ‘icon on’ is checked (it should be checked by default). Once this box is checked, you will see an area at the top of the stack in preview mode under ‘Icon:’ where it is possible to drag and drop stacks. You can either use images, text, or other stacks to display an icon next to the search bar. In the preview page for this stack, I am using a font awesome icon:
<i class=”icon-search”></i>
which looks like this –
if you want to use font awesome, your theme must support it. Azgard, the theme I used for my preview page, comes with font awesome built in. For more about font-awesome go here.

4. Now you can start customizing and designing this stack to fit the theme of your page! it’s a simple set-up, but it can accomplish some pretty incredible results.


Definition of Terms:

CleanSearch – General Controls

display text:

The text that you type in here will be displayed
inside the search bar until you start typing. If
you don’t want it to display anything, insert a
space. Rapidweaver wont let you leave the field
empty.

max-width:

The width of the search bar is set to 100%, but you can set the maximum width in pixels. So if the page scales smaller, the search bar will resize to fit, but it wont go larger than the amount you set.

height:

Sets the height of the search bar in pixels.


CleanSearch – Advanced Controls

limit characters/max characters:

Sets the total number of characters aloud to be entered into the search bar. This can be turned off by unchecking the ‘limit characters’ check box.

ignore capitals:

If checked, the search will treat upper-case, and lower-case letters the same. So ‘cLeaN SEArcH’ is the same as ‘cleanSeArCh’. However, if this is unchecked, it will pay attention to the case of each letter. So if you type ‘cleanSearch’ it will not recognize ‘CLEANsearch’ as a valid match.

center text:

this will center the text within the search bar section of this stack.

search options:

Rearrange will move the most relevant matches to the top, and the least relevant to the bottom, as you type. Hide/Show will hide all irrelevant elements, and show all matches.


CleanSearch – Auto Complete

auto-complete:

Checking this will allow you to create a list of words to suggest as the user types. The drop down list will only suggest the words/phrases that match what the user types.

suggestions:

Enter all possible words and/or phrases that you would like to suggest to users who search your page. Add these as a comma separated list. Here are some examples:

1. products, about us, blog, blog-posts, magic, pizza
2. products,about us,blog,blog-posts,magic,pizza
3. products , about us , blog , blog-posts , magic , pizza

It will automatically eliminate extra spaces next to commas, but it wont get rid of spaces in between words.


CleanSearch – Font Styles

font-size:

This will control the font within the search bar.

font-color:

This controls the color of the text that users type.

display-color:

This controls the color of the text that is displayed before the user types in the search bar.


CleanSearch – Icon Styles

icon on:

This gives you the ability to add an icon to the left or right of the search bar. You can either use an image, text, or other stacks as the icon.

icon-position:

Choose to display the icon either on the left or right side of the search bar.

icon-width:

Choose how wide you want the icon area to be. Be sure that whatever text, images, or stacks you use for the icon either fit within the icon area, or are responsive. Choosing an icon width of 50px, with an image that is 100px wide will result in the image being cut off.


CleanSearch – Search Bar Styles

background color:

Change the background color of the search bar(text input area) with Rapidweaver’s native color picker.

border color:

Change the border color of the search bar(text input area) with Rapidweaver’s native color picker.

border width:

Change the border width in pixels, or leave at 0 for no border.

rounded corners:

round the corners of the search bar in pixels, or leave at 0 for sharp 90degree corners.


CleanSearch – Auto Complete Styles

Note: If you have auto-complete turned off, these styles will not do anything.

drop down styles:

If checked, the below styles will take effect. If left unchecked, no styles will be applied to the drop down menu, and the theme’s defaults will take over.


These styles are for the auto-complete drop down menu.

background:

Change the background color of the drop down menu(containing the suggestion words/phrases) with Rapidweaver’s native color picker.

border:

Change the border color of the drop down menu(containing the suggestion words/phrases) with Rapidweaver’s native color picker.

border width:

Change the border width in pixels, or leave at 0 for no border.


These styles are for the items within the auto-complete drop down menu.

item font:

Change the font color of the drop down menu items with Rapidweaver’s native color picker.

border:

Change the border color for each of the drop down menu items with Rapidweaver’s native color picker.

border width:

Change the border width in pixels, or leave at 0 for no border.

item font-size:

Control the font-size in pixels for each of the drop down menu items.


These styles are for the active(selected) items within the auto-complete drop down menu.

active font:

Change the font color of the active(selected) drop down menu item with Rapidweaver’s native color picker.

border:

Change the border color for the active(selected) drop down menu item with Rapidweaver’s native color picker.

border width:

Change the border width in pixels for the active(selected) item, or leave at 0 for no border.

item font-size:

Control the font-size in pixels for the active(selected) drop down menu item.

Please follow & like us :)
Follow by Email
Facebook
Twitter
INSTAGRAM
Google+
http://onelittledesigner.com/rapidweaver/topics/rapidweaver-stacks/cleansuite/">
RSS

cleanAccordion

Set Up

  1. Double Click to Install both the cleanAccordionCont.stack and cleanAccordionInner.stack.
  2. Drag & Drop the cleanAccordion stack into a Stacks page.
  3. By default, there will already be one Content Panel inside cleanAccordion, give it a title in the top section.
  4. Add a description – for this you need to drag a content stack (text,html,image, etc.) into the “Drop Stacks here” section below the panel title.
  5. Select the Content Panel element for customization options – make yours look sweet!
  6. Press the blue add panel button to add more Content Panels.

Creating Links That Open Specific Panels

You have an option to create a “Link Title” per accordion. This title is what you will use when creating links that start cleanAccordion open to a specific panel. By default the “Link Title” is “article”.

article links

To create a link, first get the URL of the page cleanAccordion is placed on. In our example we will use http://onelittledesigner.com/rapidweaver-stack/cleanAccordion/ (cleanAccordion’s preview page). At then end of the link place a ? (question mark) followed by the “Link Title”(“article” for this example), an = (equals sign), and a number (representing the position of the panel you want to open).

http://onelittledesigner.com/rapidweaver-stack/cleanAccordion/?article=5

When this link is clicked on, the page will open and the cleanAccordion with the Link Title “article” will open to panel #5. Click the example link above and you will notice the middle cleanAccordion on the preview page is open to panel #5.

Setting tabs as links

Click on the individual tab that you want to edit. Switch the default Slider option to “Link On (Slider Off).” Then in the URL Option field enter the URL you wish to link to. This will eliminate the sliding effect and instead use the link you wish to send users to.

Using Icons

To use Icons you must first drag and drop the Font Awesome stack into the Stacks page.

To see the full list of icons please go the Font Awesome Website Here. Simply find the icon you wish to use and type it’s name in the field located in the customization options for the Content Panel. Previous versions required a single icon given to all accordion tabs, but with this version you can choose a different icon for each individual tab. Simple select the Content Panel and the field can be found on the right in the customization options section, which will display “icon-plus” by default.

Change Icon (+) Location & Size

Altering the location and size of the rotating icon can be done using the following jQuery code, which must be placed in RapidWeaver’s Edit Mode in the Page Info > Header > JavaScript section. This option was not built in as the option would be confusing to majority of users, though it is still very handy in certain styled websites, particularly those that use very large fonts inside the cleanAccordion.

The following code demonstrates the stack’s default settings. ‘Top’ adjusts the distance from the top, ‘left’ adjusts the distance from the left, and ‘font-size’ adjusts the font-size of the icon. You can replace these values for pixel, percentage, em, and ex values. Note that if you increase the distance from the top you must include a value, such as px.

1
2
3
4
5
6
7
$(document).ready(function() {
     $('.plusIcon').css({
          'top' : '0', 
          'left' : '12px', 
          'font-size': '200%'
     });
});

Using the Custom/Blank Theme

custom theme

Setting the Theme to “Blank / Custom” will remove all of the styling for the accordion (title as well as the panel content). This will allow you to create your own custom design by using any content stacks (text, html, images, other 3rd-party stacks, etc…) and styling them. In order to use a custom title for the panel you will need to click on the Content Panel stack and enable the “Custom Title” option, otherwise it will only allow you to use un-styled text.

custom title

I want those cool dashed lines in the demo

  • Navigate to your Page Inspector
  • Go to Header » CSS

Insert this awesome code:

1
dl.accordion {border-style: dashed;}

Video Tutorial (v1.3.8)

This tutorial is for an older version of the stack but may still prove to be useful for some.

Please follow & like us :)
Follow by Email
Facebook
Twitter
INSTAGRAM
Google+
http://onelittledesigner.com/rapidweaver/topics/rapidweaver-stacks/cleansuite/">
RSS

cleanLists

Note, this video uses cleanResponse, which has sense been replaced by Responsive Grids.

Basic Setup

cleanLists Types

cleanLists is built with 3 different types available that are common in lists and pricing tables. By default it is set to list items (headers and buttons are available commonly placed at the top or bottom of a pricing chart).

HTML Lists Tool

If ‘List Item’ is selected you can then proceed to use RapidWeaver’s built-in list item tool.

cleanLists Resources Stack

Modern Pics & Web Symbols are stored as a separate stack in cleanLists 2.0+. Simply drag and drop it to the top of the page and these fonts are made available – this is to reduce load time for cleanLists by placing only a single instance of the font files.

Font Awesome Importer Stack

Font Awesome is another stack packaged separately that is not part of cleanLists Resources simply because it is used in so many other stacks of mine. Use of Font Awesome is the same – simply drag and drop to the top of your stacks page.

Terminology

General Controls

  • Section Type: List item, header, button.List items (default) are for individual list points that receive most of the styling options and color options – most significantly the bullets.
  • List Bullets: Square, Circle, Modern Pics, Web Symbols, Off, Inherit. These are bullet list-item choices and will only work for list item section types. Squares & Circles are small container objects with borders that display them as either a square or circle. Modern Pics & Web Symbols are font-based icons and controlled below by the “Web Font Symbol” section.
  • Web Font Symbol: this field is used to control the web font symbol and works only in list item section types, and the list bullets “Modern pics” and “web symbols.” Simply type the character shown on the “Glyphs” tab to match with the symbol. You can match these web symbols using the cleanLists Resources stack (comes package in version 2.0+).
  • Bullet Size (px) controls the pixel size of bullets. When used on the Square or Circle List Bullet note that there is a 1px border around, so if set to 10px size it would be 12px width and 12px height.
  • Font Size (px) controls the size of fonts in the list item and button section types.
  • Header Size (px) controls the size of the header section type (note that the Header Tag below controls the HTML wrapping).
  • Button URL: Place button URL / links in this field – do not place them by highlighting the text and using the link icon in the top left.
  • Button Themes: Off, Simple, Soft. This section controls pre-set styling (aka themes) of the button section. Soft is a minimal setting and will not receive all the button color controls, where the Simple button will.
  • Header Tag controls the HTML heading tag, i.e. <h1>.
  • Padding Top & Padding Bottom control the padding below and above the line and can be used to make all section types larger. This option is also built into stacks, though I added it here as well for quicker use.
  • Text Padding Left controls the distance of the text from the left side (side of bullet icon)
  • List Icon Top & Left control the distance of the bullet icon from the side. By default they have been set for smaller fonts (12-14px) and may need to be adjusted for larger fonts. Increasing Top will move the bullet down, increasing Left will move the bullet to the right.
  • Header Center centers the text in header section types. Uncheck and header will move left.
  • Pointer (Hand) causes the mouse to be a pointer (hand) when hovering the section.

Color Controls

  • Background On creates a background color for the section. Unchecking will turn the background off, thus the background behind the table will be visible.
  • Background controls the color of the background.
  • Alt Bg On turns on the alternating background color for list item section types.
  • Alt Bg Odd sets the alternating background color to occur every other line item. Unchecking the box will set the alternating background color to even.
  • Bg Alternate controls the color of alternating backgrounds, assuming it is turned on.
  • Bg Hover On allows for the hovering background color for list item section types.
  • Bg Hover controls the color of the hover in list item section types.
  • Text & Text Hover controls the colors and hover colors for all basic text in that section.
  • Links & Links Hover control the colors and hover colors for all links in that section.
  • Bullets & Bullets Hovers controls the colors for bullet icons in list item section types.
  • Button Bg & Bg Hover control the background and background hover colors for button section types (does not work for Soft buttons).
  • Button Border & Border Hover control the border and border hover colors for the simple button types.

cleanLists Resources (2.0 +)

cleanLists Resources Stack

To better assist in development ease and speed version 2.0+ comes with an optional additional stack to assist and show the icons associated with some of the built-in icons. These are also separated so that they only need to be loaded once instead of over and over again with each instance of the stack.

cleanLists Resources

Increasing Distance from Icons & Text

The built-in “Text Padding Left” slider can increase/decrease this distance, though the max is 50 pixels. If you would like to increase this distance you can you can manually increase this by adding code in the Page Info > Header > CSS section.

1
.cleanLists li {padding-left: 100px !important;}

Adjust the 100px to whatever value you wish to use.

Remove Underlines from List Items

In some themes an error is occurring causing list items text to have underlines. Fortunately, you can remove this simply by inserting the following code in the Page Info > Header > CSS section.

1
2
3
.cleanLists ul a li, .cleanLists a, .cleanLists ul a li:hover, .cleanLists a:hover {
     text-decoration: none !important;
}

Please follow & like us :)
Follow by Email
Facebook
Twitter
INSTAGRAM
Google+
http://onelittledesigner.com/rapidweaver/topics/rapidweaver-stacks/cleansuite/">
RSS

cleanQuotes

Basic Use

cleanQuotes comes with 2 Stacks.

One is a Containing stack (use this to create a cleanQuotes section).

cleanQuotes Stack

The other is an Inner stack (drop this inside cleanQuotes Container section to create individual Testimonial sections). Be certain to place each inner section directly below or above each other and not inside one another or outside the Containing stack (these will break the stack from working properly).

cleanQuotes Inner Stacks

Each of these sections can be customized. The container section will control customization for that entire cleanQuotes section. The inner section will control customization options only for that individual testimonial.

Built-in Quote Icons (v 1.0+)

The built-in quotation icons can only be inserted in the Customization Options when using the Quote Box theme. All other themes must manually insert them, which can be done by simply dragging and dropping them in. You can float the quote icon left or right by using the Edit Image icon and choosing Float Image Left (or Right).

You can easily create your own as well with a simple word software – change the font and color to whatever you desire and type CMD + Shift + 4 and highlight the quotation symbol.

Adding Custom Images (v1.0+)

The Quote Box Theme, by default, will display a quotation image in the upper left corner of the testimonial. There are 5 built-in quotations that are displayed, though you can add your own image if you choose to do so.For the URL’s to be displayed on your images you will need to have published your website at least one time – if not these steps can be performed after your first publish.

1. Upload the image into the Resources section of RapidWeaver’s Edit Mode.
2. Click the image and select the clipboard icon (this will copy the URL to your clipboard)
3. Paste the URL (CMD+V) into the Custom Image section under General Controls in the cleanQuotes Container section (Make sure the Custom Image Icon checkbox has a check mark as well).

cleanQuotes Author Icon

*This process is the same for the “Author Icon URL” option inside individual testimonial sections.

Please follow & like us :)
Follow by Email
Facebook
Twitter
INSTAGRAM
Google+
http://onelittledesigner.com/rapidweaver/topics/rapidweaver-stacks/cleansuite/">
RSS

cleanTabs

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.

Please follow & like us :)
Follow by Email
Facebook
Twitter
INSTAGRAM
Google+
http://onelittledesigner.com/rapidweaver/topics/rapidweaver-stacks/cleansuite/">
RSS

cleanResponse

cleanResponse has been replaced by Responsive Grids

cleanResponse still works great & I will continue to provide support for cleanResponse, but there are no planned updates

Changelog

Version 2.0.4 (July 31, 2014)

  • Changed ID selector to Class to remove duplicate IDs
  • Fixed other minor coding errors

Version 2.0.2 (January 30, 2014)

  • Removed minor syntax error conflicting in old IE browsers
  • 4column no gutter error in safari
  • Condensed into a single stack (previously 5)
  • Added a 6th column
  • Fixed other conflicts between browsers

Version 2.0.1

  • 4column no gutter error in safari
Please follow & like us :)
Follow by Email
Facebook
Twitter
INSTAGRAM
Google+
http://onelittledesigner.com/rapidweaver/topics/rapidweaver-stacks/cleansuite/">
RSS