HV-OUTLINE MANUAL
In the download file are:
HV-OUTLINE theme
ExtraContent snippets

IMPORTANT
Go to your Rapidweaver preferences, and ensure that these options below are enabled!

• Enable Smart Publishing
• Consolidate common files
• Consolidate CSS files


This makes exports of your project and uploading of your website faster, your Font Awesome icons show up and it gives an improved Internet Explorer support too.

Go immediately to the Contents of the manual

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

B. Animated FullSize Background
The HV-OUTLINE theme has a built-in option for full-size animated slideshows in the background. The theme resizes images to fill browser while maintaining image dimension ratio.
By default the slideshow controls are hidden. You can enable them in the Theme Styles > Slideshow Controls.
Read Chapter 30 and Chapter 31 how to add your own images with the Slider stacks or the Blow-Up snippets.


C. Browser Compatability
This theme works with all modern browsers: Internet Explorer 7+, Safari, Firefox (for Windows and Mac), Camino, Opera. But when you don’t use the Background Slideshow it even works fine with IE6! Internet Explorer does not support rounded corners, box- and text shadows and other CSS3 effects (for example the Pulsating Button). When you use the El Tint-o stack rounded corners show up with these browsers too. FONT AWESOME 3.2 is supported by IE7. FONT-Awesome 4.0 is not supported by IE7.

D. Theme Styles.
This theme has many different Theme Styles and Color Options. Don’t forget the Miscellaneous part (see image below).

miscellaneous (click to enlarge)

Before sending me questions, please try all options, so you can see what opportunities this theme provides.

E. Make a website with different themes
You can use different themes in one website. To do this go to RapidWeaver > Page Inspector and choose another theme in the popup menu below the words "Page-Specific Theme" .

F. Plugins and Stacks Compatability
Not all 3d party plugins and stacks will work with OUTLINE. All built-in plugins work fine with this theme. OUTLINE is jQuery-based and interacts well with other plugins and stacks however, there is always a possibility of conflicts with other JavaScript libraries. Therefore, I always recommend caution when adding them into a page...
As I said, some stacks don't work with this theme, such as some slide show stacks, the Montage stack and others. The HV-Slider stacks work fine!
Almost every day new stacks are released and I haven't tested them all. So I cannot guarantee that every stack will work. The RapidWeaver Central website shows all available stacks.
So please download a free trial version of this theme before you buy it!


G. Possible issues (important!)
There might be some issues and incompatibilities with this theme:
- With the RapidCart plugin the margin-top is too small. Read Chapter 11 how to increase this.
- The Carousel plugin doesn’t work with this theme.
- Only some themes of the new Weaverpix plugin work fine.
- With the Accordion plugin all items start out closed.
OUTLINE uses different jquery scripts. Not all stacks are compatible with this theme. I haven’t tested all stacks and plugins and it could be possible that there are conflicts between scripts.
The animated CSS3 buttons don’t work when you enable the CSS3 Pulse Open/Close Tab.
With much content you can see a flash on the iPad when opening the content panel. So I would prefer to use the Scrollpane stacks with a lot of content.


Contents of this Manual
1. How to install a theme
2. How to add Extra Content area(s) in your RapidWeaver page?
3. The Logo and Title have a link with the index.html of your website.
 About Background Patterns and Images.
4. Add your own background-pattern to the body.
5. Add your own background image centered to the body.
6. Add your own pattern or image to the Container.
7. Add your own pattern to the Content Popup Panel.
8. The Open/Close Tab (image, pattern, icon, word).
9. Add text or an image to to the Extra Content 4 area.
10. RapidCart (increase the margin-top of the PopUp Content Panel).
11. Container Opacity.
12. Width Sub Menu.
13. Letter-Spacing Title, Slogan, Menu and/or Footer.
14. Transparancy Sub Menu.
15. Hide the Breadcrumb Container.
16. Underline Links.
17. Title, Slogan, Menu, Blog and File sharing Title Lowercase font.
18. Uppercase font to Footer.
19. Hide the dotted line above the Footer.
20. How to change the font size and font weight of the Sidebar Header?
21. Wider Open/Close Tab when Title/Slogan/Footer/Menu are hidden.
22. Search Box in the Extra Content area.
23. Text Time in the Extra Content area.
24. Date (US and European) in the Extra Content area.
25. Mail-A-Friend in the Extra Content area.
26. Toggle Content with the Hide 'n' Show stack.
27. Letterpress effect Title.
28. Font Awesome Icons
29. Make your images fluid (responsive)
30. How to add a browser-wide background slideshow to your webpage.
31. When using the Blow-Up snippets.
32. Codes for the Sidebar header.
33. Extra CSS and more.
34. Issues with the Background Slideshow and some plugins.

1. How to install a theme
1. Double-click on the theme (filename will end with '.rwtheme'). RapidWeaver will launch and copy the theme into the ~ / Library / Application Support /RapidWeaver folder.
1a. Or drag the theme directly into the folder ~ / Library / Application Support /RapidWeaver.
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.
2. Quit RapidWeaver. The next time you launch RapidWeaver, the new theme will appear in the themes drawer. The theme name in the theme drawer will be HV-OUTLINE. 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.

2. How to add ExtraContent area(s) in your RapidWeaver page?
HV-OUTLINE 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.

There are 4 ExtraContent snippets in the download file. These snippets need to be installed so that RapidWeaver can find and use them. Once you've downloaded the snippets double-click on a Snippet to install it just like a Theme. You don't need these snippets with a Stacks2 page: the free ExtraContent stack is much easier.
Quit RW and install the other snippets in the same way. Alternatively you can drag the Snippets to the folder
~ / Library/Application Support/RapidWeaver/Snippets. Once installed you need to restart RapidWeaver for the changes to take eect.
Then from the View Menu you can access the Snippets Window. From there you can simply 'Drag and Drop' the code to the required area.

• Extra Notes about EC in this theme
This theme has up to 5 EC areas (see image below):

page4image24864

ExtraContent1: this area is in the upper left corner of your website. You can use this area for only a few words, or a stack. I would prefer to select the EC1 area in the Hide 'n' Show stack: with this stack you can hide the content so only the slideshow or image will be visible).

ExtraContent2: this area is in the bottom left corner of your website. You can use this area for a few words, or a stack (again preferable the Hide 'n' Show stack). But you can use this area for a few words, a date and time snippet, social media icons (see SOCIAL MEDIA ICONS IN AN EXTRACONTENT CONTAINER or for example in the Sprightly stack), etc. too.

ExtraContent3 is in Open/Close Tab at the left side of the container where by default the pulsating button is. In the Theme Styles > Button Image you can choose a Font Awesome Icon, a word or text, etc. Or hide it.
When you would like to replace it with a Word or Text go to the chapter about The Open/Close Tab.
. When you like a Font Awesome icon to the EC3 area read the chapter about the Font Awesome Icons. (>Icon to the Open/Close Tab).

