Ultra List

Table of Contents

• How to use
• Edit Mode
• General
• Toggle
• Menu
• Menu Items
• Colors & Fonts

---

---

Introduction

Here you can learn how to use the Ultra List stack from Weavium. Of course, if you have any questions along the way, you are always welcome to visit the support page and leave us a message. ^_-

---

How to Use

Ultra List is actually really simple to get up and running!

Simply add the stack to your site, and then add list items using the (+) button. You can edit the information such as titles, descriptions, tags, and icons, by clicking on an individual item, and then going to the stacks settings panel in RapidWeaver.

Tag sort lists will be created automatically! All you have to do is create a comma-separated list (dogs, cats, bunnies) for your item tags, and we handle the rest!

There are lots of color options, this is where we recommend getting started. : )

---

Edit Mode

Collapse Details

Detailed list content can get pretty long, you can collapse it in Edit mode by checking this option.

General

Max Width

Simply sets the maximum width for the list.

Mobile Point

Ultra List is responsive, and will automatically re-adjust for mobile devices. You can the specific pixel breakpoint and which this collapse occurs.

---

Search

Here you will find the options for editing the Search functionality of the Ultra List Stack

No Search (Checkbox)

If you do not want your list to be searchable, check this option.

Placeholder

The text to be displayed in the Search bar when nothing has been typed.

No Result Text

The text content of the message that appears when no search results have been found.

Input Text

The font size of the search input text

Search Icon

The size of the search icon

Input Padding (Vertical & Horizontal)

The padding of the search input

---

Sort

Here you can find the settings for the Tag Sort functionality of the stack

No Sort

Turns off sorting, and hides the sort list dropdown.

Sort Icon

Sets the size of the sort icon in the sort-dropdown toggle

Sort Count

Sets the size of the sort count text in the sort-dropdown toggle when a sort is applied

Hide Header

The Ascend scroll-to menu has a header with a title default, you can choose to hide it by checking this option, for a cleaner look.

Toggle Size

Sets the size of the sort-dropdown toggle

Toggle Radius

Controls the corner roundness of the sort-dropdown toggle

Sort List Width

Sets the maximum width of the sort-dropdown

Sort List Height

Sets the maximum height for the sort-dropdown, if the dropdown extends beyond this height, it will automatically become scrollable.

If you do not want scroll-bars, set this height to something taller than your sort-dropdown list.

List Shadow

Allows you to adjust the box-shadow for the sort-dropdown

---

Items Genera.

Here you can edit the general styles for the list items

No Tags (Checkbox)

Checking this option will hide list tags, as well as turn off tag sorting. If you want tags, but do not want sorting, check the "No Sort" option under the "Sort" section.

No Description (Checkbox)

Hides list item descriptions, if you just want title content.

List Type (Separated or Connected)

There are two types of lists than can be created with Ultra List, Separated lists, or connected lists.

Separated lists will add a space between each list item, and a shadow.

Connected lists will remove the space between list items, and add a small border between them.

Radius

Sets the corner roundness of the list items

Spacing

Sets the amount of spacing inbetween n list items (Only works with separated lists)

Padding (Vertical & Horizontal)

Sets the inner padding of list items

---

Items > Content

Here you can edit sizes for the inner content of the list items

Title & Description size

Simply sets the font size of the titles and descriptions in the list items.

Icon & Icon BG

Here you can set the size of the List item icons, and the outer icon background container

Icon Radius

Sets the corner roundness of the list item icons

Icon Alignment

Here you can set the vertical alignment of the list item icons

• Top
• Center
• Bottom

Tag Text

Sets the font-size of text within tags

Tag Radius

Sets the corner roundness of tags

Tag Padding (Vertical & Horizontal)

Sets the padding around the tag text

---

Items > More Button

Each Ultra List Item contains a unique "More Button", that will make the list details appear when clicked.

The button is rather unique, as it can contain text, and then shrink into an icon button.

You can edit this button here.

No Button Text (Checkbox)

Check this option if you want the "More Button" to have no text, and simply be an icon.

Font Size

Sets the font size of the more button text

Btn Height

In order for the button to shrink into a perfect square, circle, a height for the button is required. Set the height of your more button here.

Btn Radius

Sets the corner roundness of the more button

Btn Padding

This controls the horizontal padding of the more button.

---

Stack Colors & Fonts

There are a ton of color options for the Ultra List Stack, this is likely where you will do most of your editing.

Fonts

Here you can set the font for Titles, Descriptions, Details section, and Search

Simply select the font that you want to use from the list, or select custom and provide the name of a Google Web font that you would like to use.

You can find Google Web fonts here: www.fonts.google.com

Search Colors

Search Text

Sets the text color of the search input, search icon, and search border

Search Alerts

The search will alert the user when no items are found, or when items ARE found using the search.

The search icon & border change color when this happens. Set the color for ERROR and SUCCESS here.

Search Highlight

When searching, list text that matches your will be highlighted live, you can set the background & text color of this highlight here.

Sort Colors

Toggle BG (Initial & Active)

The sort toggle has 2 states: Initial and Active.

When a sort item is checked, and a sort filter is applied, the button becomes active, and you can apply a custom background/color for this state.

Toggle Icon (Initial & Active)

Sets the color of the sort icon in the sort-toggle for initial and active states.

Sort List Text (Items & Checkboxes)

Here you can set the color of the list text, and the list checkboxes for the sort-dropdown.

Sort List BG (Color or a gradient)

Here you can set the background of the sort list, it can be a color or gradient. Click the (+) button in order to set the background to a gradient.

List Item Colors

Icons

Here you can set the color of list item Icon Backgrounds and Icons

Title

Sets the color of list item titles

Description

Sets the color of list item descriptions

Border

Sets the border color of list items when they are in connected mode.

List Item BG (Color or a gradient)

Here you can set the background of the List Items, it can be a color or gradient. Click the (+) button in order to set the background to a gradient.

Item Details BG (Color or a gradient)

Here you can set the background of the List Item Details Sections, it can be a color or gradient. Click the (+) button in order to set the background to a gradient.

Tag Colors

Here you can set the text & background color of the list item tags

More Button

Here you can set the text & background color of the list item More Buttons