1LD Tutorials & Blogs

Tutorials

General

Toggles

  • Shop Top Date
  • Shop Bottom Date
  • Shop Description
  • Shop Info 1 (Location)
  • Shop Info 2 (Time)

Maximum Width

This sets the maximum width that the event cards can expand. They will automatically shrink to become smaller when the device size is changed.

Wrapping Point

At a specific points, the event cards will wrap, meaning that the dates will stretch the full width, and the title/description/info content will wrap below the date. This is the look for mobile devices.

You can choose the specific breakpoint width at which this point will happen. It is recommended that you set it to somewhere around 500px.

Responsive Breakpoints (Tablet & Mobile)

Throughout the stack you will find that there are specific sizing options for Desktop, Tablet and Mobile. These breakpoints will determine the point at which the Tablet, and Mobile sizing options are applied.

Events > General

You will find general styling and sizing options for events, including Radius, Padding, Margin, Title, Description, and Info (Time/Local/etc.) settings.

Radius

This determines the corner roundness of each event card.

Margin (Vertical & horizontal)

The margin is the spacing around each event card. If you want to add more space between each event card, then increase the vertical margin.

Padding

The padding refers to the amount of padding inside the content area of the events, e.g. the title, description, info, toggle, etc.

Content Spacing

The content spacing refers to the amount of space between the title, description, and info. Increase this option to add more space between them.

Title (Desktop, Tablet, & Mobile Sizes)

Here you can edit the font-size of the title for Desktop, Tablet, and Mobile devices.

Title Weight

Here you can choose whether or not the font-weight of the title should be set to bold or normal. On some fonts bold looks too extreme, therefore we’ve included this option.

Description Size (Desktop, Tablet, & Mobile Sizes)

Here you can edit the font-size of the description for Desktop, Tablet, and Mobile devices.

Info 1 & 2 Sizes (Desktop, Tablet, & Mobile Sizes)

Here you can edit the font-size of the info sections (time, location, or whatever icon you choose). The size can be set for Desktop, Tablet, and Mobile devices.

Font Family

Here you can select from a list of fonts for the event Title, Description, and Info.

You can also select a custom font by choosing “Custom” from the list, and then specifying the font URL along with the font name.

Event > Dates

**NOTE: There are two dates included with the Events stack, a TOP date and a BOTTOM date. This is useful for creating different combinations of dates.

Date and time formatting codes can be found here:

Date & Time Format Codes

Top Format

The top format option referrs to the format of the date that will display. By default it is set to: “DD” which refers to the 2-digit day of the month (01, 10, 24, etc.)

It can also be set to a time by doing something like “h:mm” meaning 8:00, or 10:00.

Bottom Format

The bottom format is the same as the top format, refer to the top format about for more information.

Min-width

Because certain date-names or times may be longer in width than others, we’ve provided a minimum width for the date section. This helps to keep all of the date sections the same size! It keeps them neat and sharp. If you find that one date/time is too long compared to the others, then increase this option and they will all be at-least this width.

Padding

The padding refers to the amount of padding within the date section.

Date Top & Bottom Sizes (Desktop, Tablet, & Mobile)

Here you can find the font-sizing options for both Top and Bottom dates, which can be edited for Desktop, Tablet, and Mobile

Font Family

Here you can set the font family for the Dates

Events > Details

The details sections refers to the area where you add in your own stacks or content. There are just a few basic options for the details section of the events.

Toggle Text

After the wrapping point for mobile devices, some useful text appears next to the toggle which reads “View Details”. You can customize this text here.

Padding (Vertical & Horizontal)

Here you can specify the vertical and horizontal padding of the details section.

Text Size

This refers to the general text size of the details section. Though, some stacks may override this text size.

Font Family

This specifies the font of the content inside of the details section.

Events > Colors

With Events, all of the color options are placed together, making it quick and easy to style everything all at once. The color options will be explained breifly below:

Title

The color the main title of the event

Description

The color the short description just below the main title

Info 1 & 2

The color of the info text & icons(time/location/etc.) below the description.

Date Top

The color of the top date in the date section

Date Bottom

The color of the bottom date in the date section

Header Tags

This refers to any h1, h2, h3, h4, h5, h6 tags that may appear in the details section.

Text

The general color of all text within the details section.

The genera color of all links within the details section.

Shadow Color

Here you can specify a color and various properties for the shadow behind each event card. Set all values to “0” if you want to have no shadow.

Background

This refers to the general background of all event cards. You can choose between:

  • None
  • Color
  • Gradient

Date Background

This refers to the background of all Date sections in the event cards. You can choose between:

  • None
  • Color
  • Gradient

Details Background

This refers to the background of all detail sections in the event cards. You can choose between:

  • None
  • Color
  • Gradient

RapidWeaver Stack Tutorials

RapidWeaver Theme Tutorials

RapidWeaver Project Documentation

Tutorials and documentation for all 1LD Project files can be found at the link below.

See Documentation

Get the power of a framework, for the price of a theme, in the convenience of a prebuilt RapidWeaver project file

Blog

Vivid Titles

Create stunning, uniquely-shaped content effortlessly with Vivid Tiles. Tailor your website’s appearance with customizable top and bottom edges, and arrange these elements seamlessly in rows.

Vivid Titles RapidWeaver Stack

Robust Customization

  • Create rows of uniquely-shaped content elements.
  • Customize each one independently.
  • Add almost any type of content.

Diverse Edge Options

  • Edges support 9 shape options with 4 layouts.
  • Mix and match edge shapes and layouts on top and bottom.
  • Incorporate images, icons, or text inside edge design.

Effortless Setup

  • Minimal setup required for immediate results.
  • Customizable style options to fit any website design.
  • Control element size and colors with ease.

Simply Responsive

  • Tiles automatically adapt to browser and device width.
  • Full control over tile horizontal and vertical alignment.
  • Automatically make all tiles in a single row the same height.

Eye-Catching Styles

  • Each edge shape has two unique background layers.
  • Adjust edge layer visibility, placement, and offset.
  • Apply subtle, attention-grabbing in-view animations.

CHECK IT OUT!

Latest News

Newsletter

Join our newsletter to get notified of new releases, updates, and discounts.

Subscribe

Popular Links

Free Stacks & Themes
See Order History
Product Tutorials
FAQs

© 2011 One Little Designer, 1 Little Designer (1LD)

RapidWeaver is a trademark of Realmac Software