ExtraContent4 is above the content in the popup panel. You can use this for text, images, slideshows (with some image slider plugins or stacks), other stacks, snippets, social media icons or whatever.

ExtraContent5 is at the right side of the container. You can use this for a text line, a stack, a time snippet, social media icons, or for example in the Sprightly stack or whatever.
IMPORTANT: by default this area is disabled. You can enable it in the Theme Styles > Miscellaneous > Enable ExtraContent 5.

You can add ExtraContent in two ways:
1. With the free ExtraContent stack.
2. Or paste <div id="myExtraContent1">This is the ExtraContent 1</div> in the Sidebar or Content area as plain text to show for example the EC1 area (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”):

SHOW ALL EXTRACONTENT CONTAINERS
When you would see all EC containers of this theme paste this in the Sidebar or Content as plain text (and now 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</div>
<div id="myExtraContent2">This is the ExtraContent 2</div>

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


You can choose 4 different font-sizes in the Theme Styles > ExtraContent Font-Size (11px, 12px, 13px and 14px). When you prefer another font-size (any number is possible), for example to the ExtraContent2 area, paste this in the Custom CSS:

#myExtraContent2 {font-size: 10px;}

Or a bold and large font in the ExtraContent:

#myExtraContent2 {
text-align: font-size: 16px;
font-weight: bold;}

Or an italic font:

#myExtraContent2 {font-style: italic;}


