- SCU Home Page
- About SCU
- On Campus
- News & Info
- Web Publishing
- About Web Publishing
- Getting Started
- CommonSpot Help
- Design Resources
- Publisher Resources
- Contact Us
Formatting Options for Lists
A few options are available for presenting lists of items in Commonspot, ranging from a basic bulleted (or numbered) list, to "directory" style lists with image icons or thumbnail images for each item. Here are some examples:
The standard formatting for unordered (bulleted) and ordered (numbered) lists, which can be added using Commonspot's text editor.
Optionally, you may add the "linklist" style class to the list - the formatting will change to use double right-angle characters before the link item:
To add a list with this style class, you can select the "text-linklist" option from the HTML snippets menu in the Commonspot text editor, or you can switch to the HTML view and maually add "class=linklist" to the opening UL or OL list tag.
Custom Bulleted Lists
The Commonspot "Bulleted List" element (you'll find it in the Hyperlink element gallery category) has various custom rendering options that will allow you to build a list with headings, descriptions, links, nested lists of links, and thumbnail images. The "Directory List" rendering will be applied by default, and you can select the Simple List or Expandable List options by modifying the element's Custom Render Handler property.
The Directory and Simple lists can optionally be displayed with a list of item titles that link to the full list title and description below. This can be useful for handling the display of Frequently Asked Question lists, or other lengthy lists.
To format a list in this way, select the Custom Render Handler option in the Element Properties menu, click "next" and check the FAQ display box.
The standard rendering for the Bulleted List element.
A more compact version of the Directory List style.
Based on the Portal page navigation, this renders a list with item description text that can be opened and closed.
List with custom thumbnail images
You can replace the standard list item icons for Directory or Simple lists with your own images. Add an image to the description field for the list items, and the Directory and Simple rendering will use it in place of the icon.
This uses the jQuery UI library to present a list in the 'accordion' style. Update the page's custom metadata settings to include the jQuery library if using this list rendering style.
Office of Marketing and Communications
Santa Clara's Office of Marketing and Communications assists the University's schools, academic departments, and administrative offices with outreach, visual branding, and media placement. Learn More »
Information Services supports teaching, learning, scholarship and University operations by providing access to, facilitating use of, and managing the collection, processing, storage, maintenance, and preservation of information. Learn More »
Web Publishing Support
Support for campus Web publishers is available from OMC and Information Services. Learn More »