HV RAINBOW and HV RAINBOW-DD MANUAL

! IMPORTANT

A. By default the sidebar is hidden! So content in the the sidebar will not show up in preview.
To enable the Sidebar go to the Theme Styles > Sidebar and choose an option.

B. Go to your Rapidweaver5 preferences, and ensure that the option Consolidate CSS files is enabled. With RW6 this option is enabled by default.
This makes exports of your project and uploading of your website faster and gives an improved Internet Explorer support too.

C. This theme works fine with Rapidweaver 4 and 5/6, and with all plugins and stacks. When you have questions about this theme feel free to post them on the RapidWeaver Forum (preferable), or drop me an email.
When you have questions about or issues with stacks or plugins (so not theme-related questions) please post them on the RW forums or send their developers an email.

D. This theme works fine in all modern browsers (IE7+, Safari, Firefox, Opera, Camino, etc.) and on your iPhone/Android and iPad/tablet.
IE7 and IE8 does not support the Breelight font. They will use the Tahoma Font.

E. You can choose 3 different breakpoints in the RAINBOW-DD theme:
768px (by default): on an iPad (portrait mode) the menu button shows up.
600px: on an iPhone the menu button shows up (for example when you've only a few menu items).
1024 px: on an iPad (landscape mode) the menu button shows up (when you have many menu-items).

F. What is Responsive Design?
Users no longer just browse the web with desktop computers. Users now use mobile phones, small notebooks, tablet devices such as iPad to access the web. So the traditional fixed width design doesn't work any more. Web design needs to be adaptive. The layout needs to be automatically adjusted to fit all display resolution and devices.
Narrow for example your browser with this page, or check it on with iPhone/iPad (portrait mode)/Android device. Or have a look here.

WHAT'S IN THE MANUAL
1. How to install a theme
2. Applying Custom CSS Code
3. Logo
4. Fluid images with the flexible tag
5. Add your own Background Pattern to the body
6. Add your own horizontal strip
7. Add your own Background Pattern to the vertical menu
8. When using the RapidCart plugin
9. Font Awesome icons before the Page Title
10. Replace the Menu or Close icon • Rotation • Fixed Menu
11. Searchbox
12. TextTime script
13. Date (US and European) script
14. Mail a Friend script
15. ExtraContent
15A. ExtraContent8: Image or Slide Show
16. Headings (h1, h2, h3, h4, h5, h6 and fonts)
17. Hide 'n' Show stack
18. Font Awesome Icons
19. More CSS
     More box-shadow to the Menu
     Line-Height Content
     Letter-Spacing
     Font-size of the Footer
     Font-Size Blog Entry
     Background Colour Vertical Menu Strip (with bgStretcher stack)
     Center the Content
     Center the ExtraContent
     Hide Border Bottom Menu
     Contact Form stack in an ExtraContent area
     Contact Form stack in the Content
     Hide the Horizontal Stitching Lines
     Contact Form Background input fields
     Underline links
     Hide Title and Slogan
     Make the space below the footer smaller
     Smaller or Wider submenu with the Rainbow-DD theme




1. How to install a theme
To install the HV-RAINBOW or HV-RAINBOW-DD theme, you have 2 options. You can double click on the theme to install it automatically, or drag the theme into the Stacks folder located within the Application Support Rapidweaver folder.
This folder can be found by going to the (username) / Libary / Application Support /RapidWeaver folder.
With Lion: Apple has hidden the user’s Library folder to casual viewers, in an attempt to stop new Mac users screwing their machines up. To access it, in the Finder go to the ‘Go’ menu and hold down the Option (Alt) key; the Library folder will appear as a choice.

Then restart RapidWeaver: the new theme will appear in the themes drawer. The theme name in the theme drawer will be HV-NOTE-PAD. The reason for this is that I am adding my initials, HV, to the front of the theme names so that all my themes will be conveniently grouped together in your theme drawer and will be easier for you to find in the future.
I've personally become good at creating a folder for every theme, naming it the same as the theme and putting all the ReadMe files, snippets, etc that come with the theme into this folder. I also include an extra copy of the theme in case I ever have to re-install.  I place all these folders in another folder.

2. Applying Custom CSS code
The HV-RAINBOW and HV-RAINBOW-DD themes have a very useful 'custom.css' file within the theme contents. Into this file, you can enter custom CSS code. Unlike the Custom CSS box under the Page Inspector in RapidWeaver, code entered into the custom.css file gets applied to all pages and enables you to edit CSS using an editor like CSSEdit, Espresso or the free TextWrangler.

To open the custom.css file, right click (or CTRL + Click) the theme preview icon in RapidWeaver and select "Reveal Theme Contents in Finder". In the Contents you'll see different files and folders. Open the custom.css file in your preferred code editor, paste the code(s) in it and save the file. If you only need to apply custom CSS code to a single page, enter this code under the Page Inspector custom CSS box as normal (Page-Inspector > Header > CSS).

When you don't see any difference after adding the code to this custom.css file and saving it, add a space and !important to it.
Example:

Not

#pageHeader h1 {font-size: 36px;}

but

#pageHeader h1 {font-size: 36px !important;}


3. Logo
The Title and Logo have a link with the index.html page of your website. Whatever base url is inserted in RapidWeaver > Site Setup > Website will be the link.
Drag your Logo into the Site Setup > Logo area. Your Logo shows up above the Title and Slogan. Any size is possible.
In the Theme Styles > Miscellaneous section you can hide the logo on a page. In the Theme Styles > Title, Slogan, Logo and Footer Position section you can put the logo at the right side of the header. Better don't use large logos with the right position.

Only JPG, PNG or GIF images are allowed!
You can also drag your logo in the Content or Sidebar, or in an ExtraContent area (EC1 or EC2). Now your logo has no link to the index.html, so you have to make a link manually.

When your logo is large, you can make it fluid with this in the Custom CSS:

#pageHeader img  {height: auto;width:35%;}

@media screen and (max-width:600px){
#pageHeader img  {height: auto;width:50%;}}

These numbers (35% and 50%) are optional. You can try others.

4. Fluid images with the flexible tag
Example 1
Example 2

Built-in is an option to make your images fluid, whether they are in the content, the sidebar or ExtraContent (anywhere in your page). How to do this:

• Option 1: Drag your image in the content or sidebar, double-click on it or select it and go to RW > View > Show Media Editor. Now the Media Editor shows up. Only add the word flexible in the input field of the Alt Tag in the Media Editor (see image left) or in an image stack:

media_editor2

To see it in action, open your webpage on a desktop browser and slowly make the browser narrower and wider... Or have a look on your iPhone or iPad.

• Option 2: When your image is on the server (here's a nice tutorial about image warehousing for RapidWeaver projects), simple copy&paste this in the content or sidebar as plain text:

<img src="http://www.website.com/images/image1.jpg" alt="flexible">

So, with alt="flexible" behind the image link. Replace the name of the image with the name your own image.

Test a working example in your website and have a look in preview.

5. Add your own Background Pattern to the body
By default you can choose a background color or 10 different background-patterns in the Theme Styles > Background.

How to add your own pattern:
Step 1: Download a pattern from the internet (see below).
Step 2:
RAINBOW theme: Add your pattern, for example pattern1.jpg, to the Resources (RapidWeaver 5) and add this to the Custom CSS (Page-Inspector > Header > CSS, not in the custom.css file):

body {background: url(%resource(pattern1.jpg)%) repeat left top;}

When you've selected a fixed Menu (see Chapter 10) paste this:

body,#ec4strip {background: url(%resource(pattern1.jpg)%) repeat left top;}


RAINBOW-DD theme: Add your pattern, for example pattern1.jpg, to the Resources (RapidWeaver 5) and add this to the Custom CSS (Page-Inspector > Header > CSS, not in the custom.css file):

body,#stiksel1 {background: url(%resource(pattern1.jpg)%) repeat left top;}

When you've selected a fixed Menu and EC4 enabled (see Chapter 10) paste this:

body,#ec4strip,#stiksel1 {background: url(%resource(pattern1.jpg)%) repeat left top;}

Step 3: With a light background pattern I would select the option Theme Styles > Background
With a dark background pattern I would select the option Theme Styles > Background body,#menu,#stiksel1,.menu ul ul

Any pattern name is possible, but be sure that the name of the pattern (so the green text above) is exactly the same as the name in the css. Don’t use spaces in an image name.
More patterns:
http://subtlepatterns.com
http://www.squidfingers.com/patterns/
http://www.kollermedia.at/pattern4u/ and many other websites.

6. Add your own horizontal strip
By default you can choose 10 different strips above the menu in the Theme Styles > Background.
This strip is made with tiled images. Any image is possible. It's fun to try this.
How to add your own strip:
Step 1: Make your own strip with an image editor. The strip must be at least 6px tall. Any width is possible.
Step 2: Add your strip, for example mystrip.jpg, to the Resources (RapidWeaver 5) and add this to the Custom CSS (Page-Inspector > Header > CSS, not in the custom.css file):

#strip {background: url(%resource(mystrip.jpg)%) repeat left top;}


Any strip name is possible, but be sure that the name of the strip (so the green text above) is exactly the same as the name in the css. Don’t use spaces in an image name. In the download file is a strip image: strip11.png. Try it.
You can even add an animated gif to the strip.

7. Add your own Background Pattern to the Vertical Menu strip
By default you can choose a background color in the Theme Styles > Menu Font-Size and Colours.
When you prefer a background pattern do this:

Step 1: Download a pattern from the internet (see below).
Step 2:
RAINBOW theme: Add your pattern, for example pattern1.jpg, to the Resources (RapidWeaver 5) and add this to the Custom CSS (Page-Inspector > Header > CSS, not in the custom.css file):

#menu {background: url(%resource(pattern1.jpg)%) repeat left top;}

And to the submenu too:

#menu,#menu,.nav ul li {background: url(%resource(pattern1.jpg)%) repeat left top;}

And to body, menu and submenu:

#menu, body,#menu,.nav ul li {background: url(%resource(pattern1.jpg)%) repeat left top;}

RAINBOW-DD theme: Add your pattern, for example pattern1.jpg, to the Resources (RapidWeaver 5) and add this to the Custom CSS (Page-Inspector > Header > CSS, not in the custom.css file):

#desktopmenu,#menu,#ec4strip,#stiksel1,.menu ul ul {
background: url(%resource(pattern1.jpg)%) repeat left top;}

And to the mobile submenu too:

#desktopmenu,#menu,#ec4strip,#stiksel1,.menu ul ul,.nav ul li {
background: url(%resource(pattern1.jpg)%) repeat left top;}

And to body, menu and desktop and mobile submenu:

body,#desktopmenu,#menu,#ec4strip,#stiksel1,.menu ul ul,.nav ul li {
background: url(%resource(pattern1.jpg)%) repeat left top;}

