blog-tutorial-post-template

Tutorials

Adding a Banner Image

If you are using RapidWeaver 7, you just need to drag and drop your image into the Site General Settings page “Banner” section.

banner image how to

To use a page specific banner, select the page and navigate to the Page Inspector > General Settings tab and use the “Override Site Banner” section.custom banner on single page

If you are using an older version of RapidWeaver that does not have the “Banner” Setting you can use the snippet below instead. Place the code inside the Page Inspector > CSS tab for the page you want to apply the image to.

.banner {
  background-image: url(%resource(image.jpg)%); 
}

Then drag and drop your image into the “Resources” Section found in the left menu bar. Replace the text “image.jpg” with the title and extension of your image file (Case sensitive).

old rapidweaver banner image

 

Adding a Background Image

When the “Banner Toggles” option ‘Full Width’ is disabled, you are able to add an optional image to the background.

To do so, place the code below inside the Page Inspector > CSS tab on the page you want to apply the image to.

.background-image {
  background-image: url(%resource(image.jpg)%); 
}

Then drag and drop your image into the “Resources” Section found in the left menu bar. Replace the text “image.jpg” with the title and extension of your image file (Case sensitive).

adding a background image

Opening Images in a Lightbox

First we must enable the plugin. Navigate to your Page Inspector > Styles Tab and enable the Lightbox by selecting checking the ‘Enable Lightbox’ checkbox under the “Other Toggles” heading.

enable lightbox

 

If you are using a “Photo Album” page, all of the images added will automatically be opened in a Lightbox.

If you want to add the Lightbox effect to an image on another page type import or drag and drop an image into that page.

Then Double click the image and in the popup menu change the Filename to something that includes the word ‘lightbox’. You can also change the “Alt Tag” to set what will display as a caption for the image.

Light Box

 

Using Font Awesome Icons

Font Awesome’s Icons can just about be used anywhere on your site. Check out the links below to learn more about how to use Font Awesome.

How to Use Font Awesome

See all usable icons

Style Options

Navigation

Align Right – Aligns the menu navigation page titles to the Right instead of the left.

Show Site Title – Displays the Site Title to the Right of the logo (to the left of the menu navigation page titles).

Show Site Slogan – Displays the Site Slogan centered inside of the Banner area.

Disable Parent Pages – Disables menu navigation page links that have sub-pages. These “parent” pages will not be able to be navigated to and will only be used as titles for the drop down sub-page menus.

Glass

Dark Edges – Changes the edges of the glass from a white reflection to a dark shade. This option is useful if you are using a white “Content  Background” color.

Remove Blur – Removes the blur effect of the glass.

Glass Transparency – Adjust how strong the transparency of the glass color is.

Banner

Full Width – Makes the Banner image stretch to the the sides of the browser window.

Banner Setting – Adjusts the height of the Banner image.

Content

Remove Padding – Remove padding from the content. This setting is useful when using a Stacks page and you want a Stack to stretch to the edge of the content.

Sidebar – Enable the sidebar and select which side it displays on.

Title Font – Choose a font for the page titles. Some Options also effect the navigation menu page titles.

Content Font – Choose a default font for the content text.

Other Toggles

Enable Lightbox – Turn on the Lightbox plugin on the Album Page or for images with “lightbox” in the file name.

Disable Loading Animation – Removes the sliding animation on page load in and out.

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