3. The Logo
The Logo and the Title 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. You can enable the logo in the Site Setup. Just drag your logo, (transparent png-logo's are allowed too), into the Site Logo area and enable the radio button below it.

There are more options to place a logo on your website.
A. The first one is to drag your logo to the Site Setup > Logo area and enable the radio button below it.
By default the logo is at the right side of the container. Max size of your logo: 190px (width) x 170px (height).

When you want to hide your logo go to Theme Styles > Miscellaneous and enable in the Theme Styles the button "Miscellaneous > Hide Logo".

When you prefer another position of your logo, for example centering it, paste this in the Custom CSS and change some numbers until you’re satisfied:

#logo {right: 34px; bottom: 19px;}

B. You can also place an image in one of the ExtraContent areas, for example in ExtraContent 2. Drag your image between <div id="myExtraContent2"> and </div>
Or drag your logo into the ExtraContent stack and select number 2 in the settings of the stack.

C. And what about a very big logo in the background? Read Chapter 5 how to do this.

About Background Patterns and Images
ADD YOUR OWN BACKGROUND PATTERN or IMAGE TO THE BODY, CONTAINER or CONTENT-PANEL (see image below):

patterns

Next chapters explain how to do this.

4. Add your own Background pattern to the body
By default you can choose between 7 different background patterns, an image or any color to the background of the body. But you can add your own pattern too. How to do this?

With RapidWeaver 4: Drag your image, for example pattern1.jpg, into the Assets window (Page-Inspector > Header > Assets).
With RapidWeaver 5: Drag your image, for example pattern1.jpg, into the Resources.

Now paste this in the Custom CSS (Page-Inspector > Header > CSS) with RapidWeaver 4:

body,html {background: url(assets/pattern1.jpg) repeat fixed left top;}

Paste this in the Custom CSS (Page-Inspector > Header > CSS) with RapidWeaver 5:

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

The name of your pattern in the Assets/Resources and in the Custom CSS must be exactly the same!

body

With the options in the Theme Styles > Body Background and Colors (see green rectangular in image above), it’s not possible to add a pattern. When you’ve selected one of these options only a HTML Background Colour is possible!
There is a folder with two background patterns in the download file to start with.
More free patterns:
http://subtlepatterns.com/
http://www.squidfingers.com/patterns/
http://www.kollermedia.at/pattern4u/dotted/ and many other websites.

5. Add your own Background image centered to the body
DO THIS ONLY WHEN YOU WANT TO CENTER AN IMAGE AND ONLY WITH ONE IMAGE!
FOR ALL OTHER BACKGROUND-IMAGES OR SLIDESHOWS USE THE FREE SLIDER STACKS OR THE SNIPPETS IN THE DOWNLOAD FILE

(When you would like a slideshow or background image go to Chapter 30 and 31)!

By default you can choose between 7 different background patterns, any color but I’ve added the option for a background-image (Universe) to the background of the body (go to Theme Styles > Body Background and Colors > Universe, example).

But you can add your own image too. Your image will always be centered. How to do this?

As an example image I’ve added the image Earth-at-night.jpg to the download file. Any image is possible (jpg or png), even a large logo.
Example.
A. Enable the button in the Theme Styles > Body Background > Custom Image (see image below).

body_image2

B. With RapidWeaver 4: Drag your image, for example Earth-at-night.jpg, into the Assets window (Page-Inspector > Header > Assets). With RapidWeaver 5: Drag your image, for example Earth-at-night.jpg, into the Resources.

C. Now paste this in the Custom CSS (Page-Inspector > Header > CSS) with RapidWeaver 4:

html {background: url(assets/Earth-at-night.jpg) no-repeat center center;}

Paste this in the Custom CSS (Page-Inspector > Header > CSS) with RapidWeaver 5:

html{background: url(%resource(Earth-at-night.jpg)%) no-repeat center center;}

The name of your image in the Assets/Resources and in the Custom CSS must be exactly the same!
In the Theme Styles > Body Background and Colors you can also choose for a ‘shadow’ or ‘noise’ image. This is only possible with a background-color, not with a pattern! See Chapter 6.

6. Add your own Background image to the Container
The Container is the horizontal strip with the Title and Slogan, Menu and Footer and the Open/Close Tab. By default you can choose between 6 different background patterns or any color to the background of the container. But you can add your own pattern image too
With RapidWeaver 4: Drag your image, for example pattern1.jpg, into the Assets window (Page-Inspector > Header > Assets).
With RapidWeaver 5: Drag your image, for example pattern1.jpg, into the Resources.

Now paste this in the Custom CSS (Page-Inspector > Header > CSS) with RapidWeaver 4:

#containerwrapper {background: url(assets/pattern1.jpg) repeat fixed left top;}

And this with RapidWeaver 5:

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

The name of your pattern in the Assets/Resources and in the Custom CSS must be exactly the same!
There is a folder with two background patterns in the download file to start with.

When you would like to add an image (height must be minimal 215px) paste this in the Custom CSS with RW5:

#containerwrapper {background: url(%resource(image.jpg)%) repeat-x left top;}


7. Add your own Background image to the Content Popup Panel
Example. When you click on the Open/Close Tab at the left side of the Container a panel with the Content and Sidebar shows up. By default you can choose only a color to the background of the Content Panel (Theme Styles > Other Colors > Content Popup Panel). But when you prefer a pattern or image do this:
With RapidWeaver 4: Drag your image, for example pattern1.jpg, into the Assets window (Page-Inspector > Header > Assets).
With RapidWeaver 5: Drag your image, for example pattern1.jpg, into the Resources.

Now paste this in the Custom CSS (Page-Inspector > Header > CSS) with RapidWeaver 4:

.panel {background: url(assets/pattern1.jpg) repeat fixed left top;}

And this with RapidWeaver 5:

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

(Don’t forget the dot before panel!). The name of your pattern in the Assets/Resources and in the Custom CSS must be exactly the same!
There is a folder with two background patterns in the download file to start with.

When you would like an image as background of the Content PopUp Panel repeat the steps above and replace the name of the pattern with the name of your image. You can also use an image on a server. Now paste this in the Custom CSS:

.panel {background: url(http://website.com/images/your_image.jpg) repeat left center;}


You can position the image when you replace the word left with center or right. And when you replace the word center in the code above with top or bottom.

In the Theme Styles > Miscellaneous you can add a semitransparent black content popup panel too. Read Chapter 33H when you like a white semi-transparent background.

8. The Open/Close Tab

popup2

By default you can choose only a color to the background of the Open/Close Tab (Theme Styles > Colors > Open/Close Tab Background). An image or pattern is possible too. In the Miscellaneous section you can make it even transparent.
By default there is an animated button image. You can also choose a Font Awesome Icon, an animated gif button and a word or text line.

ADD TEXT TO THE PULSATING BUTTON
(Example) When you would like a text bellow the pulsating button select this in the Theme Styles:
Button Image > Show Animated CSS3 Pulse 1 or 2.
Now paste this in the content or sidebar as Plain text:

<div id="myExtraContent3">Click here to open the content</div>

Or any other text.

Paste this in the Custom CSS to style the text (font-size is optional, 11px in this example):

#myExtraContent3 {display: block; font-size: 11px}

@media screen and (min-width: 600px) {
#myExtraContent3 {padding-top: 45px;}}

@media screen and (max-width: 600px) {
#myExtraContent3 {text-align: left; padding-left: 15px;}}

The padding-top is 45px in this example. Try any other number until you're satisfied. Do not change anything else.

ADD A FONT AWESOME ICON AS BUTTON IMAGE
Read this

WORD(S) TO THE OPEN/CLOSE TAB
(Example) When you would like a text to the Open/Close Tab (example) select this in the Theme Styles:
Button Image > Hide Button Image • Enable text in ExtraContent3.
Now paste this in the content or sidebar:

<div id="myExtraContent3">Click here to open the content</div>

Or any other text.
Paste this in the Custom CSS to style the text (font-size is optional, 18px in this example):

#myExtraContent3 {font-size: 18px;}

<!-- Don't replace anything below -->
@media screen and (max-width:600px) {
#myExtraContent3{font-size: 12px;}}

Or with a smaller font:

#myExtraContent3 {font-size: 18px; font-family: 'PT Sans Narrow', sans-serif;}

<!-- Don't replace anything below -->
@media screen and (max-width:600px) {
#myExtraContent3{font-size: 12px;}}

The text starts at the top of the Open/Close Tab. Paste this when you would like to have some more margin to the top (any number is possible, in this example 55px):

#myExtraContent3 {margin-top: 55px;}

<!-- Don't replace anything below -->
@media screen and (max-width:600px) {
#myExtraContent3{margin-top: 5px;font-size: 12px;}}

Or add an uppercase font:

#myExtraContent3 { text-transform: uppercase;}

With the option Theme Styles > Miscellaneous > Enable CSS3 Pulsating Icon/Text you can even animate your text.

ICONS AND TEXT IN THE OPEN/CLOSE TAB
On this page I've added a text in the ExtraContent3 area and a font awesome icon:

rapidcart

I've selected Theme Styles > Button Image >Font Awesome Icon 50px and added this as plain text in the sidebar:

<div id ="myExtraContent3">Click here to show all my products in my shopping-cart<i class="icon-shopping-cart"></i></div>

I made the margin-top a little smaller with this in the Custom CSS:

@media screen and (min-width: 600px) {
#myExtraContent3 [class^="icon-"],#myExtraContent3 .fa
{line-height: 2;}}

The line-height 2 is just an example. By default it's 3.8. Try some numbers.

When you want the txt a little lower, paste this in the Custom CSS:

@media screen and (min-width: 600px) {
#myExtraContent3 [class^="icon-"],#myExtraContent3 .fa
{line-height: 2;}
#myExtraContent3 {margin-top: 20px;}}

20px is an example.

You can select the ExtraContent3 font-size (11px here) in the Theme Styles > ExtraContent Font-Size or add this to the Custom CSS:

#myExtraContent3 {font-size: 11px;}

A PATTERN AS BACKGROUND
But when you prefer a pattern to the popup panel do this:
With RapidWeaver 4: Drag your image, for example pattern1.jpg, into the Assets window (Page-Inspector > Header > Assets).
With RapidWeaver 5: Drag your image, for example pattern1.jpg, into the Resources.

Now paste this in the Custom CSS (Page-Inspector > Header > CSS) with RapidWeaver 4:

a.trigger, a.trigger:hover, a.active.trigger {background: url(assets/pattern1.jpg) repeat fixed left top;}

And this with RapidWeaver 5:

a.trigger, a.trigger:hover, a.active.trigger {background: url(%resource(pattern1.jpg)%) repeat fixed left top;}

The name of your pattern in the Assets/Resources and in the Custom CSS must be exactly the same!
There is a folder with two background patterns in the download file to start with.
More patterns:
http://subtlepatterns.com/
http://www.squidfingers.com/patterns/
http://www.kollermedia.at/pattern4u/dotted/ and many other websites.

AN IMAGE AS BACKGROUND
When you would like an image as background of the Open/Close Tab (example with a blurred image) repeat the steps above and replace the name of the pattern with the name of your image. You can also use an image on a server. Now paste this in the Custom CSS:

a.trigger, a.trigger:hover, a.active.trigger {background: url(http://website.com/images/your_image.jpg) repeat left center;}


You can position the image when you replace the word left with center or right. And when you replace the word center in the code above with top or bottom.

9. Add text or an image to the ExtraContent 4 area (above the content)

I've added the ExtraContent4 container (above the Content in the popup Panel) to show your text or image. Paste this in the sidebar or content when you want some text lines above the Content:

<div id="myExtraContent4">This is the ExtraContent 4 container. Lore ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ut neque dolor, at scelerisque eros. Cras eu felis a odio semper accumsan. Integer velit diam, vestibulum id euismod at, cursus non leo.</div>

Now you've enabled the EC4 area. Select the complete code and go to RapidWeaver > Format > Ignore Formatting. That pinkish hue means that portion has been marked as “Ignore formatting”. In Preview you’ll see your text.

A. How can I add an image to the EC4 area?
The ExtraContent4 area is above the content text in the Popup panel.
• TUTORIAL 1 a. Paste this in the sidebar or in the Content as plain text: <div id="myExtraContent4"></div>
With this code you've enabled the EC4 area. Select the complete code and go to RapidWeaver > Format > Ignore Formatting. That pinkish hue means that portion has been marked as “Ignore formatting”.
b. Drag your image (jpg, gif or png), for example your_image.jpg, into the Assets window (Page-Inspector > Header > Assets) with RapidWeaver 4 or into the Resources with .
c. Paste this in the Custom CSS (Page-Inspector > Header > CSS) with RapidWeaver 4:

#myExtraContent4 {background: url(assets/your_image.jpg) no-repeat left top;}

Paste this in the Custom CSS (Page-Inspector > Header > CSS) with RapidWeaver 5:

#myExtraContent4 {background: url(%resource(your_image.jpg)%) no-repeat left top;}

In Preview your image will be displayed. When you would like to have the image in the EC4 responsive, paste this in the Custom CSS too:

#myExtraContent4 img {width:100% !important;height:auto !important;max-width:100%;}


This only works fine when your image has the same width or is wider than the Content Panel.

• TUTORIAL 2 a. Paste this in the sidebar or in the Content as plain text: <div id="myExtraContent4"></div>
b. Drag your image between <div id="myExtraContent4"> and </div>
The name of your image in the Assets and in the Custom CSS must be exactly the same.

RESPONSIVE. When you would like to have the image in the EC4 responsive, paste this in the Custom CSS:

#myExtraContent4 img {width:100% !important;height:auto !important;max-width:100%;}

This only works fine when your image has the same width or is wider than the Content Panel.

10. RapidCart (increase the margin-top of the Pop-up Content Panel).
When you use the plugin RapidCart for this theme (although I don’t think you can better use another theme for this) paste this in the Custom CSS to increase the margin-top (don’t forget the dot before panel!):

.panel {margin-top: 50px;}
@media screen and (max-width:600px) {
a.trigger,a.trigger:hover,a.active.trigger {margin-top: 45px;}
.panel{margin-top: 48px;}
#pageHeader{margin-top: 95px;}
#myExtraContent3 [class^="icon-"] {margin-top: 0px;}}


11. Container Opacity.
In the Theme Styles > Container Opacity you can select 7 different opacities to the background of the Container. When you prefer another opacity select one of these radio buttons (see image above within the pink fields) and paste this in the Custom CSS (Page-Inspector > Header > CSS):

#containerwrapper {
filter: alpha(opacity=45);
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=45);
-moz-opacity: 0.45;
opacity: 0.45;}


45 (and 0.45) is just an example. Try any number.

12. Width SubMenu.
By default the width of the submenu is 160px (with menu font-size 14px), 190px (menu 16px) and 220px (menu: 18px).
Increase the width, for example 250px (any number is possible), with this css code in the Custom CSS (Page-Inspector > Header > CSS) (don’t forget the dot before menu!):
.menu ul li ul li a {width: 250px;}

13. Letter-Spacing Title, Slogan, Menu and/or Footer.
By default the letter spacing in this theme is 0px. When you would like to increase the letter spacing of the Title paste this in the Custom CSS (Page-Inspector > Header > CSS):
#pageHeader h1 {letter-spacing: 12px;}

Have a look in Preview. When you make your browser smaller you’ll see that the letter spacing could be too much on a mobile device (it depends of the font-size and the length of the Title too). So now we’re going to make the letter spacing responsive too. To do this add the code below:

#pageHeader h1 {letter-spacing: 12px;}
@media screen and (max-width:768px) {
#pageHeader h1{letter-spacing: 8px;}}
@media screen and (max-width:600px) {
#pageHeader h1{letter-spacing: 4px;}}
@media screen and (max-width:480px) {
#pageHeader h1{letter-spacing: 2px;}}


And the same for the letter-spacing of the Slogan:

#pageHeader h2 {letter-spacing: 8px;}
@media screen and (max-width:768px) {
#pageHeader h2{letter-spacing: 6px;}}
@media screen and (max-width:600px) {
#pageHeader h2{letter-spacing: 4px;}}
@media screen and (max-width:480px) {
#pageHeader h2{letter-spacing: 2px;}}


And the footer:

#footer {letter-spacing:5px;}
@media screen and (max-width:768px) {
#footer {letter-spacing: 3px;}}
@media screen and (max-width:600px) {
#footer {letter-spacing: 2px;}}
@media screen and (max-width:480px) {
#footer {letter-spacing: 1px;}}


And the letter-spacing of the Menu (don’t forget the dot before menu!):

.menu {letter-spacing:3px;}
@media screen and (max-width:1024px) {
.menu {letter-spacing: 1px;}}


The numbers are all examples, increase or decrease them, but please have a look in Preview and/or on a mobile device! When you add a letter-spacing to the menu you can increase the width of the submenu:

14. Transparency SubMenu.
By default there is a minor transparency of the submenu. When you don’t like this, paste this in the Custom CSS (don’t forget the dot before menu!):

.menu ul li ul {
filter: alpha(opacity=100);
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=100);
-moz-opacity: 1;
opacity: 1;}


15. Hide the Breadcrumb Container.
When you have enabled the breadcrumb-container in the Site-Setup you can hide it on a page with this in the Custom CSS:

#breadcrumbcontainer {display: none;}


16. Underline Links.
By default the links in the Content are not underlined. You can select any color in the Theme Styles > Colors.
When you prefer underlined text decoration paste this in the Custom CSS (Page-Inspector > Header > CSS):

a:link {text-decoration: underline;}


17. Title, Slogan, Menu, Blog and Filesharing Title Lowercase font.
By default the Title, Slogan, Menu, Blog Title and Filesharing Title have Uppercase fonts. When you prefer a lowercase font paste this in the Custom CSS (Page-Inspector > Header > CSS) for the Title:

#pageHeader h1 {text-transform: none;}


And this for the Slogan:

#pageHeader h2 {text-transform: none;}


And this for the Menu (don’t forget the dot before menu!):

.menu ul li a {text-transform: none;}


And this for the Blog Title:

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


And this for the Filesharing Title:

.filesharing-item-title {text-transform: none;}


Or all together:

#pageHeader h1, #pageHeader h2, .menu ul li a, .filesharing-item-title,.blog-entry-title {text-transform: none;}


18. Uppercase font to Footer.
By default the Footer has a Lowercase font. When you prefer an uppercase font to the footer paste this in the Custom CSS (Page-Inspector > Header > CSS):

#footer {text-transform: uppercase;}


19. Hide the dotted line above the Footer.
By default there’s a dotted line above the FooterHide it with this in the Custom CSS (Page-Inspector > Header > CSS):

#footer {border-top-style: none;}


20. How to change the font-size and font-weight of the SidebarHeader?
By default the font-size of the sidebarheader is 16px.
Decrease the font-size with this css code in the Custom CSS (Page-Inspector > Header > CSS):

#sidebarContainer .sideHeader {font-size: 12px;}


More about the sidebarheader: see chapter 28.

21. Wider Open/Close Tab when Title/Slogan/Footer/Menu are hidden
By default there’s a Open/Close Tab at the left side of the browser. In the Theme Styles > Miscellaneous > Show only Open/Close Tab you can hide the Title, Slogan, Menu, Footer and ExtraContent5 area. The Tab is rather small now. When you would like to have a wider tab with this option paste this in the Custom CSS:

a.trigger,a.trigger:hover{padding: 0 30px;width: 62px;}


22. SearchBox in the ExtraContent area
You can add a searchbox in the sidebar, content or in any ExtraContent area (EC1, EC2 and EC4), but I would prefer ExtraContent 5.
How to do this?

A. Add a RapidSearch Page to your project. Read the Rapidsearch Users Guide (> RapidSearch):
"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 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="myExtraContent5"> and </div> it shows up in the EC5 area (see Chapter 2).

Another option is to put the code in the free ExtraContent stack and enable 5 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 myExtraContent5 with myExtraContent 1, myExtraContent 2 or myExtraContent 4 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) (example), 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="q" 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 :

fieldset input[type="submit"] {font-family: FontAwesome;}

And with a bigger font-size (16px is an example):

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


23. TextTime in the ExtraContent area.
Paste the code below 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="myExtraContent5"> and </div> it shows up in the EC5 area (see Chapter 2).
Another option is to put the code in the free ExtraContent stack and enable 5 in the settings of this stack.
Replace myExtraContent5 with myExtraContent 1, myExtraContent 2 or myExtraContent 4 in the code above when you prefer it in another ExtraContent area.

24. Date (US and European) in the ExtraContent area.
Paste the code below 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="myExtraContent5"> and </div> it shows up in the EC5 area (see Chapter 2).
Another option is to put the code in the free ExtraContent stack and enable 5 in the settings of this stack.
Replace myExtraContent5 with myExtraContent 1, myExtraContent 2 or myExtraContent 4 in the code above when you prefer it in another ExtraContent area.

25. 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="myExtraContent5"> and </div> it shows up in the EC5 area (see Chapter 2).
Another option is to put the code in the free ExtraContent stack and enable 5 in the settings of this stack.
Replace myExtraContent5 with myExtraContent 1, myExtraContent 2 or myExtraContent 4 in the code above when you prefer it in another ExtraContent area.

26. Toggle Content with the Hide 'n' Show stack.
With the Hide 'n' Show stack by Tsooj Media you can hide and show the content and the menu so your visitors can have a better look to the background image or slideshow.

Drag this stack into a Stacks2 page and go to the Side panel of this stack (see image). Now select the ExtraContent1 area (or the ExtraContent2 area) and paste this in the input field behind "Content ID(s)":
#container, #containerwrapper

Paste this in the input field behind "Content ID(s)" when you would hide the Title, Slogan, Footer and Menu, but not the Open/Close Panel at the left side:
#containerwrapper, #pageHeader, #footer, #myjquerymenu, #myExtraContent5, #logo

Hide the horizontal borders of the Container in the Theme Styles > Miscellaneous.

Chapter 33 explains how to use this stack when you would like to open the content automatically with a delay, for example after the background slideshow has finished.

There could be an issue with the submenu when using the 'delayed' option in the Hide and Show stack. Read this post how to solve this.

27. Letterpress effect to the Title.
Paste this in the Custom CSS to create a letterpress effect to the Title:

#pageHeader h1{text-shadow: 0 -1px 0px rgba(0,0,0,0.70);}

See this example. 0.70 is the intensity of the black color of the shadow. You can try other numbers.

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

TUTORIAL about the icons

• 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:

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 Font Awesome 3.2 names and icons here.
• ICON to the OPEN/CLOSE TAB

Schermafbeelding 2013-12-21 om 08.40.34

First select one of the Font Awesome Buttons in the Theme Styles > Button Image > Font Awesome 40px, 50px or 60px.
The link in the Open/Close Tab is in the ExtraContent3 area. So paste this in the Sidebar or Content as PlainText:

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

In Preview your icon shows up in the Open/Close Tab at the left side. Be sure always to end with the </div> tag!!!

Or paste the code <i class="icon-camera"></i> in the free ExtraContent stack and select EC3 in the settings of the stack.

Choose a color in the Theme Styles > Button Image > Font Awesome Button. A Letterpress effect is possible with this in the Custom CSS (Page-Inspector > Header > CSS):

#myExtraContent3 [class^="icon-"], #myExtraContent3 .fa {text-shadow: 0 -1px 0px rgba(0,0,0,0.60);}

0.60 is an example. 0.90 is more black and 0,35 is less black. It's up to you.

PULSATING FONT-AWESOME4 ICON IN THE OPEN/CLOSE TAB
Example. You can also select a pulsating button in the Theme Styles > Miscellaneous > Enable CSS3 pulsating Icon/Text. Try this for example in the Sidebar or Content:
<div id ="myExtraContent3"><i class="fa fa-info-circle"></i></div>
And now enable the option Theme Styles > Miscellaneous > Enable CSS3 pulsating Icon/Text.
Internet Explorer doesn't support this CSS3 animation.
Only enable this option when you have selected a Font Awesome Icon or Text in the EC3.

• 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 ExtraContent4:

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

By default the size in the ExtraContent5 is 24px.
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;}


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 Font Awesome 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:

<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 in the code above when you prefer it in another EC area (1, 2, 4 and or 5).

You can choose a color in the ‘Theme Styles > ExtraContentent Font-Size and Colours ’.

Tip: It could be nice to align icons at the right side of for example the ExtraContent4 in the popup panel.
To do this paste this in the Custom CSS:

#myExtraContent4 {text-align: right;}

In this example I have this in the Custom CSS:

#myExtraContent4 [class^="icon-"], #myExtraContent4 .fa {letter-spacing: 10px;font-size:24px;}
#myExtraContent4 {text-align: right;}

Or centered:

#myExtraContent4 {text-align: center;}

• MULTIPLE ICONS and SPACE between 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. Add a bit space between two icons with this character entity between each code &nbsp; once or a few times (paste it as plain text). 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
In the Theme Styles you can give the icons in the Content, Sidebar and ExtraContent 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:

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

For another color and a bit letter-spacing paste this in the Custom CSS:

#pageHeader h1 [class^="icon-"], #pageHeader h1 .fa {letter-spacing: 5px;color: #FF0000;}

#FF0000 is a HTML color code for red. More color codes here.

• MENU:
By default there is no FontAwesome icon before a page Title, see image below:

fai_menu

Personally I don't like the use of them in a menu. But that's up to you.
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>

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

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

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

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

For another color and a bit letter-spacing paste this in the Custom CSS:

#footer [class^="icon-"], #footer .fa {letter-spacing: 5px;color: #FF0000;}

#FF0000 is a HTML color code for red. More color codes here.

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

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

#contentContainer #content .blog-entry-title a:link [class^="icon-"],
#contentContainer #content .blog-entry-title a:link .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 (example):

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

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

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

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

29. Make your images fluid (responsive).
Built-in is an option to make your images fluid (responsive), whether they are in the content or in the sidebar (anywhere in your page). Very simple, read the next page.

• Option 1: Drag your image in the content or sidebar, double-click on it or 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 (image left) or in an image stack (image right):

flexible

To see it in action, open the content 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 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.

Test a working example in your website and have a look in preview:
<img src="http://www.henkvrieselaar.com/tulips/tulip3.jpg" alt="flexible">

30. How to add a browser-wide background slideshow to your webpage.
Note: to achieve fast loading pages 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. So add only 72dpi images otherwise you will have a problem with the theme loading all the time.
Among the great image software like Photoshop there are some great and free web apps which you can add to your own tools for editing images. Very useful for quick changes or for compressions to speed up your page loading times...
For example http://ipiccy.com, http://rsizr.com and http://www.cutmypic.com

There are two ways to show your own images in a background slideshow (see next page):
A. With the free HV-Slider stacks set. You’ll need the Stacks2 plugin for this (both not included in the download file). I would prefer this option: it’s simple and fast. There's an example project in the download file of the Slider stacks.
These stacks don’t work with some plugins (for example Formloom). When you use a not-stacks page (Blog, Filesharing, etc.), you can import a Stacks page with the Slider stacks with Pluskit or with the Global Content stack in any other page.
B. With the free HV-BlowUp snippets in the download file (see Chapter 31).
With some plugins (Formloom, Cartloom, etc.) the slideshow doesn’t show up. Please read Chapter 34 how to solve this.

By default when you open a new page and add a background slideshow with the Slider stacks or the BlowUp snippets you won’t see the name of the images and the slide controls.
When you click on the radio-button “Show Controls” in the Theme Styles > SlideShow Controls (see image below) the counter and buttons for Pause, Next
and Previous show up in the bottom right corner of your browser window.

controls2

When you’ve added a slidecaption to the images in the Slider stacks or Blow-Up snippets it appears before the counter.
When you are offline these buttons don’t show up.

Smaller font-size Slide Caption and Slide Counter. Paste this in the Custom CSS:

#slidecaption, #slidecounter { font-size: 10px;}

Another thing: do not overwhelm your visitors with hundreds of pages with photos. Personally I should use this theme within a project made with another theme, just to show your portfolio.

When you like this theme for a certain page in your project go to RapidWeaver > Page Inspector and choose another theme in the popup menu.

!!! READ THIS A BEFORE YOU SEND ME AN EMAIL ABOUT THE QUESTION MARK WHEN YOU HAVE ADDED A BACKGROUND SLIDESHOW:
question
When you click in Preview mode on the Pause button in the Navigation Bar at the bottom of your page you'll see an image with a question mark (see image left).
Don't worry, this is only happening in Preview. After uploading your project you won't see these ?-buttons anymore.

RESPONSIVE SLIDESHOW
The responsive Outline resizes images to fill the browser while maintaining image dimension ratio. When you're using the free HV-Slider stacks (or the snippets in the download file) for adding your background-images, and make your browser smaller a part of the image will be 'cut' off on your mobile device.
When you don't like this and prefer a fluid background-image select these options in the free HV-Slider stacks (or in the snippets):
With these settings in the HV-Slider Stack your background slideshow will be more or less "responsive":

respons_setting

31. When using the Blow-Up snippets.
A. QUICK START
Open a RapidWeaver Page with this theme. Go to Page-Inspector > Header > Header and drag the Blow-Up Example snippet (please install it first) in the Custom Header. Now your slideshow is playing!

B. ADDING A BACKGROUND SLIDESHOW WITH MY IMAGES
Not needed when you use the free HV-Slider stacks!!!!!
This HV-OUTLINE theme uses the same snippets as the BLOW-UP and XENSE themes. So when you already have these themes it's not needed to install these snippets again.
Step 1: Double-click on the snippet hv-blowup-example.rwsnippet (it's in the download file) to install it just like a theme:
Alternatively you can drag the snippet to the folder (username) / Library/Application Support/RapidWeaver/Snippets.
Once installed you need to restart RapidWeaver for the changes to take effect. Then from the View Menu you can access the Snippets Window.
Step 2: Drag and drop this snippet from the Snippets View Menu into the Custom Header.
Step 3: In Preview you see a slideshow with three tulip images. Please read chapter 8 > THE SETTINGS how to customize your slideshow.
Isn't that simple? Now we are going to add your own images (chapter C below):

C. ADDING A BACKGROUND SLIDESHOW WITH YOUR OWN IMAGES
DO NOT READ THIS PART WHEN YOU USE THE FREE HV-SLIDER STACKS!
Note: to achieve fast loading pages 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. So add only 72dpi images. Ideal file size or dimensions for images? I always strive for <200kb or a maximum height/width of 1200px, but you can play around with it based on how many images you have loading. If you are using hundreds of 2mb images, knock it off.

OK, in the previous chapter you've seen how it works with my images. Now we are going to use your own images.
THE SNIPPETS: Not needed when you use the free HV-Slider stacks This HV-OUTLINE theme uses the same snippets as the HV-BLOW-UP themes.
So when you already have the Blow-Up theme it's not needed to install these snippets again.

1. First install these snippets, they are all in the download file:

snip

So these snippets are not needed when you use the free HV-Slider Stacks!!!!!
When you’re working with RW5 it’s not needed to install the rw4 snippet. When you don't want to use Flickr images don’t install this snippet too.

The first snippet is an example with links to images on my server (see 'THE IMAGES' below) so you can start immediately. The second one is for RapidWeaver 4, the third one for RapidWeaver 5 and the fourth snippet can be used with both RapidWeaver versions when your background images are on a server.
Double-click on the snippet to install it just like a theme. Alternatively you can drag the snippet to the folder (username)/Library/Application Support/RapidWeaver/Snippets). Once installed you need to restart RapidWeaver for the changes to take effect.

Then from the View Menu you can access the Snippets Window. From there you can simply 'Drag and Drop' the code into the Custom Header (Page-Inspector > Header > Header):
snippets
Increase the width of the Custom Header so you have a better view to all settings.

About adding your images with the snippets.
In the examples below and in the snippets are only three text lines with images.
Add as many text lines as you like but be sure that there must be NO COMMA AT THE END OF THE LAST TEXT LINE (see red arrow in the image below). So a comma behind each line (see green arrows), except the last one (!!):

comma

This is really very important! With a comma your images don't show up with Internet Explorer!

There are different ways to add your images. You can store them somewhere on your server, you can add them to the Assets window (with RW4) or drag them to the Resources (with RW5).
OK, here we go. Choose an option below (RW4, RW5 or online) where your images are.

• With your images on a server (with RapidWeaver 4 and 5).
This option is preferable, because uploading your website will be very fast. Not needed when you use the free HV-Slider stacks
First store your images on your server. You can do this with Transmit, Cyberduck, etc. At the bottom of the script in the Custom Header you'll see this:

{image : 'http://www.website.com/your_image1.jpg', title : 'Photo Text 1', url : 'http://www.website.com/'},
{image : 'http://www.website.com/your_image1.jpg', title : 'Photo Text 2', url : 'http://www.website.com/'},
{image : 'http://www.website.com/your_image1.jpg', title : 'Photo Text 3', url : 'http://www.website.com/'}


Don't change anything else to this script. As you can see every line ends with a comma, except the last one! When you don't want an image link leave this space empty, so it will be this:

{image : 'http://www.website.com/your_image1.jpg', title : 'Photo Text 1', url : ''},

You may change the link http://www.website.com/your_image1.jpg (your image name without spaces!), the text in the navigation bar (Photo Text 1) and the link text http://www.website.com/ (the url of a website, when you click on the image you'll be directed to this website. There's no link when you've selected an overlay, see Chapter 15).

When your images are in a folder, for example with the name 'images' (any name is possible, but without spaces!), replace
http://www.website.com/your_image1.jpg with http://www.website.com/images/your_image1.jpg
You don't have patience and you would like to see an example immediately? There's an extra snippet in the download file with links to 3 tulip images. Drag this one in the Custom Header and go to Preview...

• With your images in the Resources of RapidWeaver 5:
Not needed when you use the free HV-Slider stacks
At the bottom of the script in the Custom Header you'll see this:

{image : '%resource(your_image1.jpg)%', title : 'Photo Text 1', url : 'http://www.website.com/'},
{image : '%resource(your_image2.jpg)%', title : 'Photo Text 2', url : 'http://www.website.com/'},
{image : '%resource(your_image3.jpg)%', title : 'Photo Text 3', url : 'http://www.website.com/'}


Drag your images into the Resources and replace the links to your images, the caption text (Photo Text1 here) and the link text with your own.
Don't change anything else to this script. As you can see every line ends with a comma, except the last one! When you don't want an image link leave this space empty, so it will be this: {image : '%resource(your_image1.jpg)%', title : 'Photo Text 1', url : ''},

When your images are in a folder, for example with the name 'images' (any name is possible, but without spaces!),
replace %resource(your_image1.jpg)% with %resource(images/your_image1.jpg)%

• With your images in the Assets of RapidWeaver 4:
Not needed when you use the free HV-Slider stacks
At the bottom of the script in the Custom Header you'll see this:

{image : 'assets/your_image1.jpg', title : 'Photo Text 1', url : 'http://www.website.com/'},
{image : 'assets/your_image2.jpg', title : 'Photo Text 2', url : 'http://www.website.com/'},
{image : 'assets/your_image3.jpg', title : 'Photo Text 3', url : 'http://www.website.com/'}


Drag your images into the Assets window and replace the links to your images, the caption text (Photo Text1 here) and the link text with your own.
Don't change anything else to this script. As you can see every line ends with a comma, except the last one! When you don't want an image link leave this space empty, so it will be this:
{image : 'assets/your_image1.jpg', title : 'Photo Text 1', url : ''},

There's no link when you've selected an overlay, see Chapter 31).
When your images are in a folder, for example with the name 'images' (any name is possible, but without spaces!),
replace assets/your_image1.jpg with assets/images/your_image1.jpg

• Fix the "thin font" effect between two slides
With Safari and some slide show plugins or stacks you'll notice that the font is changing in a thinner version when the next slide shows up. Safari has a not-so-lovely way of bulking up text using sub-pixel rendering. When you have a look in FireFox, Chrome, Internet Explorer or any other browser you'll don't see this.
This only happens with the snippets, not with the Slider stacks (here it's solved within the Stacks Library).
To avoid this when using the snippets, paste this in the Custom CSS:

body {-webkit-font-smoothing: antialiased;}

When your fonts will be too thin now, paste this in the Custom CSS:

body {font-weight:bold;}

Or only to the pup up panel:

.panel {font-weight:bold;}


• HIDE NAMES and/or LINKS

When you don't want a name displayed in the navigation bar leave the magenta part in the code above empty, but do not remove the quotation marks!
When you don't want a link to a website leave the blue part empty, but do not remove the quotation marks!

• THE SETTINGS (Not needed when you use the free HV-Slider stacks)
Below you see a part of the settings in the script of the snippet in the Custom Header. There are many options to customize your slideshow in this script. It looks difficult but it's really very simple! Just try it.
• Important. Be sure that you don't remove the comma behind each number!

Slideshow
Turns the slideshow on/off. Disables navigation and transitions.
Autoplay
Determines whether the slideshow begins playing automatically when the page is loaded (default is on), (1 = on, 0 = off).
Start Slide
The slide the slideshow starts on. 0 causes a random image to be loaded. By default it's 1.
Stop Loop
Pauses slideshow upon reaching the last slide, (1 = on, 0 = off).
Random
When on, slides are shown in a random order and the starting slide number will be disregarded (default is off), (1 = on, 0 = off).
Slide interval
Time between slide changes in milliseconds. The default is 3 seconds (3000ms).
Transition
Controls which effect is used to transition between slides. Options are as follows:
1 = Fade effect (Default)
2 = Slide in from top
3 = Slide in from right
4 = Slide in from bottom
5 = Slide in from left
6 = Carousel from right to left
7 = Carousel from left to right

Speed of transition
The time transitions take in milliseconds (default is 500 milliseconds).
New window
Whether or not slide links open in a new window (default is on), (1 = on, 0 = off).
Pause Hover
Pauses slideshow while current image image hovered on, (1 = on, 0 = off).
Progress Bar
(1 = on, 0 = off). Progress Bar that runs based on the slide interval.
Keyboard Navigation
Allows control via keyboard, (1 = on, 0 = off). Spacebar - Pause or play
Right arrow or Up Arrow - Next slide
Left arrow or Down Arrow - Previous slide
Image protection
Disables right clicking and image dragging using Javascript (default is off), (1=on, 0=off).
(When you've selected the option to show the previous and next thumbnail these images can be dragged to the desktop, so they are not protected).
Minimum width allowed, Minimum height allowed
Minimum dimensions the image is allowed to be. If either is met, the image won't size down further (default is
0). When all your images are for example 1024 x 768 px you could replace the numbers 0 with 1024 (width) and 768 (height). But I should keep both on 0.
Center the background vertically
Centers image vertically. When turned off, the images resize/display from the top of the page (default is on), (1 = on, 0 = off).
Center the background horizontally
Centers image horizontally. When turned off, the images resize/display from the left of the page (default is on), (1 = on, 0 = off).
Fit always
Prevents the image from ever being cropped. Ignores minimum width and height.
Fit portrait
Prevents the image from being cropped by locking it at 100% height, (1 = on, 0 = off).This will usually cause
vertical images to not cover the window entirely. With 1 (by default) your image shows up in portrait format, see image below:

fit

Tip: Choose a background-color in the Theme Styles > Colors.
Fit landscape
Prevents the image from being cropped by locking it at 100% width (default is off), (1 = on, 0 = off).This will usually cause horizontal images to not cover the window entirely.

• Just change some options in the script in the Custom Header or in the Slider stacks to see what happens.

32. Codes for the Sidebar header
Line Break
http://www.w3schools.com/TAGS/tag_br.asp
Inserting a single line break with the </br> tag. You can insert as may </br> tags as you like.

FontSize, Fontstyle and FontColor
The <font> tag specifies the fontsize and fontcolor.
<font size="3"<Text</fon> Text
<font color="#FF0000">Text</font>Text *
<b>Text</b>Text (bold)
<i>Text</i>Text (italic)

* More about colorcodes: http://www.w3schools.com/Html/html_colors.asp

Image in the SideBar Header.
With RW4: Add your image(s) with PageInspector > Page Assets.
With RW5: add your image(s) in the Resources
Paste this code in the SideBar Header with RW4:
<IMG src="assets/image.jpg"></A>
Paste this code in the SideBar Header with RW5:
<IMG src="%resource(image.jpg)%"></A>

Or use an external image (image on your server or somewhere on the internet):
<IMG src="http://www.website.com/image.jpg" height="100" width="200">

Link to Website
Paste this code in the SideBar Header:
<A href="http://www.mywebsite.com">My Website</A>

How to use an Image as Link
Add your image(s) with PageInspector > Page Assets.
Paste this code in the SideBar Header:
<A href="http://www.yourwebsite.com/"><IMG src="assets/image.jpg"></A>

Or use an external image (image on your server or somewhere on the internet):
<A href="http://www.yourwebsite.com/"><IMG src="http://www.website.com/image.jpg"></A>

Link to EmailAddress
Paste this code in the SideBar Header:
<A href="mailto:youremailaddress@mac.com">Contact Me</A>
<A href="mailto:johndoe@mac.com">email John Doe</A>

33. Extra CSS and more
A. In the Theme Styles > Container Background and Colors you can select a color for the horizontal top and bottom border of the container. When you prefer different colors to the top and border bottom paste this in the Custom CSS:

#container{ border-top-color: #FFFFFF ; border-bottom-color: #000000;}

Looks great with the Glass Effect option.
#FFFFFF is a HTML color code for white, #000000 is black. More color codes here.
This is an example.

B. Safari has a not-so-lovely way of bulking up text using sub-pixel rendering. With Safari add this to the Custom CSS (Page-Inspector > Header >CSS):

body { -webkit-font-smoothing: antialiased;}

This option is build-in in the HV-Slider stacks.

C. By default the sidebar is below the Content area. When you have a Blog page, the Categories and Tags are in the sidebar, so at the bottom of your content. The sidebar has a background-colour (select a color in the Theme Styles). With a few words in the sidebar it can be rather small. Make it as wide as the content with this in the Custom CSS:

#sidebarContainer {float: none;}

D. With the Hide 'n' Show stack (see Chapter 26) it’s possible to open the content automatically with a delay, for example after the background slideshow has finished. The image below shows the settings of the stack:

delay

Choose “Show (delayed) (1), the delay is up to you: in this example the delay it’s 2500ms. Set the Theme Definition (2) to ‘Custom’.
The Content ID (3) is .panel (don’t forget the dot!).

IMPORTANT: disable the button in Theme Styles > Miscellaneous > Content Panel Open by Default!

E. In the Page-Inspector > Theme Styles > Opening Speed of Content you can choose three different speeds: slow (= 800ms), medium (= 500ms) or fast (= 200ms). When you prefer another speed paste this in the Custom Javascript (Page-Inspector > Header > Javascript):

intOutlineContentSpeed = 3000;

The speed is now 3000ms.

speed

F. Make the Content Panel transparent with this in the Custom CSS, for example when you use the El Tint-o stack (example):

.panel {background-color: transparent !important;-webkit-box-shadow: none;-moz-box-shadow: nonebox-shadow: none;}
#breadcrumbcontainer {display:none;}

Read More about the Panel background in the RapidWeaver Forum posts here.

G. Hide the Vertical Line (Border Right) when you select Miscellaneous > Show Transparent Open/Close Tab and paste this in the Custom CSS:

a.trigger,a.trigger:hover,a.active.trigger{border-right-style: none;}


H. Hide the Footer on your iPhone with this in the Custom CSS (Page-Inspector > Header >CSS):

@media screen and (max-width: 480px) { #footer {display: none;}}


And on your iPad ánd iPhone:

@media screen and (max-width: 768px) { #footer {display: none;}}

I. With this option enabled in the Theme Styles > Miscellaneous > Semi-Transparent Content Panel Background the content background will be semi-transparent black. When you prefer a white semi-transparent background, paste this in the Custom CSS (Page-Inspector > Header >CSS):

.panel{background:rgba(255,255,255, 0.9);}

Example
J. With this in the Custom CSS the built-in Photo-Album page will be centered:
.

album-description,.album-wrapper,.album-title {text-align: center;}
.thumbnail-wrap {display: inline-block; float: none;}

In this example I've used the Contact Form stack by Doobox. I've also added this to the Custom CSS to make the text area semi-transparent too:

.panel textarea{ background-color:transparent !important;}

K. It's possible to change the vertical position of the main strip (the container) (by default it's vertically centered on your screen). To do this paste this in the Custom CSS:

@media screen and (min-width:600px) {
#container, #containerwrapper {top:70%;}
html {margin-top: 155px;}}

70% and 155px are examples. Adjust these numbers until you're satisfied.
34. Issues with the Background Slideshow and some plugins

Some 3d party plugins don't work with OUTLINE, such as Formloom2, Cartloom, symNivo, etc. There’s a fix for it but not with the HV-Slider stacks! So with these pages you should use the HV-Blow-Up snippets in the downloadfile. When you paste for example the HV-Blow-Up EXAMPLE snippet you see these 3 lines at the top:

<script type="text/javascript">
jQuery(function($){
$.supersized({


As you can notice the slideshow isn’t working with the plugins Formloom, Cartloom, symNivo, etc.
So with these pages replace this part with:

<script type="text/javascript">
var $jq = jQuery.noConflict(true);
jQuery(function(jQ){
jQ.supersized({


Now your slideshow or background image shows up.


-------------------------------------------------------------------------------------------------------------------------------------------

HV-OUTLINE may not be resold or redistributed without the express written permission of Henk Vrieselaar:
http://www.henkvrieselaar.com/rapidweaver/contact/
JANUARY 2014 - Please post your comments and questions on the RapidWeaver Forum.