Any pattern name is possible, but be sure that the name of the pattern (so the green text above) is exactly the same as the name in the css. Don’t use spaces in an image name.
More patterns:
http://subtlepatterns.com
http://www.squidfingers.com/patterns/
http://www.kollermedia.at/pattern4u/ and many other websites.

8. When using the RapidCart plugin
When using the RapidCart plugin, the menu and close button are disappeared.
To avoid this, paste this in the Custom CSS of a RapidCart page (not in the 'custom css' file in the Contents of the theme!):
RAINBOW theme:

#menu{top:40px;}
.menu_btn,.close, .close [class^="icon-"] {top:55px;}
.menu_btn:active {top: 56px;}

@media screen and (max-width:600px) {
.menu_btn {top:57px; }
.menu_btn:active {top: 58px;}}


RAINBOW-DD theme:

#menu{top:40px;}
#desktopmenu {top:51px;}
#ddshadow{top:85px;}
.menu_btn,.close, .close [class^="icon-"] {top:57px;}
.menu_btn:active {top: 58px;}


And with the EC4 in the Rainbow-DD theme enabled:

#menu{top:40px;}
#desktopmenu {top:95px;}
#ddshadow{top:129px;}
.menu_btn,.close, .close [class^="icon-"] {top:57px;}
.menu_btn:active {top: 58px;}


9. Font Awesome Icon before the Page Title
By default there is no FontAwesome icon before a page Title. Personally I don't like the use of them in a menu. But that's up to you. Read Chapter 17 for more info about these icons. Image below: left without, and right with icons:

menu_icons

It's very simple to add an icon before a Page Title:

Paste this before the Page Title for a Home icon:

<i class='icon-home'></i>

Note: the FontAwesome script is appearing in the browser title when the browser title is empty.
To hide it put a title in the Page-Inspector > Browser Title (see image below):

browser_title

IMPORTANT: When you copy a Font Awesome code be sure to replace the quotation marks " with ' when you use the built-in SiteMap page in your project too.
So not <i class="icon-home"></i> but <i class='icon-home'></i>

PADDING-RIGHT: By default the space (padding-right) between the icon and page-title is 10px.
RAINBOW theme: when you want a smaller or larger padding paste this in the Custom CSS:

#menu a [class^="icon-"],#menu a .fa {padding-right: 8px;}

(8px is an example).
RAINBOW-DD theme: when you want a smaller or larger padding paste this in the Custom CSS:

#menu a [class^="icon-"],#menu a .fa,.menu a [class^="icon-"],.menu a .fa {padding-right: 8px;}

(8px is an example).

RAINBOW theme: When you want to hide the icons on a page, paste this in the Custom CSS:

#menu a [class^="icon-"],#menu .fa { display:none;}

RAINBOW-DD theme: When you want to hide the icons on a page, paste this in the Custom CSS:

#menu a [class^="icon-"],#menu .fa,.menu a [class^="icon-"],.menu .fa { display:none;}


10. Replace Menu or Close Icon • Rotation • Fixed Menu
IMPORTANT:
• By default the menu icon of the RAINBOW theme is an arrow-down Font Awesome icon, the RAINBOW-DD theme has a reorder icon by default (only visible on your mobile or when you make your browser window narrower). Hovering (or clicking) this button in the RAINBOW theme shows a clockwise rotation. You can disable this rotation in the Theme Styles > Miscellaneous > Hide Rotating Menu Hover Button. This option is not available in the RAINBOW-DD theme.
• By default the menu appears at the right side. When you've selected in the Theme Styles > Menu Visibility and Position that the menu should appear at the left side it could be nice to rotate the menu-icon counter clockwise (Theme Styles > Miscellaneous > Menu Hover Button rotates Counter Clockwise). This option is not available in the RAINBOW-DD theme.
• When you enable in theTheme Styles > Miscellaneous > Menu Hover PulsatingFont-Awesome Button a pulsating button shows up. This option is not available in the RAINBOW-DD theme.

