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

Movable Windows

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