The following are simple tutorials to help you begin styling your site with some of the features you have seen in the Destiny preview site.


TOOLBAR NAVIGATION BULLETS

How do I add bullets to my links containing a drop-down menu as displayed through Destiny's "Style Options" and "RapidWeaver Pages"?

1. Add the following code just after your main navigation title:

Screen shot 2011-04-05 at 7.12.16 PM

2. The browser should render the following code automatically

3. Preview site and enjoy navigation bullets.

Screen shot 2011-04-02 at 6.45.15 PM

Screen shot 2011-04-02 at 6.46.04 PM

TOOLBAR NAVIGATION DESCRIPTION

How do I add descriptions to my navigation toolbar as displayed through Destiny's preview site?

1. Type the following code just after your main navigation title:

Screen shot 2011-04-13 at 10.55.55 AM

2. Replace "Sample Title" with your own description.

3. You may change the color of the description in Destiny's built-in Style Options under the "Website Colors" options found in the Page Inspector.

4. Preview your site and enjoy your navigation toolbar link descriptions.

Screen shot 2011-04-02 at 6.50.01 PM

JQUERY DROPDOWN MENU

How do I create an animated drop down menu as displayed through the "Style Options" link?

1. Open your Page Info found in the top right hand corner of Rapidweaver.

2. Click on the "Styles" button and locate, "Toggle jQuery."

3. Click on BOTH the "Enable jQuery 1.4.2" and "Smooth Drop Down Menu..." check boxes (see figure 1).

4. Preview your page and enjoy custom designer line breaks.

*Figure 1
how to jquery

PAGE FADE IN EFFECT

How do I enable my website page fade in effect as displayed through Destiny's "Features" page?

1. Open your Page Info found in the top right hand corner of Rapidweaver.

2. Click on the "Styles" button and locate, "Toggle jQuery."

3. Click on the "Enable jQuery 1.4.2" and "Enable jQuery Fade In Script" and "Fade In (requires Fade In...)" check boxes (see figure 1).
* 3 boxes will be checked in total to have the page fade in effect.

4. Preview your page and enjoy a modern jQuery powered fade in effect.

*Figure 1
how to fade

IMPORT SYMNIVO SLIDESHOW

How do I create an animated slide show effect on the banner image as displayed on the "Features" page?

1. You can create the slideshow effect by using the
SymNivo (SymphoniP) and PlusKit (Loghound) plug-in.

2. Create a slideshow page using symNivo and simply name the page, "symNivo." Secondly, add a Plus Kit page just below your slideshow plug-in page.

slideshow 1

3. Add your images to the symNivo page and open the setup options for your slideshow.

4. At a 960 page width, set the banner image dimensions by setting the Width to: 937 and the Height to: 257. Next set the Extra Content Area to: 1. * Be sure to un-click "Load jQuery" as you should have already enabled jQuery through the page's general style options.

slideshow 2

* The "Enable Box Shadow" option has been disabled in the "Advanced" tab.

5. Go to your Plus Kit page and disable the "Show in Menu" option which can be found under the General tab in the Page Inspector so that the page does not appear in your navigation menu. Remember, the Plus Kit will add import page functionality to your entire RapidWeaver project.

slideshow 3


6. Add your slideshow into your primary page's banner area by typing the following code into that page's Sidebar panel:

slideshow 4

7. Preview your page and enjoy your banner slideshow.

BANNER/FEATURE IMAGE

How do I edit the Banner/Feature Image?

1. You can change the banner/feature image by using the RW Multitool.

2. Visit and download the
RW Multitool.

3. Open the RW Multitool, select the Revolve theme (see figure 1).

4. Customize your banner by dragging and dropping your image into the window, and save.

5. Preview your page and enjoy your banner/feature image.

*Figure 1

Screen shot 2011-02-11 at 6.14.55 PM

CONTAINER SHADOWS

How do I display a shadow around my banner image and sidebar container as displayed in Destiny's "Features" page?

1. Open your Page Info found in the top right hand corner of Rapidweaver.

2. Click on Header, in between the Sidebar and Styles tabs.

3. Click on the CSS button which will allow you to enter Custom CSS.

4. Copy and paste the following code into the text box (see figure 1):

#featureImg, #sidebarContainer {
-moz-box-shadow: 1px 1px 5px #686868;
-webkit-box-shadow: 1px 1px 5px #686868;
box-shadow: 1px 1px 5px #686868;
}

5. Preview your page and enjoy your CSS 3 shadows.
*Shadows do not display in ie7 and ie8


Screen shot 2011-04-02 at 1.50.45 PM

PHOTOS THUMBNAIL BORDERS

How do I display subtle white borders around my thumbnail images as displayed in Elevation's "Photos" page ?

1. Open your Page Info found in the top right hand corner of Rapidweaver.

2. Click on Header, in between the Sidebar and Styles tabs.

3. Click on the CSS button which will allow you to enter Custom CSS.

4. Copy and paste the following code into the text box (see figure 1):

.thumbnail-wrap {
border: 4px solid #fff;
}

5. Preview your page and enjoy your thumbnail borders.

*Figure 1
how to borders

* Theme modification is not supported by BLT Design Support- Custom CSS added to RapidWeaver is performed at the user's discretion.
** Banner images are not included with the purchase of Destiny.