blog-tutorial-post-template

Tutorials

Link Drawer Tutorial

General

Start Collapsed (checkbox)

This check box will determine whether or not the drawer is collapsed or open when the page loads

Position (Dropdown)

Options:

  • Fixed
  • Inline

Fixed

Fixed means that the drawer will stick to the top/bottom of the page, and follow the user as they scroll. Once this option is selected, you will see a new dropdown appear for select the orientation (top/bottom) of the drawer.

When this option is selected you will also see some display options such as:

  • Always
  • On Scroll (Appears on the page when scrolled to)
  • On Scroll Past (Appears on the page when scrolled to and hides again when scrolled above)

Inline

Inline means that the drawer will sit with the content wherever you place it on the stacks page, it will not follow the user as they scroll.

Z-index

The index determines the 3D position of the drawer. If you find that the drawer is being hidden behind other stacks, increase this value.

NOTE: You do not have to worry about setting individual z-indexs for multiple Link Drawers, this is already handled automagically ^_^

Max-width

This determines the maximum width for the drawer

Breakpoints

Here you can set the Tablet, and Mobile Breakpoints for the stack. The number of columns and other responsive options, will change at these specific points. All default values apply to desktop sizes.

Columns

Here you can set the number of columns for the item grid. A separate number of columns can be set for Desktop, Tablet, and Mobile.

Drawer

Font Family (Dropdown)

This dropdown allows you to choose the font for Link Drawer

Outer Margin

This is used to set spacing around the outside of the Link Drawer, It comes in handy when the browser shrinks, but you don’t want the sides of the drawer to touch the edge of the page.

Corner Radius

Determines the roundness of the corners of the drawer and the toggle button.

Border Weight & Color

You can add a border to the drawer by setting a weight, and adjusting the color. For no border, simply set the weight to 0.

Shadow (ON or OFF)

You will see the option to toggle the shadow on or off. Once turned on you will find inputs for adjusting the shadow of the stack.

Background (Off, Color, Gradient, Image)

You can choose between 4 options for the Drawer background:

  • Off (No background)
  • Color (One single Color)
  • Gradient (Two colors, and options for gradient direction)
  • Image (A custom background image of your choice)

Items

Icon Size (Desktop, Tablet, Mobile)

Here you can set the size for icons of the Link Items in the Drawer, You will see 3 inputs, one for Desktop, Tablet, and Mobile

Text Size (Desktop, Tablet, Mobile)

Here you can set the size for the text of Link Items in the Drawer, You will see 3 inputs, one for Desktop, Tablet, and Mobile

Icon Color (Initial & Hover)

Here you can set the color of the Icons, for both the initial state and hover state

Text Color (Initial & Hover)

Here you can set the color of the Text, for both the initial state and hover state

Backgorund Color (Initial & Hover)

Here you can set the background color for the Link Items. You will see options for the initial background and the hover background

Border Color (Initial & Hover)

Each item has a 1px solid border around it, which is set to opacity 0 by default. If you want to apply a border to the initial or hover state, change these colors and increase the opacity to what you desire.

Gutters

This determines the amount of space inbetween all of the link items

Content Spacing

The determines the amount of spacing between the icons and the text in the link items.

Padding

Here you can set the vertical and horizontal padding for each item.

Radius

Determines the corner roundness for the Link Items.

Toggle

Hide Icon (checkbox)

If this option is checked, then the icon for the toggle will be hidden and only text will appear. Useful for button like toggles.

Fill Mode (Full or Pixel)

  • Full (The toggle extends the full width of the stacks max-width)
  • Pixel (Allows you to set a custom pixel width for the toggle)

Alignment

If the toggle is set to a Pixel width, then a dropdown menu will appear to set the horizontal alignment of the toggle. You can set it to:

  • left
  • center
  • right

Height

This input determines the height (size) of the menu toggle

Text (Open and Close text)

Here you can set the actual text content for the toggle in it’s open and closed states

Icon Size (Open & Close icons)

This allows you to set the size for the open and close icons

Background (Initial & Hover)

Here you can set the initial background color and the hover background color for the toggle

Icon / Text

Here you can set the color of the icon and text of the toggle button, for both the Initial and Hover states.

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

Live Search 2

Live Search 2 has been updated with new features, improvements, and important bug fixes – all designed to make your site’s search experience even faster and more precise.

This update is free and automatic for all existing customers.

Don’t own it yet? Now’s the perfect time to jump in — Live Search 2 is 30% off for a limited time! No code needed — your discount is automatically applied at checkout.

New Features:

  • Added support for exact match searches using quotation marks around parts of a search phrase.
  • New option to show a “Clear Input” button.
  • Added Replace Character feature.
  • Now supports two separately defined search bars on the same page.
  • New option to adjust z-index.

Improvements:

  • Index file generation now detects and ignores duplicate content, such as text found in every page header and footer.
  • If any pages are missing from the index file, they will now still be searched dynamically.
  • Index file data is now compressed to reduce file size.
  • Pages at https://website/folder/index.(php|html) and https://website/folder/ are now treated as duplicates and will not be indexed separately.
  • Search results container height now only stays fixed during pagination — it will shrink dynamically for new searches.
  • When searching custom sitemaps, the default sitemap will now be ignored.
  • The popout search results container will now automatically hide when the search input is empty.

Bug Fixes:

  • Fixed an issue that prevented custom text/language settings from applying correctly.
  • Fixed a bug where result descriptions could fail to display a local section title.
  • Fixed a bug that could trigger an error if suggestions were enabled but the stack was not published to the page.
  • Prevents form submission before the page is fully loaded, avoiding unwanted page refreshes on slow-loading pages. A loading indicator is shown until the page is ready.

Check it out in action!

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

RapidWeaver is a trademark of Realmac Software