Hints, Tips and CSS Code

Prior to the release of Rapidweaver 5 there was a maximum of 32 CSS Styles links per web-page (including plug-in CSS Styles). This was due to a limitation in MSIE. So we had reduce the number of CSS Styles we wanted to only the top 25 most useful/visible styles (we really dislike Internet Explorer). However, with the release of rapidweaver 5 this limitation has been removed because RW5 is able to consolidate all of the CSS styles into a couple of css files. Most of the CSS Styles on this page have now been included in the Rapidweaver 5 Version of the Options Theme (Version 1.1.4)

This page has been left for Rapidweaver 4 users.

To use the code in any page select the:
  1. "page Info" icon and then select the
  2. "Header" icon and then select the
  3. "CSS" Tab.
The code below should be copied and pasted in the Custom CSS panel.

Automatic File Download

Automatic Download:
If you want to automatically download a file when a page is accessed then download and add the meta-tag below to your page header.
To download the snippet click HERE.
How To Use it
Download and extract the archive, then double click the snippet file to install it in your snippets.
Copy (Press " 5" to view the snippets) or type the text into the Page Info / Page Inspector. Enter the above text into the "Meta Tags" section (not the CSS section).

Refresh Mata-tag:
content: Time in seconds until the file is downloaded (currently set to 1).
url: The file path and name of the file to be downloaded (currently set to "INSERT FILE NAME AND PATH HERE")

Robots Meta-tag:
content: The "noindex,nofollow" tells the search engines not to add the page to their search engine list (protects the filepath).

Automatic Image Re-size

Automatic Image Re-size:
image-left {width: 40%;}
.image-right {width: 40%;}
.imageStyle {width: 100%;}

Curves

Curves:
These CSS3 commands make the menu and sidebar curved
Change the 5px for whatever radius you want.

#sidebarContainer {
-webkit-border-radius: 5px; /* (Webkit/Safari) */
-moz-border-radius: 5px; /* (Firefox) */
border-radius: 5px; /* (Standard) */
}

#sidebarContainer #sidebar {
-webkit-border-bottom-left-radius: 5px; /* (Webkit/Safari) */
-webkit-border-bottom-right-radius: 5px; /* (Webkit/Safari) */
-moz-border-radius-bottomleft: 5px; /* (Firefox) */
-moz-border-radius-bottomright: 5px; /* (Firefox) */
border-bottom-left-radius: 5px; /* (Standard) */
border-bottom-right-radius: 5px; /* (Standard) */
}

Font Scaling

Font Scaling:
Scales the fonts over the whole page
50%= Half Size
100%= Normal Size
200%= Double Size

body {
font-size: 70%;
}

Heading Font Sizes

Heading Font Sizes:
To alter the heading font sizes in the content or sidebar area simply change the default settings (shown below) to your desired size.
h1 {font-size: 2.000em;} /* 32px */
h2 {font-size: 1.800em;} /* 29px */
h3 {font-size: 1.400em;} /* 22px */
h4 {font-size: 1.200em;} /* 19px */
h5 {font-size: 1.000em;} /* 16px */
h6 {font-size: 0.875em;} /* 14px */
#sidebarContainer h1 {font-size: 1.600em;} /* 26px */
#sidebarContainer h2 {font-size: 1.400em;} /* 22px */
#sidebarContainer h3 {font-size: 1.200em;} /* 19px */
#sidebarContainer h4 {font-size: 1.000em;} /* 16px */
#sidebarContainer h5 {font-size: 0.875em;} /* 14px */
#sidebarContainer h6 {font-size: 0.750em;} /* 12px */

Horizontal Line Line Styles

The code for making a horizontal line is:

The code below describes how that line will look on a page.

Dashed HR Line:
#sidebarContainer #sidebar hr,
#contentContainer hr {
border-top-style: dashed;
border-top-width: 1px;
}

Dotted HR Line:
#sidebarContainer #sidebar hr,
#contentContainer hr {
border-top-style: dotted;
border-top-width: 1px;
}

Double HR Line:
#sidebarContainer #sidebar hr,
#contentContainer hr {
border-top-style: double;
border-top-width: 1px;
}

Groove HR Line:
#sidebarContainer #sidebar hr,
#contentContainer hr {
border-top-style: groove;
border-top-width: 1px;
}

Inset HR Line:
#sidebarContainer #sidebar hr,
#contentContainer hr {
border-top-style: inset;
border-top-width: 1px;
}