SMALLER MENU ICON
By default the font-size of the menu-icon is 36px. When you want a smaller menu-icon, for example 30px, paste this in the Custom CSS:

.menu_btn { font-size: 30px; top:13px; }
.menu_btn:active {top: 14px;}

With 24px:

.menu_btn { font-size: 24px; top:17px; }
.menu_btn:active {top: 18px;}

ANOTHER MENU ICON
When you don’t like the current arrow-down icon, choose any other icon, for example the reorder icon or any of the other 302 Font-Awesome icons (see chapter 18).
RAINBOW theme: Paste this in the Custom Header (Page-Inspector > Header > Header) to hide the arrow down icon and to show for example the reorder icon:

<body><style>i.icon-circle-arrow-down {display: none !important;}</style>
<div class="menu_btn"><i class="
icon-reorder"></i></div></body>

RAINBOW-DD theme: Paste this in the Custom Header (Page-Inspector > Header > Header) to hide the reorder icon and to show for example the arrow-down icon:

<body><style>i.icon-reorder {display: none !important;}</style>
<div class="menu_btn"><i class="
icon-circle-arrow-down"></i></div></body>

So only replace the name of the icon (red here) with the name of another icon. Do not remove the quotation marks and don’t change anything to the blue text!
Choose an icon-colour in the Theme Styles > Menu Font-Size and Colour.
In the Theme Styles > Miscellaneous section you can hide the rotating effect of the menu button.
Internet Explorer 7, 8, 9 and 10 don't support this rotating effect.

WORD
RAINBOW theme: When you would like to replace the arrow-down icon with a text, for example MENU, paste this in the Custom Header (Page-Inspector > Header > Header):

<body><style>i.icon-circle-arrow-down {display: none !important;}</style>
<div class="menu_btn">
MENU</div></body>

RAINBOW-DD theme: When you would like to replace the reorder icon with a text, for example MENU, paste this in the Custom Header (Page-Inspector > Header > Header):

<body><style>i.icon-reorder {display: none !important;}</style>
<div class="menu_btn">
MENU</div></body>

So only replace the icon code with the a word. Do not remove the quotation marks and don’t change anything to the blue text!

Additionally paste this in the Custom CSS when you prefer a smaller font-size, for example 30px:

.menu_btn { font-size: 30px; top:13px; }
.menu_btn:active {top: 14px;}

@media screen and (max-width:600px) {
.menu_btn {font-size: 24px; top:17px; }
.menu_btn:active {top: 18px;}}

Or 24px:

.menu_btn { font-size: 24px; top:16px; }
.menu_btn:active {top: 17px;}

@media screen and (max-width:600px) {
.menu_btn {font-size: 20px; top:19px; }
.menu_btn:active {top: 20px;}}

Choose a color in the Theme Styles > Menu FontSize and Colours > Menu Open Button.

WORD and ICON

menu_iconfai

You can add a font-awesome icon behind (or before) a text.
RAINBOW theme: To do this paste for example this in the Custom Header (Page-Inspector > Header > Header):

<body><style>i.icon-circle-arrow-down {display: none !important;}</style>
<div class="menu_btn">
MENU <i class="icon-align-justify"></i></div></body>

Or this with the default icon (the arrow-down):
<body><style>i.icon-circle-arrow-down {display: none !important;}</style>
<div class="menu_btn">
MENU <i class="fa fa-chevron-circle-down"></i></div></body>

When you want the word behind the icon paste this:
<body><style>i.icon-circle-arrow-down {display: none !important;}</style>
<div class="menu_btn">
<i class="icon-align-justify"></i> MENU</div></body>

Or this with the default icon (the arrow-down) before the text:
<body><style>i.icon-circle-arrow-down {display: none !important;}</style>
<div class="menu_btn">
<i class="fa fa-chevron-circle-down"></i> MENU</div></body>

RAINBOW-DD theme: To do this paste for example this in the Custom Header (Page-Inspector > Header > Header):

<body><style>i.icon-reorder {display: none !important;}</style>
<div class="menu_btn">
MENU <i class="icon-align-justify"></i></div></body>

When you want the word behind the icon paste this:
<body><style>i.icon-reorder {display: none !important;}</style>
<div class="menu_btn">
<i class="icon-align-justify"></i> MENU</div></body>

So only replace the icon code with the a word. Do not remove the quotation marks and don’t change anything to the blue text!

Additionally paste this in the Custom CSS when you prefer a smaller font-size, for example 30px:

.menu_btn { font-size: 30px; top:13px; }
.menu_btn:active {top: 14px;}

@media screen and (max-width:600px) {
.menu_btn {font-size: 24px; top:17px; }
.menu_btn:active {top: 18px;}}

Or 24px:

.menu_btn { font-size: 24px; top:16px; }
.menu_btn:active {top: 17px;}

@media screen and (max-width:600px) {
.menu_btn {font-size: 20px; top:19px; }
.menu_btn:active {top: 20px;}}

Choose a color in the Theme Styles > Menu FontSize and Colours > Menu Open Button.

REPLACE THE CLOSE BUTTON
When you don’t like the current close icon (X), choose any other icon, for example the arrow right icon or any of the other 302 Font-Awesome icons (see chapter 18).
Paste this in the Custom Header (Page-Inspector > Header > Header) to hide the X icon and to show for example the circle-arrow right icon:

<body><style>i.icon-remove {display: none !important;}</style>
<div class="close">
<i class="icon-circle-arrow-right"></i></div></body>

So only replace the name of the icon (red here) with the name of another icon. Do not remove the quotation marks and don’t change anything to the blue text!

FIXED MENU
RAINBOW theme theme: When you enable the button Menu, Close Button and EC4 Fixed Position in the Miscellaneous section of the Theme Styles (see image below), the upper part of is fixed when scrolling down. Now the Menu and Close button ánd the EC4 is always visible.

fixed

The background of this horizontal strip is the selected background pattern or color in the Theme Styles without the background gradient..
When you want another background color paste this in the Custom CSS:

#ec4strip {background-image: none; background-color: #DEDDD9;}

#FF0000 is the HTML color for red. More about colorcodes.
• With the RAINBOW-DD theme it's a bit different: select a fixed position in Theme Styles > ExtraContent4 and Colors • Menu and EC4 Fixed Position.
With the EC8 enabled you have to select the fixed position in Theme Styles > ExtraContent8 Image or Slide Show.

11. Searchbox
Example
You can add a searchbox in the sidebar, content or in any ExtraContent area (EC1, EC2), How to do this, for example in the EC1?

A. Add a RapidSearch Page to your project. Read the Rapidsearch Users Guide:
"In order for RapidSearch to generate a search form for you, it must know your "search engine ID", which can only be created via Google's website.
RapidSearch v5.0 has a button in the main window that, when clicked, will open your browser and take you to Google where you can create your custom search engine. Once you've done so, copy and paste the search engine ID into RapidSearch. You can then use the plugin just like you have in the past, although some options have been changed (and we'll continue to update them) to match the new Google API.
Please also keep in mind that with the changes, the search field will not work in RW's Preview mode until you have first published your site".


