TUTORIAL

BANNER IMAGE

Paramount's design allows you to place images in the banner area without code. Simply drag an image to the top of the Styled Text or Stacks page, and the image will appear at the top of the content area and display as a main banner image. For proper display, please ensure the image has a width of 980px. The height does not require a set measurement.

Although code is not necessary for a banner image for Styled Text or Stack pages, Paramount has a built-in banner area option that will not only display on Styled Text and Stacks pages, but will also display on other built-in RapidWeaver pages such as Photography or Contact Pages. To utilize the built-in banner area, please follow the instructions below.

1. Click and drag your image in the Resources area of the project file. The Resources area can be found on the left hand column of RapidWeaver just below your webpages. (Please note that the Resources area is limited to RapidWeaver 5).

2. Insert the following code in the Custom CSS box within RapidWeaver (The Custom CSS area can be found by clicking on the Page Info icon at the top-right side of your project file. A panel will appear -- please click on the Header label. The Custom CSS box is located towards the center of the panel and labeled CSS):
#feature {background-image: url(%resource(my-image.jpg)%);}

3. Replace the "my-image" with the name of the image. (Please ensure that the name of your image is all lowercase and does not contain any spaces, characters, or symbols. Failure to do so may prevent the image from displaying upon publishing your site).

4. To ensure your banner appears, please select the Toggle option Banner Image On.



BUILT-IN-SLIDESHOW

1. Click and drag your images into the Resources area of the project file. The Resources area can be found on the left hand column of RapidWeaver just below your webpages. For proper display, please ensure slideshow images have a width of 980px. The height does not require a set measurement.

(Please ensure that the name of your image is all lowercase and does not contain any spaces, characters, or symbols. Failure to do so may prevent the image from displaying upon publishing your site).

2. Please insert the following code in the sidebar area:

<div id="myExtraContent2">
<div class="flexslider">
<ul class="slides">

<li>
<img src="%resource(my-image.jpg)%" />
</li>

</ul>
</div>
</div>


3. Replace the word my-image within the code to the name of the image you would like to have as the first image for your slideshow. You have now just completed your slideshow with 1 image.

4. For each additional image you would like to add to your slideshow, you will need to add the following line of code for each image:
<li>
<img src="%resource(my-image.jpg)%" />
</li>


The code below shows the additional line of code should be placed after the first li sequence, and what your sidebar area should look for a slideshow with two images. You may continue to add images to your slideshow as needed. Please note that images will appear in corresponding order.

<div id="myExtraContent2">
<div class="flexslider">
<ul class="slides">

<li>
<img src="%resource(my-image.jpg)%" />
</li>

<li>
<img src="%resource(my-image.jpg)%" />
</li>

</ul>
</div>
</div>


5. To ensure your slideshow appears, highlight the entire code in the sidebar area and click Clear Formatting, then Ignore Formatting under Format at the top left of your screen (the entire code will turn pink when completed). Please verify that the Display On under Built-In-Slideshow in the Styles section of RapidWeaver has been selected. There is also an option to choose between a slideshow that will transition images with a fade-in, fade-out feature, or slider effect under Built-In Slideshow Transitions.



LOGO

Paramount has the capacity to accommodate a logo that will display in the panel on the left-side of the page, just above the placement for the site title. Due to the design and placement of the logo, the width of the logo should not exceed 300px. The height does not require a set measurement. Please refer to the RapidWeaver manual (http://realmacsoftware.freshdesk.com/solution/categories/14470/folders/24470) for how to place a logo within a theme.



FLUID VIDEO

Paramount will ensure your videos adjust appropriately no matter how small or large the device is being used. Paramount 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 above, 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).



SIDEBAR PLACEMENT

Paramount displays the sidebar area below the main content area. The sidebar area's default setting within the theme is set to display and will appear as a grey box. The background color of the sidebar area is color customizable, and there is also an option to remove the sidebar area altogther under the Toggle Style Option labeled No Sidebar.




RESPONSIVE STACKS

Paramount is a responsive theme. As a result, it is imperative to ensure that any stacks used with Stacks 2, or any 3rd party products are responsive as well. While it is not necessary to build a website with Paramount using Stacks 2, it is a wonderful product that offers additional options to building your site, including hundreds of third party-products. If you choose to use Stacks 2, please ensure the stacks you are using are responsive. Joe Workman's responsive stack package is a great place to start your collection of responsive stacks and can be found at the following link: http://joeworkman.net/rapidweaver/stacks/responsive-layout/. The fluid image stack from this package was used for the images on the main page of this preview site.




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 251


DISABLING CONSOLIDATE CSS

If you are experiencing any display issues with the theme, or if certain style options are not working properly, please disable the RapidWeaver Consolidate CSS File setting within Preferences. The disabling of this setting should restore your style option selections and correct any display issues.



RAPIDWEAVER MANUAL

If you are new to the RapidWeaver community, or come across a setting that you are not quite sure of, the team at RealMac has compiled a great resource for RapidWeaver users and answers many questions about the software. From instructions on how to create sub-navigation pages to explaining the Resources area, you will most likely learn something new about RapidWeaver after reviewing the manual. You can find the manual at the following link: http://realmacsoftware.freshdesk.com/solution/categories/14470/folders/24470.