Tutorials
Background Image
The following steps describe how to add a background image by utilizing the Resources section (requires RapidWeaver 5) within RapidWeaver.

1. Click and drag your background image in the Resources area of the project file.

2. Insert the following code in the Custom CSS box within RapidWeaver:
body {background-image: url(%resource(my-image.jpg)%);}
3. Replace the "my-image" with the name of the image. Your image will now display in the background area of the theme.

4. In the Style Options of the theme under Banner/ Background Image select Format Background Image (not selecting this option will result in the background image repeating). Your background image is now ready to view.

(Please note that smaller sized images used for the background image will appear fuzzy. Bigger sized images is highly recommended.)



Banner Image
The following steps describe how to add a banner image by utilizing the Resources section (requires RapidWeaver 5) within RapidWeaver.

1. Click and drag your image in the Resources area of the project file.

2. Insert the following code in the Custom CSS box within RapidWeaver:
#feature {background-image: url(%resource(my-image.jpg)%);}
3. Replace the "my-image" with the name of the image. Your image will now display in the banner area of the theme.

(Banner width is set at 960px. Banner image heights are not limited by the theme, but determined by you. However, when choosing your banner heights, the number of navigation links in your site should be taken into consideration).


Slideshow
Illuminate requires a 3rd party product (sold separately) to utilize the slideshow capabilities of the theme. Illuminate'a preview site features the third party slideshow product Superflex. Superflex, is an easy-to-use responsive slideshow product which can be found at the following link: http://nickcatesdesign.com/rapidweaver_themes. Once Superflex has been successfully installed, the following steps describe how to set-up your slideshow:

1. In Stacks 2, click on the cube icon located at the top left side of your screen. Scroll down until you find Superflex.

2. Simply drag Superflex to your Stacks 2 page.

3. You are now ready to drag images from your desktop to the box with the arrow pointing down.

4. Once you have placed your images within Superflex, you must un-click the Quick-Set-up Superflex setting (bottom-right) and then click on banner import and responsive banner.

5. Insert the following code in the Custom CSS box within RapidWeaver:
.sfbanner, .sfnav {height: ???px!important;}
6. Replace the "???" with the height value of your image/s in pixels (please note that all images used in a slideshow on the same page should have the same height for superflex to work properly). You are now ready to watch your responsive slideshow.

(Several customizable options are available with Superflex such as the number of images, length of time between slides, and transition types.)



Fluid Video
Once you have embedded (please make sure you are including the code to embed the video and not just the video link) your video from any of the compatible media sites listed on the Fluid Video page of this preview site, highlight the code used for embedding and click on "Ignore Formatting" under Format. Your video is now set-up and ready to display appropriately on multiple devices.


Social Icons
The following steps describe how to utilize the 72 built-in social icons within Illuminate.

1. Insert the following code in the Sidebar area within RapidWeaver:
<a class= "social" href= "#">f</a>
2. Replace the # with the page URL of your social icon.

3. Replace the letter f with the corresponding symbol of the social icon of your choice using the chart below.

4. Highlight the entire code and click Clear Formatting, then Ignore Formatting under Format at the top left of your screen.

(For multiple social icons, repeat the above steps for each desired icon.)


Stacks Image 335
New to RapidWeaver
Welcome. As you will soon discover, RapidWeaver is an incredible, easy-to-use product for building websites. The following link provides information on the basics of Rapidweaver: http://support.realmacsoftware.com/kb/basics-of-rapidweaver.