B. Name the RapidSearch page folder for example "search". And then, paste this code as plain text (RW > Edit > Paste as Plain Text) in the content or sidebar:

<!-- Replace the url below with the url of your RapidSearch page--> <!-- When you prefer another word for Search replace it by your own word or by a FontAwesome icon. -->
<form action="http://www.url-of-your-website.com/search" method="get"> <fieldset> <input type="text" name="q" value=""/> <input type="submit" value="Search"/>
</fieldset> </form>


C. When you put this code between <div id="myExtraContent1"> and </div> it shows up in the EC1 area at the bottom of the menu strip (see Chapter 15).

Another option is to put the code in the free ExtraContent stack and enable 1 in the settings of this stack.
Notes:
• Do not add index.html or index.php because for some reasons RapidSearch won't work with the absolute url.
• When you add the tag <br> at the end of the line <input type="text" name="query" value=""/> the word ‘Search’ goes to the next line.

So it will be this:

<!-- Replace the url below with the url of your RapidSearch page--> <!-- When you prefer another word for Search replace it by your own word or by a FontAwesome icon -->
<form action="http://www.url-of-your-website.com/search" method="get"> <fieldset> <input type="text" name="q" value=""/>
<br> <input type="submit" value="Search"/>
</fieldset> </form>


• Important: Highlight the entire code and click Clear Formatting, then Ignore Formatting under Format at the top left of your screen. That pinkish hue means that portion has been marked as “Ignore formatting”.
Replace myExtraContent1 with myExtraContent 2, myExtraContent 3, myExtraContent 4 or myExtraContent 5 in the code above when you prefer it in another ExtraContent area.

D. When you would like to replace the word 'Search' with a FontAwesome icon (see image below), first replace the word Search with this &#xf002;

search_icon

So it will be this:

<form action="http://www.url-of-your-website.com/search" method="get"> <fieldset> <input type="text" name="query" value=""/> <input type="submit" value="&#xf002;"/>
</fieldset> </form>


• Important: Highlight the entire code and click Clear Formatting, then Ignore Formatting under Format at the top left of your screen. That pinkish hue means that portion has been marked as “Ignore formatting”.

And now paste this in the Custom CSS for a bigger font-size (16px is an example):

fieldset input[type="submit"] {font-size: 16px !important;}


12. TextTime script
Example
Paste the code below as plain text (RW > Edit > Paste as Plain Text) in the Sidebar or Content. You can replace the names of the months and the days in your own language. Do not remove the quotation marks!

<script language="JavaScript">

function number(x) {
if (x==1) return "one"; if (x==2) return "two"; if (x==3) return "three";
if (x==4) return "four"; if (x==5) return "five"; if (x==6) return "six";
if (x==7) return "seven"; if (x==8) return "eight"; if (x==9) return "nine";
if (x==10) return "ten"; if (x==11) return "eleven"; if (x==12) return "twelve";
return x; //default
}
function ishtime(h,m) {
h = number(h)

<!-- Below you can translate the text in your own language -->
if (m<=3 || m>57) return h+" o'clock";
if (m<=7) return "five past "+h;
if (m<=12) return "ten past "+h;
if (m<=17) return "quarter past "+h;
if (m<=23) return "twenty past "+h;
if (m<=28) return "twenty-five past "+h;
if (m<=33) return "half past "+h;
if (m<=38) return "twenty-five to "+h;
if (m<=43) return "twenty to "+h;
if (m<=48) return "quarter to "+h;
if (m<=53) return "ten to "+h;
if (m<=58) return "five to "+h;
return "h:m";
}
function daytime(h) {

<!-- Below you can translate the text in your own language -->
if (!h || h>21) return " at night"
if (h<12) return " in the morning";
if (h<=17) return " in the afternoon";
return " in the evening"; // default
}
function ish(h,m) {
if (!h && !m) {
time = new Date()
h = time.getHours()
m = time.getMinutes()
}
z = daytime(h);
h = h % 12 // fix to 12 hour clock
if (m>57 && time.getSeconds()>30) m++;
if (m>60) m=0
if (m>33) h++
if (h>12) h = 1
if (h==0) h = 12

<!-- Below you can translate the text in your own language -->
return "It's now about "+ishtime(h,m)+z+"."
}document.writeln(ish().fontcolor(""),"<P>")

</script>


Important: select the complete code and go to RapidWeaver > Format > Ignore Formatting. That pinkish hue means that portion has been marked as “Ignore formatting”.

When you put this code between <div id="myExtraContent1"> and </div> it shows up in the EC1 area at the bottom of the menu strip (see Chapter 15).

Another option is to put the code above in the free ExtraContent stack and choose 1 in the settings of this stack. Replace myExtraContent1 with myExtraContent 2, myExtraContent 3, myExtraContent 4 or myExtraContent 5 in the code above when you prefer it in another ExtraContent area.

13. Date (US and European) script
Example

Paste the code below as plain text (RW > Edit > Paste as Plain Text) in the Sidebar or Content when you prefer a US Date:

<script>
var mydate=new Date()
var year=mydate.getYear()
if (year < 1000)
year+=1900
var day=mydate.getDay()
var month=mydate.getMonth()
var daym=mydate.getDate()
if (daym<10)
daym="0"+daym


<!-- Replace the name of the Months and Days below in your own language -->
var dayarray=new Array("Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday")
var montharray=new Array("January","February","March","April","May","June","July","August","September","October","November","December")
document.write(""+dayarray[day]+", "+montharray[month]+" "+daym+", "+year+"")
</script>


• Important: select the complete code and go to RapidWeaver > Format > Ignore Formatting. That pinkish hue means that portion has been marked as “Ignore formatting”.
The code explains which parts can be changed.

This is the code when you prefer a European Date:

<script>
var mydate=new Date()
var year=mydate.getYear()
if (year < 1000)
year+=1900
var day=mydate.getDay()
var month=mydate.getMonth()
var daym=mydate.getDate()
if (daym<10)
daym="0"+daym

<!-- Replace the name of the Months and Days below in your own language -->
var dayarray=new Array("Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday")
var montharray=new Array("January","February","March","April","May","June","July","August","September","October","November","December")
document.write(""+dayarray[day]+ " "+daym+" "+montharray[month]+", "+year+"")
</script>


• Important: select the complete code and go to RapidWeaver > Format > Ignore Formatting. That pinkish hue means that portion has been marked as “Ignore formatting”.
The code explains which parts can be changed.

When you put this code between <div id="myExtraContent1"> and </div> it shows up in the EC1 area at the bottom of the menu strip (see Chapter 15).

Another option is to put the code above in the free ExtraContent stack and choose 1 in the settings of this stack. Replace myExtraContent1 with myExtraContent 2, myExtraContent 3, myExtraContent 4 or myExtraContent 5 in the code above when you prefer it in another ExtraContent area.

14. Mail a Friend script
Paste the code below as plain text in the Sidebar or Content. The code explains which parts can be changed:

<!-- Replace the text "Click here to email this page to a friend" in your own text. In this example the word 'here' is a link -->
Click <A href="javascript:mailpage()">here<A> to email this page to a friend
<script language="javascript">
function mailpage()
{
<!-- Replace the text "Check out ". -->
mail_str = "mailto:?subject=Check out " + document.title;

<!-- Replace the text "I thought you might be interested in this page" and ". You can view it at" -->
mail_str += "&body=
I thought you might be interested in this page " + document.title;
mail_str += ".
You can view it at " + location.href;
location.href = mail_str;
}
</script>


