Tutorial
Banner Image (ONE Banner Image)
Mosaic provides two options when using a banner image -- utilizing ONE banner image or showcasing FOUR banner images with Extra Content areas as shown above. The following steps describe how to add ONE 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. (The name should not include any spaces or characters. All lowercase letters work best).

The banner image will display a width of 1160px and a height of 440px.


Banner Image (FOUR Banner Images)
Mosaic provides two options when using a banner image -- utilizing ONE banner image or showcasing FOUR banner images with Extra Content areas as shown above. Please note the Extra Content Banner Images are designed for IMAGES ONLY and not formatted for text. The following steps describe how to add FOUR banner images by utilizing the Resources section (Requires RapidWeaver 5) within RapidWeaver and Extra Content Areas.

1. Repeat the steps for adding ONE banner image.
2. Click and drag the image you would like to use for each of the Extra Content Banner areas (must have an image for all 3 Extra Content areas) in the Resources area of the project file. (If you are using a Stacks page you can simply drag your images to the Extra Content Stack. Remember to name the Extra Content Areas accordingly within the Stack).
3. Insert the following code in the Custom CSS box within RapidWeaver:
#myExtraContent2 {background-image: url(%resource(my-image.jpg)%);}
#myExtraContent3 {background-image: url(%resource(my-image.jpg)%);}
#myExtraContent4 {background-image: url(%resource(my-image.jpg)%);}

4. Replace the "my-image" with the name of the image for each Extra Content area (Please see the Extra Content Page for the location of Extra Content Areas. The name should not include any spaces or characters. All lowercase letters work best).
5.Insert the following code in the text area of the page when in edit mode of RapidWeaver:
<div id="myExtraContent2"></div>
<div id="myExtraContent3"></div>
<div id="myExtraContent4"></div>

6. Highlight the code in step 5 and under Format click on Ignore Formatting. This should turn the code pink.
7. Select the Extra Content Images Toggle option under the Page Inspector Styles.

The banner images will display at the following dimensions when selecting to use all FOUR banner images:

Main Banner: Width: 680px. Height: 440px.
Extra Content #2: Width: 370px. Height: 215px.
Extra Content #3: Width: 170px. Height: 215px.
Extra Content #4: Width: 190px. Height: 215px.

(Please note you must use all Extra Content Areas for proper display of the images. All Extra Content Areas are designed for IMAGES ONLY. The areas are not formatted for any text.)


Extra Content
For additional information on extra content and its implementation please visit the following link: http://foss.seydoggy.com/?p=ExtraContent. Please see the Extra Content page of this preview site to see where each of the 6 extra content areas are placed in Mosaic.


Fluid Video
Mosaic will ensure your videos adjust appropriately no matter how small or large the device being used. Mosaic supports embedded video from the following sites:

1. You Tube
2. Vimeo
3. KickStarter
4. Viddler
5. Blip

Once you have embedded 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.

(Please note that embedded video is not the actual link to the video but a string of generated code).


Responsive Columns
To create responsive columns within Mosaic, a 3rd party product stack is required such as Joe Workman's responsive stack layout which can be found at the following link: http://joeworkman.net/rapidweaver/stacks/responsive-layout/.


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 15
RapidWeaver Manual
The team at RealMac has compiled a great resource for RapidWeaver users and answers many questions about the software. You can find the manual at the following link: http://realmacsoftware.freshdesk.com/solution/categories/14470/folders/24470.