HV STRIPPED 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. (IMPORTANT !) Go to your Rapidweaver (RW5) preferences, and ensure that the option Consolidate CSS files is enabled.
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, 5 and 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 (IE8+, Safari, Firefox, Opera, Camino, etc.) and on your iPhone/Android and iPad/tablet.
It works fine with IE7 too, but the down arrows in the menu and font-awesome icons (see chapter 9) don't show up.

E. 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 and (sub)menu
6. Font Awesome icons before the Page Title
7. ExtraContent
8. ExtraContent4: Image or Slide Show
9. Toggle Icon and ExtraContent5
9a. ExtraContent6: Image or Slide Show
10. Font Awesome Icons
11. More CSS
     Font-Size SubMenu
     Uppercase or normal font to Submenu
     Bold font to menu
     Line-Height Content and sidebar
     Content and Sidebar text alignment
     Text Shadow to the body (all text on a page)
     Line Height ExtraContent
     Letter-Spacing
     Uppercase font to the Blog Title
     Font-Size Blog Entry
     Text Shadow or Letterpress effect to the Title
     Add blur to the body text
     Bold Font
     Font-size of the Footer
     Background color of the Footer
     Contact Form Background input fields
     Underline links
     Background Colour SubMenu with bgStretcher stack
     When you use the Contact Form stack by Doobox
     Fixed Menu
12. Searchbox
13. TextTime script
14. Date (US and European) script
15. Mail a Friend script
16. Using the Hide 'n' Show stack
17. Tutorials
18. Blog Title, or Filesharing and Headings (h1, h2, h3, etc) Font
19. Replace the words Category, Archives, Feeds (so the sidebar content) links



1. How to install a theme
To install the HV-STRIPPED theme, you have 2 options. You can double click on the theme to install it automatically, or drag the theme into the 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-Stripped. 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-STRIPPED theme has 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.
Now go to the Theme Styles > Logo section and enable an option to display the logo on a page.
The logo will show up above the menu (left, right or center).
NEW: you can also replace the Title with your logo (example). Enable one of the other buttons in the Theme Styles > Logo section.

LOGO SIZE
I personally do not like a huge logo in a website, but that's up to you.
When you use a larger logo you can make it fluid:

MAKE A LOGO FLUID
With a big logo, it could be nicer to make it a bit smaller and/or fluid. How to do that?