You can replace the red and green parts in the code above in your own text. The word in green is the linktext.
Do not remove the quotation marks!

Important: select the complete code and go to RapidWeaver > Format > Ignore Formatting. That pinkish hue means that portion has been marked as “Ignore formatting”.

When you put this code between <div id="myExtraContent1"> and </div> it shows up in the EC1 area at the bottom of the menu strip (see next Chapter 15).

Another option is to put the code above in the free ExtraContent stack and choose 1 in the settings of this stack. Replace myExtraContent1 with myExtraContent 2, myExtraContent 3, myExtraContent 4 or myExtraContent 5 in the code above when you prefer it in another ExtraContent area.

15. ExtraContent
This theme is enabled with a very special feature called ExtraContent. ExtraContent allows you to add more content then RapidWeaver typically allows. It was developed by a small innovative group of RapidWeaver theme developers looking to extend the abilities of RapidWeaver beyond the two content areas typically allowed.

The RAINBOW theme has 7 EC areas (example): ExtraContent1, ExtraContent2, ExtraContent3, ExtraContent4, ExtraContent5 and ExtraContent6. The EC1 area is at the bottom the vertical Menu Strip, EC2 is below the menu, in the Menu Strip. I would use EC1 and/or EC2 for social media icons (with the built-in Font-Awesome icons or your own icons), a few words or a Date/Time stack, a Mail-A-Friend stack or whatever.
The RAINBOW-DD theme has no EC1 and EC2 area!
EC3 is between the footer and the Content.
EC4 is in the upper left corner (or with Menu Left selected in the upper left corner) and you can add a search box here, a date or time script or font awesome icons. The height of this area is 44px, so don’t use it for large images or many text. By default the EC4 is hidden. You can enable it in the Theme Styles > ExtraContent4 and Colours > Display EC4. When the EC4 is enabled, the breadcrumb is hidden!
EC5 is between header and content. You can use this for text (for example above a blog page), images, stacks, slideshows or whatever.
EC6 is below the Title/Slogan. You can use this for text (for example above a blog page), images, stacks (nice for a responsive columns stack), slideshows or whatever.
EC7 is below the footer. In the Theme Styles > Miscellaneous > Add ExtraContent7 Background Background Gradient... you can add a gradient to the EC7 background:

ec7

EC8: In the ExtraContent 8 area (optional above or below the Title/Slogan) you can add an image or slideshow which goes from edge to edge, so browser wide. Read more about this in Chapter 15A: ExtraContent8: Image or Slide Show

You can add ExtraContent in two ways:
1. With the free ExtraContent stack.
2. Or paste this in the Sidebar or Content area as plain text (RW > Edit > Paste as Plain Text) to show both EC areas* (and now - IMPORTANT -select the complete code and go to RapidWeaver > Format > Ignore Formatting. That pinkish hue means that portion has been marked as “Ignore formatting”):

<div id="myExtraContent1">This is the ExtraContent 1 container</div>
<div id="myExtraContent2">This is the ExtraContent 2 container</div>

<div id="myExtraContent3">This is the ExtraContent 3 container. Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper</div>
<div id="myExtraContent4">This is the ExtraContent 4 container</div>
<div id="myExtraContent5">This is the ExtraContent 5 container. Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper</div>
<div id="myExtraContent6">This is the ExtraContent 6 container. Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper</div>

<div id="myExtraContent7">This is the ExtraContent 7 container. Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper</div>

There are some EC snippets in the download file with a Plain Text, a 2-Column and a 3-Columns lay-out.
FONT-SIZE: By default the font-size of the ExtraContent areas is the same as the selected Sidebar font-size. When you prefer another size go to the Page-Inspector > Theme Styles > ExtraContent Font-Size and Colours, and select an option. Or paste this in the Custom CSS (11px is an example) (or in the 'custom css' file in the Contents of the theme, see Chapter 1a):

#myExtraContent1 {font-size: 11px;}

Or the EC2:

#myExtraContent2 {font-size: 18px;}


