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 to utilize a slideshow. Since Illuminate is a responsive theme, please ensure your 3rd party slideshow product is compatible with responsive themes. To display a slideshow in the banner area, please place the slideshow stack within an extra content stack and label the extra content area #1.



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.