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 (Free)

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.


General Controls

  • cleanLists Customization OptionsSection 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

  • cleanLists Color ControlsBackground 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.

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.

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

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


v1.5.3 (July 21, 2014)

  • Added code so Background Color Hover On would override transparency option
  • Cleaned up other code

v1.5.1 (January 6, 2014)

  • Added script to add anchor link content for IE
  • Font Awesome icons packaged separately (Get Free Font Awesome Stack here)
  • IE 7-9 highlight all content in Header & Button sections in cleanLists and press CMD + period to turn off auto-formatting (this error is most prevelent when several cleanLists stack instances are running on a single page)

v1.4.11 (November 19, 2013)

  • Added !important tags to help remove invasive styling

v1.4.9 (November 13, 2013)

  • Changed sliders to number dials in customization options
  • Anchor tag hover color corrected
  • Default font sizes now added
  • Improved various CSS code

v1.4.5 (November 6, 2013)

  • Removed target=”blank” from anchor link – no longer will open links in new windows
  • Pointer customization removed (will accept by default unless theme specifies otherwise)
  • Padding customization options changed from using a slider to using fields and arrows
  • Changed other minor CSS coding

v1.4.0 (October 24, 2013)

  • Removed links from the bullet list items, though it can manually be added again. Links will still automatically remain for “button” sections
  • Added the new flat icon
  • Returned to group ’1LD Stacks’ vs ’1 Little Designer – cleanSuite’
  • Text in cleanLists previously read by default:

    “(1) Select this text, (2) Create an unordered list in the upper toolbar – the icon is similar to the cleanLists icon, (3) choose one of the first list item images – cleanLists will override their appearance in Preview Mode.”

    Text in the same area now reads simply:

    “Create an unordered list in this section from the list icon in the top right”

v1.3.0 (July 2, 2013)

  • SPARKLE ready

v1.2.2 (June 24, 2013)

  • Renamed Fonts folder to eliminate Stack conflicts
  • Added Font Awesome to the List Icons
  • Major changes/improvements to Customization section
  • Center text alignment option removed (unnecessary – already built into Stacks)
  • !important tag added to cursor CSS to help override opposing styles

v1.0.3 (May 29, 2013)

  • Includes instructions in Edit Mode
  • New default size for bullet icons (10px)

v1.0.1 (April 26, 2013)

An extremely small patch that adds some minor code to help and fix certain themes from displaying addition bullets. An unneeded file was removed from packaging as well.