15A. ExtraContent 8: Image or Slide Show
By default the EC8 is hidden. In the ExtraContent 8 area (optional above or below the Title/Slogan) you can add an image or slideshow which goes from edge to edge, so browser wide. Just use a slide show stack for this for example the responsive FreeStyle slideshow stack (please make a contribution towards the development and support of FreeStyle2: http://www.stacks4stacks.com/contribute/), the responsive RefinedSldr stack, the responsive Superflex stack, or use the Weaverpix plugin (select ExtraContent8 in the settings of this plugin) with a responsive theme (Nivo is my favorite theme).
When you use a not-stacks page (Blog, Contact, Filesharing, etc.) import a slide show stack in any other page with the Pluskit plugin or with the Global Content stack .
You can import a Weaverpix page in another page too with the Pluskit plugin or with the Global Content stack too.
There maybe more stacks or plugins but I don't have them all. Some plugins (symNivo) are not responsive but will work fine.

Note about images: to achieve fast loading pages add only 72dpi images . Preferable save your images for the web (in Photoshop > File > Save for Web & Devices). This means that the image file will be as small as possible. In the demo site I use widescreen images. Most of them are 1600 x 400px. But any other size is possible.

1. Adding only an image: drag the image into the free free ExtraContent stack. Select EC8 in the settings of this stack. Drag an image into this stack. In the download file is an example image to start with.
Select in the Theme Styles > Show ExtraContent8 below Title and Slogan • Hide EC6 and Stitching Line or one of the other options. In Preview your browser wide responsive image shows up.

Be sure to uncheck ‘Constrain Width’ and ‘Constrain Height’ in the settings of the stack:

img


Another option: drag your image (for example the iphone.jpg image in the download file) into the Resources.
Now paste this in the Content or Sidebar as plain text (RW > Edit > Paste as Plain Text):
<div id="myExtraContent8"><img src="%resource(iphone.jpg)%"></div>

When your image is online (warehoused):
Now paste this in the Content or Sidebar as plain text (RW > Edit > Paste as Plain Text):
<div id="myExtraContent4"><img src="http://www.website.com/images/image.jpg"></div>

Don't forget to enable the button Show ExtraContent8 in the Theme Styles > ExtraContent 8 Image or Slide Show.

2. Adding a slide show stack: drag your slide show stack in the ExtraContent stack and select EC8 in the settings of your stack. Add your images as described in the tutorial of the stack. When the slide show stack has an option for showing thumbnails I would hide that option. But that's up to you.
Select in the Theme Styles > Show ExtraContent8 below Title and Slogan • Hide EC6 and Stitching Line or one of the other options. In Preview your browser wide responsive image shows up.

Be sure to uncheck ‘Constrain Width’ and ‘Constrain Height’ in the settings of the slide show stack:

img

3. Adding a slide show with the Weaverpix plugin: select EC8 in the settings of the Weaverpix plugin. Add your images as described in the tutorial of the plugin. When the selected theme has an option for showing thumbnails I would hide that option. But that's up to you. I'd prefer the Nivo theme, the Bootstrap Gallery, the Galleria, the Responsive Slideshow, the Blueberry Image Slider, or the wmuSlider theme in the Weaverpix plugin.
Select in the Theme Styles > Show ExtraContent8 below Title and Slogan • Hide EC6 and Stitching Line or one of the other options. In Preview your browser wide responsive image shows up.
Important: when you have selected the ExtraContent8 in the settings of the Weaverpix plugin, don't put text in the Content of this plugin. It will have a 100% width too. So put content in an ExtraContent area, for example in the EC5.

OPTIONS RAINBOW theme:
ec8

• With the option Theme Styles > Show ExtraContent8 below Title and Slogan • Hide EC6 and Stitching Line the EC6 and Stitching Line are disabled. The slide show/image shows up below the Title and Slogan.
Left Alignment of Title/Slogan/Logo is not possible with this option.
• When you have content in the ExtraContent6 area, select the option Theme Styles > Show ExtraContent8 below Title and Slogan the Slideshow is between the Title and Slogan and above the EC6.
Left Alignment of Title/Slogan/Logo is not possible with this option.
• With the option Theme Styles > Show ExtraContent8 above Title and Slogan the slide show/image shows up above the Title and Slogan. With some slideshow stacks it's better to increase the margin to the top with this in the Custom CSS (7px is an example):

#myExtraContent8 { top: 7px;}

The Menu Button covers the image/slideshow. Left Alignment of Title/Slogan/Logo is possible.

OPTIONS RAINBOW-DD theme:
rainbodd

• With the option Theme Styles > Show EC8 below Title and Slogan • Hide EC6 and Stitching Line the EC6 and Stitching Line are disabled. The slide show/image shows up below the Title and Slogan.
Left Alignment of Title/Slogan/Logo is not possible with this option.
• When you have content in the ExtraContent6 area, select the option Theme Styles > Show EC8 below Title and Slogan the Slideshow is between the Title and Slogan and above the EC6.
Left Alignment of Title/Slogan/Logo is not possible with this option.
• With the option Theme Styles > Show EC8 above Title and Slogan • ONLY with Menu Fixed Position the slide show/image shows up above the Title and Slogan ánd the menu is fixed!! The EC4 is hidden now!
• With the option Theme Styles > Show EC8 above Title and Slogan • ONLY with Menu and EC4 Fixed Position the slide show/image shows up above the Title and Slogan ánd the menu and EC4 area are both fixed!!

Effect: Display some shadow at the top of the image and a border at the bottom (select a color) here: Miscellaneous > Show EC8 Top Shadow and Border Bottom:

ec8bg

When you like some text below the image or slideshow, drag a text-stack (add a bit of padding!) in the ExtraContent stack too. Now paste this in the Custom CSS:

#myExtraContent8 {font-size: 12px; text-align: center; color: #FF0000;}

#FF0000 is the HTML color for red. More about colorcodes. 12px is an example.
16. Headings (h1, h2, h3, h4, h5, h6 and fonts)
The h1 to h6 tags are used to define HTML headings. You can find the here (select a word or text line and go to RW > Format > HTML > and choose Heading 1, 2, 3, 4, 5 or 6). Each Heading has a different font-size.
You can add another font to each tag too. For example when you've selected the h1 heading and would like the BREELIGHT font to the h1 tag. Paste this in the Custom CSS:

h1 {font-family: BreeLight;}

Or the BREEBOLD font to the h1 tag: (see this example)

h1 {font-family: BreeBold;}

Or the MUSEO-300 font to the h2 tag:

h2 { font-family: 'museo300-regular'; }

Or the MUSEO-700 font to the h2 tag:

h2 { font-family: 'museo700-regular'; }

Or the MUSEOSLAB-500 font to the h2 tag:

h2 {font-family: 'MuseoSlab500';}


17. Hide 'n' Show stack
By default the menu is closed. You can open it by hovering on the menu button or text in the upper right corner (or with Menu Left selected in the upper left corner).
RAINBOW theme: Move your mouse over the button in the Theme Styles > Menu Visibility > Show to open the menu immediately when opening a page (example).
• With the Hide 'n' Show stack (not included in the theme) you can set a delay when opening the menu (example). How to do this:
1. Select the option Theme Styles > Menu Visibility > Show
2. In the settings of the HnS stack (version 1.3.0) select this (image left) for a delayed opening of the menu: Theme Defintion > Rainbow Menu

hns

• Image right: select this (Theme Defintion > Rainbow Strip) when you want to show the horizontal header strip with a delay.

RAINBOW-DD theme:
• With the Hide 'n' Show stack (not included in the theme) you can set a delay when opening the desktop menu (example). How to do this:
1. Select the option Theme Styles > Menu Visibility > Show
2. In the settings of the HnS stack (version 1.3.0) select: Theme Defintion > Custom and paste this in the Content ID(s) field:
#desktopmenu,#ddshadow

18. Font Awesome Icons
The build-in Font Awesome Icons 3.2 and 4 are really fast and easy to use it anywhere in your website!
Make sure you have got CSS Consolidation turned on in RapidWeaver preferences (very important).If you see squares instead of icons, this is a sure-sign that you've not turned on consolidation, and therefore the links to the icons are broken.If you see squares instead of icons, this is a sure-sign that you've not turned on consolidation, and therefore the links to the icons are broken.

This page shows all Font Awesome 3.2 icons (supported by IE7+).
This page shows all Font Awesome 4 icons (not supported by IE7).
No stack or plug-in required to use Font Awesome in this theme.
As you can see the icons have different names! For example with the 3.2 icons the name of the camera icon is:
<i class='icon-camera'></i>
And with the Font Awesome 4 icons the name of the camera icon is this:
<i class='fa fa-camera'></i>

• START with your FIRST FONT AWESOME ICON
1. Paste this as Plain Text (RW > Edit > Paste as Plain Text) anywhere in your website (Sidebar, Content, Footer, Menu, Stacks, ExtraContent areas, etc.):

<i class='icon-camera'></i>
In Preview a camera icon shows up now:
camera

Be sure always to end with the </i> tag in the code above!
Replace the word icon-camera with for example icon-globe, icon-circle-arrow-right, icon-twitter, icon-heart or whatever. Do not remove the quotation marks! Find all names and icons here.

• ADD SPACE BEFORE or BEHIND an FONT AWESOME ICON
Add a bit space behind an icon with this character entity after each code &nbsp; , once or a few times. So for example:

<i class='icon-twitter'></i>&nbsp;&nbsp;

Or before the icon:
&nbsp;&nbsp;
<i class='icon-twitter'></i>

Add a bit space between two icons with this character entity between each code &nbsp; , once or a few times. So for example:

<i class='icon-twitter'></i>&nbsp;&nbsp;<i class='icon-apple-logo'></i>

• SIZE of the FONT AWESOME ICONS
• By default the font-size of these icons is the same as the selected font-size of Content, ExtraContent, Menu, etc.
With this in the Custom CSS (Page-Inspector > Header > CSS), any font-size is possible, for example 32px:
In ExtraContent1:

#myExtraContent1 [class^="icon-"], #myExtraContent1 .fa {font-size: 32px;}

In ExtraContent2:

#myExtraContent2 [class^="icon-"], #myExtraContent2 .fa {font-size: 32px;}


In ExtraContent3:

#myExtraContent3 [class^="icon-"], #myExtraContent3 .fa {font-size: 32px;}


In the Content:

#contentContainer #content [class^="icon-"], #contentContainer #content .fa {font-size: 32px;}


In the Sidebar:

#sidebarContainer #sidebar [class^="icon-"], #sidebarContainer #sidebar .fa {font-size: 32px;}


You can choose different colors for an icon the content, sidebar or ExtraContent in the 'Theme Styles > Colours > FontAwesome Icon in…'
Read this about other options of the icon size.

• ADD a LINK to your FONT AWESOME ICON
(for example to your Facebook page):

<a href="#"><i class='icon-facebook'></i></a>

Replace the # in this code with the page URL of your icon and the website will open in the same window. When you replace the # with http://www.facebook.com/jjohnson" target="_blank (so add only target="_blank) the website opens in a new window, so:

<a href= "http://www.facebook.com/jjohnson" TARGET="_blank"> <i class='icon-facebook'></i></a>

Or with the FontAwesome 4 icons:

<a href= "http://www.facebook.com/jjohnson" TARGET="_blank"> <i class='fa fa-facebook-square'></i></a>

An email-address is possible too. Replace the # in the code with this: mailto:johndoe@mac.com
Do not remove the quotation marks!

• PUT an FONTAWESOME ICON in an EXTRACONTENT AREA
When you put the icon in for example the EC1 area, paste this in the Sidebar or Content as plain text (RW > Edit > Paste as Plain Text):

<div id ="myExtraContent1"><i class='icon-camera'></i></div>

In Preview your icon shows up in the ExtraContent1 area, above the Menu. Be sure always to end with the </div> tag!!!
Another option is to paste the code ...

<i class='icon-camera'></i>

… in the free ExtraContent stack and select EC1 in the settings of the stack.
Replace myExtraContent1 with another EC area (2, 3, 4 or 5) in the code above when you prefer it in another EC area.

You can choose a color in the ‘Theme Styles > Colours > Font-Awesome Icons’.

• MULTIPLE ICONS
For multiple social icons, repeat the above steps for each desired icon. For example:

<i class='icon-twitter'></i> <i class='icon-apple-logo'></i> <i class="icon-star"></i>

You can paste as many icons behind each other as you like and you can increase the letter-spacing too when you have multiple icons. For example:

[class^="icon-"],.fa {letter-spacing: 8px;}

Instead of adding padding you can also add a bit space between two icons with this character entity between each code &nbsp; , once or a few times. So for example:

<i class='icon-twitter'></i>&nbsp;&nbsp;<i class='icon-apple-logo'></i>&nbsp;&nbsp;<i class="icon-star"></i>

• EACH ICON A DIFFERENT COLOR
When you would like to give each icon a different color paste this in the Custom CSS:

i.icon-twitter{ color:#FF0000 !important;}
i.icon-apple-logo{ color:#0000FF !important;}
i.icon-star{ color:#00FF00 !important;}


This only works with the Font Awesome Icons 3.6.1. #FF0000 is a HTML color code for red, #0000FF is green and #00FF00 is blue. More color codes here.

• ICONS WITH TEXT
With this the text and the icon are inline and have the same font-size, for example this Dashboard icon:

<i class='icon-dashboard'></i> This is a Dashboard Icon

Be sure that when you start with a </div...> tag you always have to end with the </div> tag!

• ICON TO TITLE, MENU, FOOTER, BLOG-TITLE, FILESHARING-TITLE, etc.
You can add a FontAwesome icon to the menu, the footer, a blog title or whatever.
When you copy a Font Awesome code be sure to replace the quotation marks " with ' when you use the built-in SiteMap page in your project too.
So not <i class="icon-home"></i> but <i class='icon-home'></i>.
Below some examples.

• TITLE: paste this in the Title area in the Page-Inspector a Camera icon (example):

<i class='icon-camera'></i>

title

• MENU: Read Chapter 9

• FOOTER: paste this in the Footer area in the Page-Inspector or Site-Setup for a Facebook icon:

<i class='icon-facebook-sign'></i>

Add a bit more space between icon and title with this behind the icon code with the character entity &nbsp; (once or a few times):

<i class='icon-home'></i>&nbsp;&nbsp;

When you prefer another color, paste this in the Custom CSS:

#footer [class^="icon-"], #footer .fa {
color: #FF0000 !important;}


#FF0000 is the HTML color for red. More about colorcodes.

When you would like to have another size, add a font-size too, for example:

#footer [class^="icon-"], #footer .fa {
color: #FF0000 !important;
font-size: 36px;}



• BLOG TITLE: paste this before the Blog Title for a File icon:

blogtitle

<i class='icon-file'></i>

Add a bit more space between icon and title with this behind the icon code with the character entity &nbsp; (once or a few times):

When you prefer another color, paste this in the Custom CSS:

.blog-entry-title [class^="icon-"], .blog-entry-title .fa {
color: #FF0000 !important;}


#FF0000 is the HTML color for red. More about colorcodes.

• FILESHARING TITLE: paste this before the Filesharing Title for a Download icon:

filesharing

<i class='icon-download-alt'></i>

Add a bit more space between icon and title with this behind the icon code with the character entity &nbsp; (once or a few times):

When you prefer another color, paste this in the Custom CSS:

.filesharing-item-title [class^="icon-"], .filesharing-item-title .fa {
color: #FF0000 !important;}


#FF0000 is the HTML color for red. More about colorcodes.

More options:

RSS:
rss_feed

Read More:
readmore

Categories:
file

YOUR OWN ICONS (IMAGES)
It’s not needed to use these font awesome icons. You can also add real images (jpg, gif, png) as icons in your webpages and make a link to a page.


19. More CSS
You can add all css-codes below in the Custom CSS (or in the 'custom css' file in the Contents of the theme, see Chapter 2):

More box-shadow to the Menu
RAINBOW theme

#menu {
-webkit-box-shadow: -3px 0px 15px rgba(0,0,0,0.55);
-moz-box-shadow: -3px 0px 15px rgba(0,0,0,0.55);
box-shadow: -3px 0px 15px rgba(0,0,0,0.55);}

Or with the menu at the left side:

#menu {
-webkit-box-shadow: 3px 0px 15px rgba(0,0,0,0.55);
-moz-box-shadow: 3px 0px 15px rgba(0,0,0,0.55);
box-shadow: 3px 0px 15px rgba(0,0,0,0.55);}


RAINBOW-DD theme

.menu,#menu {
-webkit-box-shadow: -3px 0px 15px rgba(0,0,0,0.55);
-moz-box-shadow: -3px 0px 15px rgba(0,0,0,0.55);
box-shadow: -3px 0px 15px rgba(0,0,0,0.55);}

The ‘darkness’ of the shadow is 0.55 in this example (by default it's 0.25). Decrease or increase this, for example 0.15.
The vertical and horizontal offset is -3px and 0px, the blur is 15px. Any number is possible, try it :-)
Note: CSS3 Shadows are not supported by Internet Explorer 6, 7, 8 and 9.
Line Height Content and Sidebar
Increase the line-height of Content and Sidebar with this in the Custom CSS:

#contentContainer #content, #sidebarContainer #sidebar {line-height: 1.8;}


1.8 is an example, by default it's 1.4
Line Height ExtraContent
Increase the line-height of an ExtraContent area (for example EC3) with this in the Custom CSS:

#myExtraContent3 {line-height: 1.8;}

1.8 is an example, by default it's 1.5
With this it will be smaller:

#myExtraContent3 {line-height: 1.2;}


Letter-Spacing
You can add some letter-spacing (all numbers below are examples), for example to the Title:

#pageHeader h1 {letter-spacing: 9px;}

or to the Slogan:

#pageHeader h2 {letter-spacing: 2px;}

Or to the footer:

#footer {letter-spacing: 1px;}

Or to the content:

#contentContainer #content, #sidebarContainer #sidebar {letter-spacing: 1px;}

Or to the menu (I've made it smaller in this example):
RAINBOW theme

.nav ul li a{letter-spacing: -1px;}

RAINBOW_DD theme

.menu,.nav ul li a{letter-spacing: -1px;}


Or to the Blog and Filesharing Title:

.blog-entry-title a, .filesharing-item-title {letter-spacing: 1px;}


Bold font
You can add a bold font, for example to the Title:

#pageHeader h1 {font-weight:bold;}

or to the Slogan:

#pageHeader h2 {font-weight:bold;}

Or to the footer:

#footer {font-weight:bold;}

Or to the menu:
RAINBOW theme

.nav ul li a{font-weight:bold;}

RAINBOW_DD theme

.menu,.nav ul li a{font-weight:bold;}


Font-size of the Footer
By default the footer has the same font-size as the content (Page-Inspector > Content FontSize and Colours).
When you prefer another font-size to the footer:

#footer {font-size: 12px;}

Font-Size Blog Entry
Increase only the blog entry font-size (so not the font-size in the sidebar) with this in the Custom CSS:

.blog-entry {font-size: 18px;}

(18px is an example)

Background Colour Vertical Menu Strip (with bgStretcher stack)
In the Page-Inspector > Menu FontSize and Colours you can choose a colour to the menu background. When using the bgStretcher stack it could be nice to make the strip a bit transparent. To do this paste this in the Custom CSS:

#menu {background-color: rgba(0,0,0,0.7);}

Example
Center the Content
Sometimes it could be nice to center the content. This looks best when the sidebar is hidden. To do this paste this in the Custom CSS:

#contentContainer #content { text-align: center;}

Center the ExtraContent
Sometimes it could be nice to center the Extracontent3 (below the content). To do this paste this in the Custom CSS:

#myExtraContent3 { text-align: center;}

Replace myExtraContent3 with myExtraContent 2, myExtraContent 1 or myExtraContent 5 in the code above when you prefer it in the EC2 or EC1 area. Centering the EC4 is not possible.
Hide Border Bottom Menu
With this in the Custom CSS you can hide the border-bottom of the menu:

.nav ul li {border-bottom-style: none;}

Contact Form stack in an ExtraContent area
On this page you see the Contact Form Stack in the ExtraContent3 area. By default you can select the border-color of the input fields in the Theme Styles > Colours > Searchbox Inputfield. When you would like to have another border-color (for example when you've the search box somewhere else on your page) paste this in the Custom CSS for another border color to the inputfiels of the Contact Form stack:

#myExtraContent3 input[type="submit"] {
padding-left: 10px;padding-right: 10px; margin-left: 0px;}
#myExtraContent3 textarea, #myExtraContent3 input[type="text"],
#myExtraContent3 input[type="submit"] {
border: 1px solid;
border-color: #FF0000 !important;}

#FF0000 is the HTML color for red. More about colorcodes.
As you can see the Message input field is not transparent, the other important fields are transparent. To make them all transparent paste this in the Custom CSS too:

#myExtraContent3 textarea, #myExtraContent3 input[type="text"], #myExtraContent3 input[type="submit"]{ background-color: transparent !important;}

Or when you prefer a background color:

#myExtraContent3 textarea, #myExtraContent3 input[type="text"], #myExtraContent3 input[type="submit"]{ background-color: #FF0000 !important;}

#FF0000 is the HTML color for red. More about colorcodes.
Make the input field of Name, Email and Subject less tall )for example 10px) with this in the Custom CSS:

#myExtraContent3 input[type="text"] {
height: 10px;}

