Streamline is a new, creative and contemporary RapidWeaver theme by Michael David Design.

STREAMLINE

TUTORIAL

BANNER IMAGE/BUILT-IN-SLIDESHOW

For those customers who have already purchased a Michael David Design theme -- thank you. Please note that the code for a single banner image has been replaced with using the code for the 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 at least 800px. 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:


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



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/banner image with 1 image.

4. For each additional image you would like to add to your slideshow, simply replicate the code used for one slideshow image. 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.



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

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




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. Please verify that the Display On under Main Banner Image/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.



MAIN SIDEBAR IMAGE

Streamline includes the option of placing an image in the top part of the sidebar area as seen throughout the preview site. The following instructions explain how to add an image to the top sidebar area:

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 sidebar images have a width of at least 350px. The height does not require a set measurement.

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

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

3. Replace the word my-image within the code to the name of the image you would like to have as top sidebar image.




LOGO

Streamline has the capacity to accommodate a logo and will display just above the placement of the site title. The length and height does not require a set measurement.



NAVIGATION LINKS

The design of Streamline displays navigation links at the top of the page and shares space with the sidebar area. As a result, the number of links are limited, depending on the length of the names assigned to the links. Streamline supports two levels of navigation.



FLUID VIDEO

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




RESPONSIVE STACKS

Streamline 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 Streamline 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

Sreamline has included 2 separate icon sets to ensure the social icon needed for your site is not left out. To utilize the first set of built-in social icons, please follow the instructions below. PLEASE NOTE that the following code must be placed at the bottom of the Sidebar area within RapidWeaver, underneath your sidebar text and images, in order for the social icons to display properly.

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 655
To utilize the second set of built-in social icons, please follow the instructions below.

1. Insert the following code in the Sidebar area within RapidWeaver:
<a class= "social1" 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. Please note that for now, regardless of the order of icons, the first set will always display before the second set of icons).
Stacks Image 780
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 display issues.