blog-tutorial-post-template

Tutorials

Step

General

Maximum Width

This option sets the maximum width of the entire stack. Note that it will automatically be centered if the browser is greater than this width.

Minimum Height

For an elegant look, you can set a minimum height for the stack here.

Radius

Sets the corner radius of the edges of the stack.

Mobile Point

This point determines the pixel width at which the Step stack will become responsive. Note, here the sidebar will hide, and can be toggle by clicking on the clipboard icon.

Sidebar Width

Here you can set the sidebar width for desktop devices

Text Size

Here you can set the font-size for the list item text within the sidebar

Text Padding

Here you can set the amount of padding around the list item text within in the sidebar.

Sidebar Font

Here you can select a font family for the sidebar

Text Color (Initial & Active)

Here you can set the color of the list item text within the sidebar. You can set it for the normal list items, and for the active list item. Note the the back arrow on mobile devices will inherit the color of the active list item.

Background (Color, Double Gradient, Triple Gradient, Image)

Here you can set a background for the side bar. You can choose between:

  • Single Color
  • 2 Color Gradient
  • 3 Color Gradient
  • Image (with a color overlay if desired)

Steps

Padding

Here you can set the amount of padding around the inner step content. Note that this doesn’t include the step count or the navigation. Simple the inner content that you place within the “Drop Stacks Here” section.

Step Count (Text & Number)

In the right corner of each step you will see the text “STEP” followed by the current step number.

These inputs allow you to set the size of both the text and the number.

Count Text

Here you can edit the actual text content of the “STEP” text before each step number.

Title Size

Each step has a main title. You can edit the size of this title here.

Text Size

Here you can set the default font-size for any text placed within the “Drop stacks here” section. Note that any custom stacks you place here may behave differently.

Here you can set the padding of the “BACK” & “NEXT” buttons that navigate through each step.

Here you can set the corner radius of the navigation buttons.

Here you can set the font-size of the text in the navigation buttons.

Here you can set the actual text content of the navigation buttons, both “BACK” and “NEXT”

Once the slider reaches the last slide, the “NEXT” button text will change to read “COMPLETE”, which will then lead the user to the completed step page.

You can edit this “Complete” text here.

Title, Text, Count FONTS

Here you can select a font for the main title, text, and count fonts.

Note that any header tags placed within the content area of a step will inherit the main title font.

Count Colors (Text & Number)

Here you can change the color of the count text and numbers

Toggle Colors (Initial & Active)

Here you can change the color of the sidebar toggle icon in the left corner of each step.

You can change the initial icon color, as well as the active color (when the sidebar is displayed)

Main Title

Here you can change the color of the main title for each step.

Here you can change specific text colors for the content area including header tags, general text, and links.

Here you can change the text color and background color of the navigation buttons.

Here you can set a basic color background for the navigation area.

Background (Color, Double Gradient, Triple Gradient, Image)

Here you can set a background for the steps. You can choose between:

  • Single Color
  • 2 Color Gradient
  • 3 Color Gradient
  • Image (with a color overlay if desired)

Completed Step

Once all of the steps are completed, a final completed page will display, allowing the user to move on, or to restart the guide if desired. Here you can edit specific styles for this completed page.

Completed Icon

The completed page has a large checkmark icon that displays to the user. You can edit the size of this icon here.

Complete Title

There is also a title that is displayed on the completed page. You can edit the font-size of this title here.

Complete Description

There is also a short description that is displayed on the completed page. You can edit the font-size of this description here.

Restart Icon & Button Sizes

There is a restart button displayed on the completed page. You can edit the icon size, and the width and height of this button here.

Icon Color

Changes the color of the checkmark icon.

Title & Description Colors

Changes the text color of the title and description.

Restart Button (Icon & Background)

Here you can edit the color of the restart button icon and background

Background (Color, Double Gradient, Triple Gradient, Image)

Here you can set a background for the completed page. You can choose between:

  • Single Color
  • 2 Color Gradient
  • 3 Color Gradient
  • Image (with a color overlay if desired)

Quick Links

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

Movable Windows

  • Posted On

Move beyond the confines of static content layouts! Movable Windows allows your page visitors to effortlessly drag and reposition custom content windows anywhere in the browser viewport. Windows can be minimized to free up space and stay fixed to the browser viewport so they are always accessible.

Resize & Minimize

Windows can be resized to take up more or less space, or maximized to fill the entire screen. But that’s not all – these windows are like handy sidekicks, always ready to assist. Need quick reference? No problem! Windows can be minimized when not in use, saving precious screen space for what really matters – your page content.

Inline

Open windows stay fixed on screen so they are always accessible. Minimized windows have three modes to choose from. “Inline” keeps it in line with other content, “Fixed” is always on screen, and “Draggable” lets you move it around while minimized.

Customizable

It’s not just about functionality; it’s about style too. Customize your windows by size, position, and color. Add in text, images, forms, links – you name it! Want a little more flair? Allow window resizing, choose whether they start minimized or open, change the toggle icon, or hide the window title when minimized.

Check it out!

 

 

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

RapidWeaver is a trademark of Realmac Software