Replace the number in ExtraContent3 when you would like the stack in another ExtraContent area.
Smaller font-size? Paste this in the Custom CSS (for example 11px:

#myExtraContent3 textarea, #myExtraContent3 input[type="text"],
#myExtraContent3 input[type="submit"] {
font-size:11px !important;}

Contact Form stack in the Content
When you put the Contact Form Stack in the Content, paste this in the Custom CSS to add another border-color and background-color to the inputfiels of the Contact Form stack:

#content textarea, #contentinput[type="text"],
#content input[type="submit"]{ background-color: #FFFFFF !important;}

#content input[type="submit"] {
padding-left: 10px;padding-right: 10px; margin-left: 0px;}
#content textarea, #content input[type="text"],
#content input[type="submit"] {
border: 1px solid; border-color: #FF0000 !important;}

#FFFFFF is the HTML color for white, #FF0000 is the HTML color for red. More about colorcodes.
Hide the Horizontal Stitching Lines
In the Theme Styles > Miscellaneous > Hide all Horizontal Stitching Lines you can hide all horizontal lines.
When you would like to hide them separately do this:
Hide the upper horizontal stitching line (just below the header strip) with this in the Custom CSS:

#stiksel1 {display:none;}

Hide the one between the menu button with this in the Custom CSS:

#stiksel2 {display:none;}

The line below the Title/Slogan:

#stiksel_content {display:none;}

The horizontal line above the footer:

#stiksel3 {display:none;}

And at least the horizontal line above the ExtraContent7 area (when enabled):

#EC7stiksel {display:none;}

Contact Form Background input fields
By default the background color of the input fields of the built-in Contact Form have the same color or pattern as the body.
When you would like to have a different background color paste this in the Custom CSS:

input[type="text"],.form-input-field,fieldset input[type="text"]
input[type="text"],input[type="submit"],input[type="reset"] {
background-color: #FF0000 !important;}

#FF0000 is the HTML color for red. More about colorcodes.
Underline links
By default the links are not underlined. When you want this select the button Theme Styles > Miscellaneous > Underline links. Font-Awesome icons in an ExtraContent area will be underlined too. Hide that with this in the Custom CSS (for example EC1);

#myExtraContent1 a:link {border-bottom-style: none;}

Hide Title and Slogan
You can Hide Title and Slogan in the Site-Setup.
On this page I've hidden the Slogan in the Theme Styles and I've hidden the Title in the Page-Inspector. And this is in the Custom CSS:

#stiksel_content ,#stiksel3 {display:none;}
#pageHeader h1 {padding-top: 35px;}


Make the space below the footer smaller
You can make the space below the footer smaller with this in the Custom CSS:

#gradient_footer {height: 100px;}

100px is an example.
Smaller or Wider submenu with the Rainbow-DD theme

RAINBOW_DD theme
You can make the sublevels of the desktop menu wider or smaller with this in the Custom CSS (by default it's 220px)

.menu ul ul {width: 170px;}
.menu ul li ul li ul{left: 170px;}

170px is an example






Paul Bradforth wrote some very useful RapidWeaver tips here.
-------------------------------------------------------------------------------------------
HV RAINBOW may not be resold or redistributed without the express written permission of Henk Vrieselaar:
APRIL 2014