A. When your logo image is wider than the selected Container Width (Theme Styles > Container Width) and you would like to fit it in the container, paste this in the Custom CSS or in the custom.css file (in the css examples below I've selected a 900px Container Width):

#logo img,.logo img {height: auto;width:100%;}

Now with all devices (desktop, iPad and smartphone) the logo has a 100% width.
Make your logo smaller, for example with this:

#logo img,.logo img {height: auto;width:25%;}


When your logo is wider than the selected Container Width, you can also put it in the ExtraContent4 area (see Chapter 8.

B. When you have a large logo but it's smaller than the selected Container width, paste this in the Custom CSS or in the custom.css file:

@media screen and (max-width:767px){
#logo img,.logo img {height: auto;width:45%;}}

Or with a smaller logo for example:

@media screen and (max-width:767px){
#logo img,.logo img {height: auto;width:35%;}}

With a very small logo an extra css is not always needed, but try for example:

@media screen and (max-width:767px){
#logo img,.logo img {height: auto;width:15%;}}


When your logo is large, but you would like a smaller one on your website paste this in the Custom CSS:

#logo img,.logo img {height: auto;width:15%;}

45%, 35% and 15% are examples. Try another percentage and check it when you open the page in preview with a desktop browser and slowly make the browser thinner and wider.

Send me an email when you've questions about this.

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

4. Fluid images with the flexible tag
(not needed for images in the ExtraContent4 area). With a Stacks2 page it’s very simple to make images fluid (responsive): use the Fluid Image stack for this.
Without this stack you can use the built-in 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 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.
Example in the sidebar: make the browser smaller.

5. Add your own Background Pattern to the body and (sub)menu
By default you can choose a background color or 3 different background-patterns in the Theme Styles > Background Pattern or Color.

How to add your own pattern:
Step 1: Download a pattern from the internet (see below).
Step 2: 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;}

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.

When you want a background pattern to the submenu background too, add this in the Custom CSS:

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


And to the mobile menu too (example):

body, header nav ul ul,.mean-container .mean-nav
{background: url(%resource(pattern1.jpg)%) repeat left top;}


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

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>

Need more space between the icon and the text? Paste this character entity between each code &nbsp; , once or a few times. So for example:

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

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

#header nav [class^="icon-"],#header nav .fa,
.mean-container .mean-nav [class^="icon-"],.mean-container .mean-nav .fa
{display:none;}


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

This theme has 5 EC areas (example): ExtraContent1, ExtraContent2, ExtraContent3, ExtraContent4 and ExtraContent5. The EC1 area is below the menu. I would use EC1 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.
EC2 is between content and footer.
EC3 is below the footer.
EC4 (hidden by default) is below the Menu and can only be used for container-wide images or slideshows (use a slideshow stack or plugin for this.), read next Chapter 8.
EC5 (hidden by default) is above the menu, at the top of your page. Read Chapter 9.
EC6 (hidden by default) is above the Menu and can only be used for browser-wide images or slideshows (use a slideshow stack or plugin for this.), read 9a. ExtraContent6: 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="myExtraContent5">This is the ExtraContent 5 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 of EC1, EC2 or EC3 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;}


8. ExtraContent 4: Image or Slide Show
ec4

By default the EC4 is hidden. And when you have enabled EC4, the EC6 is disabled. You it's not possible to display an image in both EC4 ánd EC6!
In the ExtraContent 4 area (below the menu) 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 ExtraContent4 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:
a. drag the free free ExtraContent stack in a Stacks page. Select EC4 in the settings of this stack. Drag an image into this stack. In the download file is an example image to start with (the image tulip.jpg in the images folder in the download file).
Be sure to uncheck Constrain Width and Constrain Height in the settings of the stack:

img

Now Select in the Theme Styles > Show ExtraContent4 Image or Slideshow • Body Wide. In Preview your browser wide responsive image shows up.
Select in the Theme Styles > Show ExtraContent4 Image or Slideshow • ContainerWide. In Preview your container wide responsive image shows up.

b. Another option: drag your image (for example the tulip.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="myExtraContent4"><img src="%resource(tulip.jpg)%"></div>
Now Select in the Theme Styles > Show ExtraContent4 Image or Slideshow • Body Wide. In Preview your browser wide responsive image shows up.
Select in the Theme Styles > Show ExtraContent4 Image or Slideshow • ContainerWide. In Preview your container wide responsive image shows up.

c. 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>
(there's a working example in the download file with my tulip image).
Now Select in the Theme Styles > Show ExtraContent4 Image or Slideshow • Body Wide. In Preview your browser wide responsive image shows up.
Select in the Theme Styles > Show ExtraContent4 Image or Slideshow • ContainerWide. In Preview your container wide responsive image shows up.

2. Adding a slide show stack: drag your slide show stack in the ExtraContent stack and select EC4 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.

3. Adding a slide show with the Weaverpix plugin or another slideshow plugin: select EC4 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 prefer the Nivo theme, the Bootstrap Gallery, the Galleria, the Responsive Slideshow, the Blueberry Image Slider, or the wmuSlider theme in the Weaverpix plugin.

4. Add box-shadow (not supported by Internet Explorer) to the EC4 area (image or slideshow): paste this in the Custom CSS:

#myExtraContent4 {box-shadow: 0px 0px 5px #7F7F7F;}

#7F7F7F is the HTML color for gray (great on a white background!). More colorcodes. The numbers 0px and 5px are examples. Try some others, it's really fun :-)

5. Add a Zoom Effect to the first background image in the Theme Variations > Miscellaneous > Zoom Effect to Image or Slideshow in EC4 or EC6. Most browsers support this effect (Safari, FireFox, Chrome, IE10+). Read Chapter 12 for more zoom and rotate options.

9. Toggle Icon and ExtraContent 5
By default the Toggle Icon and EC5 are hidden!
In the ExtraContent 5 area you can add text, images, social icons or whatever.
TUTORIAL:

1. Enable the Toggle Bar:
Go to the Theme Styles > Show ExtraContent5 and Toggle Bar and click on one of the buttons below (in the green rectangular) to enable the toggle bar:

ec5toggle

As you can see in preview a bar shows up with a down arrow.
With these options the width of the ExtraContent5 is the same as the selected Container width.
When you enable an option in the yellow rectangular the width of the ExtraContent5 is 100%, so 'browser wide". Enable this option for social icons , a few text lines or something like that (example).
When you click on the down-arrow in the toggle bar nothing happens, because we haven't added an ExtraContent5 yet.

In the Theme Styles > ExtraContent5 and Toggle Bar you can choose a color of the icon, and a colors to the ExtraContent5 text.

2. Add an ExtraContent5:
Two options:
a. Drag the free free ExtraContent stack in a Stacks page. Select EC5 in the settings of this stack. Drag a text stack into this stack.
b. Or paste this in the Content or Sidebar as plain text* (RW > Edit > Paste as Plain Text):

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

In the Theme Styles > ExtraContent 5 FontSize and Position you can choose a font-size and position (left, center or right) to the ExtraContent5 (read Chapter 7 for other font-sizes to the ExtraContent5), only when you've selected an option in the green rectangular above..

3. Replace the toggle icon with another icon or a text:
By default the toggle icon is a down and up arrow font-awesome icon. It's very simple to add any other Font Awesome Icon (see chapter 10 about these icons).

a. Search in the icons set of FontAwesome for nice icons: http://fortawesome.github.io/Font-Awesome/icons/
Click on an icon. For example the Heart icons. In the next screen you see the icon in different sizes and just below it a Unicode. In the image below you see two heart icons. The left one has Unicode f004 and the open heart icon has unicode f08a:

unicode2

In the css below you see the tags for the open and close icon.
Paste the Unicode between "\ and " (see example below)

.hv-toggle a.toggle-trigger:before { content: "\f004"; }
.hv-toggle a.active.toggle-trigger:before { content: "\f08a"; }

Now copy both lines and paste it in the Custom CSS. In preview you see your heart icon. Click on it and it's an open heart icon.

Other example with chevron circle down and up icons:

.hv-toggle a.toggle-trigger:before { content: "\f13a"; }
.hv-toggle a.active.toggle-trigger:before { content: "\f139"; }

And what about envelope icons:

.hv-toggle a.toggle-trigger:before { content: "\f0e0"; }
.hv-toggle a.active.toggle-trigger:before { content: "\f003"; }

It's really fun to try other icons, just try it :-)

Instead of an icon you can use a word or a few words:

.hv-toggle a.toggle-trigger:before { content: "open"; }
.hv-toggle a.active.toggle-trigger:before { content: "close"; }

The font-size is 24 px by default. With a smaller font-size you have to increase the line-height, for example:

.hv-toggle a.toggle-trigger:before { content: "open"; font-size: 14px ; line-height: 3; }
.hv-toggle a.active.toggle-trigger:before { content: "close"; }

Or:

.hv-toggle a.toggle-trigger:before { content: "open"; font-size: 18px ; line-height: 2.2; }
.hv-toggle a.active.toggle-trigger:before { content: "close"; }

With larger font-sizes it's better to decrease the line-height.

Or add another font (add the previous code also to the Custom CSS) (example):

.hv-toggle a.active.toggle-trigger:before.hv-toggle a.toggle-trigger:before {font-family: 'nobileregular'; }
and
.hv-toggle a.toggle-trigger:before { content: "open"; font-size: 24px ; line-height: 1.8; }
.hv-toggle a.active.toggle-trigger:before { content: "close"; }

Try other fonts:
font-family: Arial, Helvetica, Geneva, sans-serif;
font-family:Geneva,Tahoma,sans-serif;
font-family: "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
font-family: "Lucida Grande","Lucida Sans Unicode", helvetica, verdana, arial, sans-serif;
font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
font-family: Tahoma, Geneva, sans-serif;
font-family: Verdana, Geneva, sans-serif;
font-family: 'sansationregular';
font-family: 'montserratregular';
font-family: 'amaranthregular';
font-family: 'calibriregular';
font-family: 'roboto_condensedlight';
font-family: 'WinterthurCondensedRegular';
font-family: 'Ubuntu';
font-family: 'BebasNeueRegular';


4. Size of the Toggle Icon:
By default the font-size of the Toggle Font Awesome Icon is 32px. When you prefer a smaller size (example 28px), paste this in the Custom CSS:

.hv-toggle a.toggle-trigger:before {font-size: 28px !important;}

With a small size you can increase the space above and below the icon. Add this too:

.hv-toggle { line-height:1.8;}

(by default it's 1.5, any number is possible).
When you want a larger size of the icon (for example 46px), paste this in the Custom CSS:

.hv-toggle a.toggle-trigger:before {font-size: 46px !important;}

With a large size you can decrease the space above and below the icon. Add this too:

.hv-toggle {line-height:1.3;}


5. Hide the Toggle Icon:
With this in the Custom CSS both icons are hidden:
.hv-toggle a.toggle-trigger:before { content: ""; }
.hv-toggle a.active.toggle-trigger:before { content: ""; }

6. Transparent Background ExtraContent5:
In the Theme Styles > ExtraContent5 FontSize, Position and Colours you can choose a background color to the toggle content (the ExtraContent5). Paste this in the Custom CSS too when you want a transparent background to the ExtraContent5:

.hv-toggle-content {background-color: transparent !important;}


7. Pattern to the ExtraContent5 background:
How to add your own pattern to the toggle content (the EC5):
Step 1: Download a pattern from the internet (see below).
Step 2: 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):

.hv-toggle-content
{background: url(%resource(pattern1.jpg)%) repeat left top;}



8. Tutorials about EC5:
Go to Tutorials.

9. Tooltip:
By default when you hold the mouse over the icon, it shows the tool-tip „Title of Toggle“. You can change (or hide) this tooltip:
Open the Contents of the theme (Right-click on the theme in the Theme's Drawer) and choose: 'Reveal Contents in Finder'. Now you see some files and folders. Open the index.html with TextEditor (on your mac) or with the free TextWrangler. Somewhere you see the name Title of Toggle (see screenshot below):

toggle

Replace this name, for example only Toggle or whatever. Or remove the it. But don't remove the quotation marks!! Now save the file.

10. Show EC5 by default:
Select an option with ‘Show…’ in the Theme Variations > ExtraContent5 and Toggle Bar. With this in the Custom CSS the EC5 is open by default without the toggle icon:

.hv-toggle-content {display: block !important;}
.hv-toggle a.toggle-trigger:before { content: "";padding: 0;}
#myExtraContent5 {float: right;}

You can also use the Hide ’n Show stack for a delayed opening. Read Chapter 16 how to do this.

9a. ExtraContent 6: Image or Slide Show
ec6

IMPORTANT 1: By default the EC6 is hidden and only the options for a logo instead of the Title (Theme Styles > Logo) are possible!
IMPORTANT 2: When you have enabled EC6, the EC4 is disabled. It's not possible to display an image in both EC4 ánd EC6!
IMPORTANT 3: With the options of a Menu over the Image/Slideshow the menu borders are hidden! With the option Menu below Image/Slideshow only the border bottoms are visible when enabled in Menu Background and Font-Style.

In the ExtraContent 6 area (above the menu) 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 ExtraContent4 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:
a. drag the free free ExtraContent stack in a Stacks page. Select EC6 in the settings of this stack. Drag an image into this stack. In the download file is an example image to start with (the image tulip.jpg in the images folder in the download file).
Be sure to uncheck Constrain Width and Constrain Height in the settings of the stack:

img

Now select an option in the Theme Styles > Show ExtraContent6 Image or Slideshow • Show Body Wide.... In Preview the menu show up over or below your browser wide responsive image. Be sure you've disabled EC5 (Theme Styles > ExtraContent4 > Image or Slideshow > Hide !

b. Another option: drag your image (for example the tulip.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="myExtraContent4"><img src="%resource(tulip.jpg)%"></div>
Now select an option in the Theme Styles > Show ExtraContent6 Image or Slideshow • Show Body Wide.... In Preview the menu show up over or below your browser wide responsive image. Be sure you've disabled EC5 (Theme Styles > ExtraContent4 > Image or Slideshow > Hide !

c. 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>
(there's a working example in the download file with my tulip image).
Now select an option in the Theme Styles > Show ExtraContent6 Image or Slideshow • Show Body Wide.... In Preview the menu show up over or below your browser wide responsive image. Be sure you've disabled EC5 (Theme Styles > ExtraContent4 > Image or Slideshow > Hide !

2. Adding a slide show stack: drag your slide show stack in the ExtraContent stack and select EC6 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.

3. Adding a slide show with the Weaverpix plugin or another slideshow plugin: select EC6 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, captions, controllers and/or pagination please hide these options. I prefer the Nivo theme, the Bootstrap Gallery, the Galleria, the Responsive Slideshow, the Blueberry Image Slider, or the wmuSlider theme in the Weaverpix plugin.

4. Add box-shadow (not supported by Internet Explorer) to the EC4 area (image or slideshow): paste this in the Custom CSS:

#myExtraContent6 {box-shadow: 0px 0px 6px #666666;}

#666666 is the HTML color for gray (great on a white background!). More colorcodes. The numbers 0px and 6px are examples. Try some others, it's really fun :-)

5. Add a Zoom Effect to the first background image in the Theme Variations > Miscellaneous > Zoom Effect to Image or Slideshow in EC4 or EC6. Most browsers support this effect (Safari, FireFox, Chrome, IE10+). Read Chapter 12 for more zoom and rotate options.

10. 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.
This page shows all Font Awesome 4 icons.
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.

• CHANGE THE COLOR of a FONT AWESOME ICON
In the Theme Styles you can change the color of the icons in the content, sidebar and extra content.

• ADD SPACE BEFORE or BEHIND a 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:

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


In the Sidebar:

#sidebar [class^="icon-"], #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 6

• 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 in the Custom CSS for a File icon (Unicode f0f6 or any other icon, read Chapter 9 how to change icons):

.blog-entry-title a:before { content: "\f0f6";}

or a circle:

.blog-entry-title a:before { content: "\f111";}

or a heart:

.blog-entry-title a:before { content: "\f004";}

or a bullhorn:

.blog-entry-title a:before { content: "\f0a1";}

Or any of the other 435 icons: http://fortawesome.github.io/Font-Awesome/icons/

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.


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

Font-Size Submenu
With a large menu font-size it could be nicer to make the submenu font smaller. To do that paste this in the Custom CSS (example):

#header nav ul ul li a {font-size: 14px;}

Uppercase or normal font to Submenu
When the main-menu has an uppercase font, it could be nice to give a normal font to the submenu:

#header nav ul ul li a {text-transform: none;}

Bold font to menu
To do that paste this in the Custom CSS:

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

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

Text Shadow to the body (all text on a page)
With this in the Custom CSSyou can add text-shadow to the text when using a background-image or slideshow with the bgStretcherstack:

body{text-shadow: 1px 1px 3px #000000;}

Content and Sidebar text alignment
In the Theme Variations > Miscellaneous you can justify the content in the content and sidebar. When you prefer a right alignment paste with this in the Custom CSS (example):

#content {text-align:right;}

Line Height ExtraContent
Increase the line-height of an ExtraContent area (for example EC1) with this in the Custom CSS:

#myExtraContent1 {line-height: 1.8;}

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

#myExtraContent2 {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: 8px;}

or to the Slogan:

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

Or to the footer:

#footer {letter-spacing: 1px;}

Or to the content: go to Theme Styles > Miscellaneous > Letter Spacing Body

Uppercase font to the Blog Title

.blog-entry-title {text-transform: uppercase;}


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 (example):

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

(18px is an example). Other font? Read Chapter 18.

Text Shadow or Letterpress effect to the Title
You can add some text-shadow to the Title with this in the Custom CSS:

#pageHeader h1{text-shadow: 3px 3px 3px #E4E4E4;}

Or (example):
#pageHeader h1{text-shadow: 10px 8px 0px #E4E4E4;}
#E4E4E4 is the HTML color for gray (great on a white background!). More colorcodes. The numbers 3px are examples. Try some others, it's really fun :-)
Adding a letterpress effect (example), best with a darker background such as the brown_skin.png pattern in the download file:

#pageHeader h1{text-shadow: 1px 1px 2px #FFD2B4;}

Or this (example):

#pageHeader h1{text-shadow: 1px 1px 0px #ffffff;}

Or some blur to the Title (example):

#pageHeader h1{text-shadow: 0px 0px 5px #cccccc;}

(not supported by Internet Explorer)

Add blur to the body text
With this you can add some blur to the body text:

body {text-shadow: 0px 0px 5px #cccccc;}

(not supported by Internet Explorer)

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;}

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;}

Background color of the Footer
In the Theme Variations > Miscellaneous section you can add a border to the Footer. With this in the Custom CSS you can add a background color:

#footer {margin-bottom: 15px;padding-bottom: 1px;padding-top: 12px;
background-color: #FF0000;}

Or with a background-color ánd a border (example with grey):

#footer {margin-bottom: 15px;padding-bottom: 1px;padding-top: 12px;
background-color: #FF0000;
border: 1px solid #000000;}


#FF0000 and #000000 are HTML colors for red and black. Choose your own color here: colorcodes.

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;}

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

#header nav ul ul,.mean-container .mean-nav {background-color: rgba(0,0,0,0.7);}

Now it's black transparent. With a white transparent background:

#header nav ul ul,.mean-container .mean-nav {background-color: rgba(255,255,255,0.8);}


0.7 and 0.8 are examples. More transparent: 0.4 or whatever. Less transparent: 0.9

When you use the Contact Form stack by Doobox
With this fully responsive contact form, that does not require a php page extension to function, some additional css is needed (example). Paste this in the Custom CSS:

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

#content input[type="submit"]{color:#000000 !important;background-image: none;}
#content input[type="submit"]:hover {color:#FF0000 !important;}

#FF0000 and #000000 are HTML colors. Choose your own color here: colorcodes.

When you would like a background-color to the inputfelds, replace background-color: transparent !important; in the css-code above with for example background-color: #ffffff !important;
#ffffff is the html color for white.

Contact Form stack in an ExtraContent area
When you use the Contact Form stack in an ExtraContent area (for example EC2), replace #content in the css-codes above with #myExtraContent2

Fixed Menu
Be careful with this. A fixed menu (so the menu is always visible when scrolling down) is only possible with the option Theme Variations > Menu Position > Right, Center or Left. Not with a position within the container. Always select a background-color to the menu (Theme Variations > Menu Background and FontStyle > Lowercase or Uppercase • Menu Background Color)

When there is no Toggle icon enabled and there's no slideshow or image in the ExtraContent4 area, paste this in the Custom CSS:

#header nav {position: fixed;}
@media screen and (min-width:768px){.slogan {padding-top: 80px;}}


When you have an image or slideshow in the ExtraContent4 paste this in the Custom CSS:

#header nav {position: fixed;}
#myExtraContent4 {margin-top: 0px;}

When you have enabled the Toggle Icon ánd there is an image or slideshow in the ExtraContent4, paste this in the Custom CSS:

#header nav {position: fixed;}
#myExtraContent4 {margin-top: 52px;}

When you have only enabled the Toggle Icon (so no image or slideshow in the ExtraContent4), paste this in the Custom CSS:

#header nav {position: fixed;}
#myExtraContent4 {margin-top: 65px;}



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

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;}


13. TextTime script

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 below the header.

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 or myExtraContent 3 in the code above when you prefer it in another ExtraContent area.

14. Date (US and European) script
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 below the header).

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 or myExtraContent 3 in the code above when you prefer it in another ExtraContent area.

15. 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 below the header.

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 or myExtraContent 3 in the code above when you prefer it in another ExtraContent area.

16. Using the Hide 'n' Show stack
With the Hide 'n' Show stack (not included in the theme) you can set a delay when opening a page.
How to do this (Effect, Speed and Show delay are up to you):
1. A delay to the menu when opening a page (example): In the settings of the HnS stack select these settings (image below) for a delayed opening of the menu (ID: #header nav ul):

hns_menu

2. A delay to the content when opening a page (example): In the settings of the HnS stack select these settings (image below) for a delayed opening of the content (ID: #content):

hns_content

3. A delay to the ExtraContent4 (image or slideshow, see Chapter 8) when opening a page (example): In the settings of the HnS stack select these settings (image below) for a delayed opening of the EC4 (ID: #myExtraContent4):

hns_ec4

4. A delay to the sidebar when opening a page (example): In the settings of the HnS stack select these settings (image below) for a delayed opening of the menu (ID: #sidebarContainer #sidebar):

hnssidebar

5. A delay to the body when opening a page (example): In the settings of the HnS stack select these settings (image below) for a delayed opening of the menu (ID: body):

hns-body

6. A delay to the ExtraContent5 when opening a page (example): In the settings of the HnS stack select this (image below) for a delayed opening of the ExtraContent5 (ID: .hv-toggle-content):

toggles

Effect, speed and Show delay are up to you.

17. Tutorials

A. Import a Contact Page in the ExtraContent5 area (read Chapter 9 about EC5).

Example
1. Add a Pluskit Page to your project.

2. Add a Contact Page to your project. The Page Title of this page is for example Contact Me

3. Now there are two options:
a. Add a Stacks2 page to your project and drag the free ExtraContent stack into this page. Select 5 in the settings of this stack. Drag a text-stack into the ExtraContent stack and paste this in the stack to import the Contact page: @import((Contact Me))
b. Instead of a Stacks2 page you can import a stack or contact form in any other page too (Blog, Styled Text, Filesharing, etc.).
Paste this line as plain text in the sidebar or content of the page where you want to import the Contact page:
<div id="myExtraContent5">@import((Contact Me))</div>

4. Enable the Toggle Bar in Theme Styles > Toggle Bar and ExtraContent5 (read Chapter 9).
It could be nice to replace the down and up arrow icons with an envelope icon (read Chapter 9), but that's up to you.

5. Have a look in Preview and click on the down-arrow icon: the Contact Form is in the EC5... but it looks ugly :-(
IMPORTANT: Read this how to solve this: http://support.loghound.com/kb/pluskit/how-can-i-import-the-contact-page

6. Instead of Pluskit you can also use the Global Content stack to import a page in another page.

7. In this example I've added a responsive (fluid) 3-Columns stack. I've added this stack into the ExtraContent stack (select nr 5). Now the contact-form is smaller. See screenshot below:

import

18. Blog Title, Filesharing, or Headings (h1, h2, h3, etc) Font
Replace the default Blog Entry Title font with another font, for example with Bebas:

.blog-entry-title {font-family: 'BebasNeueRegular'; font-size: 36px;}

By default the font-size is 24px, I made it bigger: 36px, but that's up to you).
Now add this for smaller font-sizes on your iPad (landscape, portrait) and iPhone:

@media screen and (max-width:768px){.blog-entry-title {font-size: 32px;}}

@media screen and (max-width:600px){.blog-entry-title {font-size: 28px;}}

@media screen and (max-width:480px){.blog-entry-title {font-size: 24px;}}

And test this in preview when you make your browser smaller.
Or Winterthur:

.blog-entry-title {font-family: 'WinterthurCondensedRegular'; font-size: 38px;}

Or Roboto Regular:

.blog-entry-title {font-family: 'roboto_condensedregular'; font-size: 38px;}

Or Frutiger:

.blog-entry-title {font-family: 'frutiger_lt_std45_light'; font-size: 34px;}


Replace .blog-entry-title with .filesharing-item-title a:link or h1 or h2 or h3 etcetera when you want another font to the Filesharing Title, or to the headings, for example:

.filesharing-item-title a:link {font-family: 'WinterthurCondensedRegular'; font-size: 32px;}


h1 {font-family: 'BebasNeueRegular'; font-size: 36px;}


19. Replace the words Category, Archives, Feeds (so the sidebar content) links
By default the sidebar contents in the built-in Blog page shows the English names (CATEGORIES, ARCHIVES, etc, see screenshot below):

archive

With this in the Custom CSS section you can replace those names with another word in your own language:

#blog-categories:before {content:"Categories";}
#blog-archives:before {content:"Archives";}
#blog-rss-feeds:before {content:"Feeds";}
ul.blog-tag-cloud:before{content:"Tag cloud";}


Only replace the words, don't remove the quotation marks!


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