Tutorials

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;
}

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