Michael David Design

Escape Tutorial
Banner Image
The following steps describe how to add a banner image by utilizing the Resources section (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.

(Banner width is set at 1050px. Banner image heights are not limited by the theme but determined by you).
Escape requires a 3rd party product to utilize a slideshow. Since Escape 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.
Social Icons
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 105

Consolidate CSS
Please ensure you have disabled the Consolidate CSS files under Publishing Preferences for proper display and functionality of the theme.