Venture

michael david design

Venture Tutorial
Banner Image/Built-In Slideshow
For those customers who have already purchased Venture -- thank you. Please note that the code for a single banner image has been replaced with using the code for the new 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 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:

<div id="myExtraContent1">
<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/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.


<div id="myExtraContent1">
<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. If done correctly, the entire code will have a pink highlight. 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.
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 Background Image. 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.)
Logo
Venture offers two placements for a logo: centered inside the V, or if using the Tittle and Logo Above style option, just to the left of the title. For proper display, logos should not exceed a height of 95px. Length of logos may vary.
Responsive Theme + 3rd Party Products
Venture is a responsive theme. As a result, it is imperative to ensure that any stacks used with Stacks 2, or any other 3rd party products are responsive as well. If not, these products may not display or function properly.
Custom Containers
Download each of the three snippets included with the theme by double-clicking on each one:

#1. Venture MainTitle/Header Container
#2. Venture Text Title Container
#3. Venture Text Container

Once the snippets have been installed, click on the snippets icon and simply drag the desired snippet to the content area of your styled text or stacks page. Replace the text between the code with your text and switch to preview for instant results. Spacing is critical to how these containers display. To re-create a container with a title header, connect #2 and #3 by making sure there is no space between the end of the code and the beginning of the next code.
Social Icons
Venture 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.


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).



(For multiple social icons, repeat the above steps for each desired icon.) (For multiple social icons, repeat the above steps for each desired icon.)
Social Icon Table 1
Unknown


Social Icon Table 2

si2
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.
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/solution/categories/14470.