
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
Ultra List Changelog
1.0.5
- Added feature to alphabetically sort tags, and tag dropdown menu
1.0.4
- Added an option for searching through item details
- Added an option for hiding sibling items when an item is opened
- Made improvements to search and filtering functionalities
- Fixed bug with connected borders
1.0.3
- Fixed bug adding a border/divider to last list item
- Fixed bug causing sort-list shadow not to work properly
- Added options for editing list item shadows when separated