A Viator  :

Visit and download the RW Multitool here.
Open the RW Multitool, select the A Viator theme. All 20 banner images are ready for customization.

Customize your banner, save, and you're done.

For this you'll need a slideshow plug-in, SymNivo or WeaverPix are both great options, and you'll need Loghound's PlusKit plug-in. Once you have these, create a slideshow page with your slideshow plug-in, and give a it a speciific page name (this page name will be required later). After adding your pictures, open the setup or configure options for your slideshow.

You're now going to do 2 things. 1) Set the banner dimensions to match the A Viator banner size. 2) Set the Extra Content Area to "1", then disable the loading of jQuery. Using SymNivo for the example, and assuming your using the full site width, your setup panel should look like this:



* The Banner width it's going to be 20 pixels less than your chosen site width in the style options.
* I recommend going to the "Advanced" tab, and disabling the "Enable Box Shadow" option. This is not necessary.

Add a PlusKit page to your project. Then disable the "Show in Menu" option - under the General tab in the Page Inspector. This adds import page functionality to your whole RapidWeaver project ~ without it appearing in your navigation bar.

Now, to add your slideshow into another page's banner area, simply paste the code below into that page's Sidebar panel:
@import((slideshow-page-name))
Change the "slideshow-page-name" to your actual slideshow page name. Then highlight your code and select "Ignore Formatting" from RapidWeaver's "Format" options. This will make your code appear with a pink highlight when done.

* The "jQuery Enhance" Styles option must be enabled on the page you wish to import the slideshow.

After adding your import code into the sidebar, switch to Preview mode, and you now should see you slideshow appear in the A Vaitor banner area. From here, open your Page Inspector Styles panel, and under "Banner Image" select "X (slideshow)". Now your done, enjoy! There is also a video tutorial on the Slideshow Import Method - it's for another theme - but it might help if you have trouble understanding these instructions.

A Viator has a built-in extra content heading area, designed for text-only content. The "jQuery Enhance" under the "Tools" Styles panel must be enabled for this feature to work. To add content this area copy and paste the code below into your sidebar.
<div id="myExtraContent2"><h1>Custom Title</h1>Replace with your own custom text.</div>
After pasting the code, highlight the code and select "Clear Formatting" then "Ignore Formatting" under the Format options in RapidWeaver's menu bar. When done your code should look like:



And Preview mode should look like:



Simply change the text in between the html tags to create your own custom message.

If you want the text to rotate through your custom messages, simply use the code below - but follow the same process described above.
<div id="myExtraContent2">
<h1>Custom Title</h1>
<ul id="revolve">
<li>1st message. Replace with your own custom text.</li>
<li>2nd message. Replace with your own custom text.</li>
<li>3rd message. Replace with your own custom text.</li>
</ul>
</div>

Advanced: If you want the rotating text to link to your blog entry (for example), then allow formatting for just the text line - then use RapidWeavers built-in link tools on the text. Special thanks for James W. for coming up with the idea.





*IF you you are linking to a blog entry, remember the link will not work within RapidWeaver, but will work when published.

When adding RapidWeaver's Photo Album page, by default, the lightbox image viewer **is not** enabled. Simply enable this feature in the Page Inspector's Styles panels, under "Tools > Photo Album Lightbox". This feature is not automatically loaded conserve file size, increase page load speed, and help with browser compatibility. So it's recommended to only enable this feature when using the "Photo Album" page.

For most, the navigation works just fine being center aligned, but some might have a wide logo or many navigation titles causing an overlap. To help correct this, you can right align the navigation by pasting the code below into your custom css box:
.alignNav{ text-align: right}