Stacks4Stacks

Lister permits you to setup numbered or bulleted lists in your Stacks pages; using styled text, HTML code, Markdown or your RapidWeaver-generated list of page links. Within the stack settings you can select a preferred list point style from a pull-down menu. You are then presented with a generous array of simple settings to help you customise the style of your list. Many list point styles are offered; including basic web browser list styles, images, shapes and all 600+ Font Awesome icons! You are certain of finding a list style to compliment your website design in this stack.

Some RapidWeaver themes are certainly better at styling lists than others. If you find yourself in a position with a theme that offers lousy list styles (or you just fancy having a play with the styling yourself), then the special Style Overrides option can be enabled. This gives you an extended selection of customisable style settings; including font size, line height, colours and italics.

Lister outputs a list marked-up as a conventional HTML unordered list. This is great news, because it means we can give you support for nested (multi-level) lists that competing list stacks can't offer you. Generated lists are very search engine friendly and compatible across a wide range of web browsers and handheld devices. We've also taken into account of other factors, like lists that print and save as PDF with a more tidied appearance.

Examples

These are some examples of the Lister stack demonstrating some different list styles available in the stack.

Setup

Follow these instructions carefully for getting a Lister stack working in a webpage:

1. Once installed into Stacks / RapidWeaver, open your stack library and drag-and-drop a copy of Lister into your Stacks webpage
2. In the Lister Settings, select the preferred Content Type you wish to use for your list items
3. Enter content into the placeholder shown, to create your list items
4. Use the appropriate markup for HTML and Markdown lists. If using Styled Text (which is the default content type), highlight your sentences of content with your mouse and click the List option in the Stacks styled text toolbar to apply basic bulleted or numbered list formatting to your content
5. In the Lister Settings, choose the desired List Point Style you want to use. Please note that some list point styles have more customisable options than others, which can be configured in the settings
6. Adjust the Item Indentation and Item Spacing settings, if desired. Again these two settings will have different effects on different list point styles
7. If you wish to further customise your list styling (beyond the styling that your RapidWeaver theme imposes), then check the Override Theme List Styles option and configure the style and colour settings accordingly
8. Preview your webpage in RapidWeaver to see what the generated list looks like. Publish when done.

Please note that some of the more advanced list point styles have dependency on Javascript, for injecting extra markup (like shapes, images or icons) into your list. Therefore some lists may need to need to be previewed in RapidWeaver before you can fully-view the completed styling applied. Additionally if the content type is set to Website Navigation Links, these links are only visible when the page is previewed and are derived from the navigation links your RapidWeaver theme generates.

Lister supports nested lists (lists that comprise of multiple levels, with indentation for each level). Nested lists are generally easier to markup using HTML code. You can search and find many examples online for nested lists. For basic flat-level lists, any of the other content types work well. Basic text styling and formatting can be applied to your list items; including bolder text, italics, headings, links, code and images. Lister takes effect on all lists placed within the Lister content area.