Outset HR Line:
#sidebarContainer #sidebar hr,
#contentContainer hr {
border-top-style: outset;
border-top-width: 1px;
}

Ridge HR Line:
#sidebarContainer #sidebar hr,
#contentContainer hr {
border-top-style: ridge;
border-top-width: 2px;
}

Solid HR Line:

#sidebarContainer #sidebar hr,
#contentContainer hr {
border-top-style: solid;
border-top-width: 1px;
}

Menu Font Align

Menu Font Align:
Aligns the font in the menu to the left, center or right

Menu Font Align: Left
#navcontainer_1,
#navcontainer_2,
#navcontainer_3,
#navcontainer_4 {text-align: left;}

Menu Font Align: Center
#navcontainer_1,
#navcontainer_2,
#navcontainer_3,
#navcontainer_4 {text-align: center;}

Menu Font Align: Right
#navcontainer_1,
#navcontainer_2,
#navcontainer_3,
#navcontainer_4 {text-align: right;}

Menu Font Size

Menu Font Size:
This code alters the menu font size (select one)

#toolbar {font-size: 0.625em;/*10px=0.625em*/}

#toolbar {font-size: 0.700em;/*11px=0.7em*/}

#toolbar {font-size: 0.750em;/*12px=0.75em*/}

#toolbar {font-size: 0.800em;/*13px=0.80em*/}

#toolbar {font-size: 0.875em;/*14px=0.875em*/}

#toolbar {font-size: 0.950em;/*15px=0.95em*/}

#toolbar {font-size: 1.000em;/*16px=1.00em*/}

#toolbar {font-size: 1.050em;/*17px=1.05em*/}

#toolbar {font-size: 1.125em;/*18px=1.125em*/}

#toolbar {font-size: 1.200em;/*19px=1.20em*/}

#toolbar {font-size: 1.250em;/*20px=1.25em*/}

Rapidalbum Smooth Gallery

Rapidalbum Smooth Gallery:
We modified the smoothGallery template so that its' control/display panel size could be altered from the 640x480px which it is currently stuck at.
If you don't want to modify it yourself you can download Smoothgallery-aasd.zip file here.

The code below has been removed from the:
SmoothGallery.bundle/Contents/Resources/files/css/jd.gallery.css file.

/* @group Rapidalbum SmoothGallery */

#myGallery, #myGallerySet, #flickrGallery
{
width: auto;
height: 500px;
z-index:5;
border: 1px solid #000;
}

#flickrGallery
{
width: auto;
height: auto;
}

/* @end */

To use the modified template in other themes open up their styles.css file and search for:

/* @group Single Page (Photo view) */

then add the code after it:

To alter the dimensions add the following code to the Custom CSS panel.

#myGallery, #myGallerySet, #flickrGallery {height: 500px; /* Height of the Smooth Gallery panel*/}

Only the Height value needs to be changed (the width should now change automatically).
Use the page in "Setup" Button (bottom right) to alter everything else.

Sidebar Font Align

Sidebar Font Align:
Aligns the text in the sidebar to the left, center, right or justify.

Sidebar Font Align: Left
#sidebarContainer #sidebar {text-align: left;}

Sidebar Font Align: Center
#sidebarContainer #sidebar {text-align: center;}

Sidebar Font Align: Right
#sidebarContainer #sidebar {text-align: right;}

Sidebar Font Align: Justify
#sidebarContainer #sidebar {text-align: justify;}

SideHeader Font Align

SideHeader Font Align:
Aligns the text in the sidebar to the left, center, right or justify.

SideHeader Font Align: Left
#sidebarContainer .sideHeader {text-align: left;}

SideHeader Font Align: Center
#sidebarContainer .sideHeader {text-align: center;}

SideHeader Font Align: Right
#sidebarContainer .sideHeader {text-align: right;}

SideHeader Font Align: Justify
#sidebarContainer .sideHeader {text-align: justify;}

Translate-Site Icons

Translate-Site Icons:
To turn off the "Translate Web-site Icons" enter the following CSS code
#translate-site {display: none;}

Title and Slogan Glow

Title and Slogan Glow:
Makes the title and slogan glow


#pageHeader h1,
#pageHeader h2 {text-shadow: 0px 1px 0px #d6f51e;}

Transparent Background

Transparent Background:
Makes the background of page elements transparent

#pageHeader {background-color: transparent;}

#container,
#contentContainer,
#contentContainer #content {background-color: transparent;}

#footerContainer,
#footer,
#theme_copyright_message,
#breadcrumbcontainer ul {background-color: transparent;}