HV-TABS MANUAL
This theme is created in collaboration with Tsooj Media.

In the download file are:

• HV-TABS theme
• HV-TABS stack (Menu + SlideShow)
• ExtraContent snippets
• Example project

First a note about the MENU (see image below)

menu22

THE BUILT-IN MENU (image: left)
This theme is, amongst others, developed from the idea to have a slideshow that isn't interrupted by clicking on a menu item that leads you to a new page.

That's why this theme is built differently than the usual RW-themes. If you open an existing project you will notice that you won't see any menus.
OK, there is a built-in menu (see the green rectangular in the image above). This is useful with for example a Blog- or PhotoAlbum page or with 3d-party pages or stacks which cannot be imported with the Pluskit plugin.

Just click on this button (BUILT-IN MENU) in the Theme Styles:
In the upper right corner of the container a menu button shows up which uses the Rapidweavers Menu System:

button

When you click on it the menu shows up. Submenu's are disabled.
THE TABS MENU STACK (image: right)
But please skip the previous part first, and select the other button (TABS STACKS MENU): by default there's no menu now but you can make it with the TABS-stack from Tsooj Media (read Chapter 2) (see blue rectangular in the image above).

Additonally the loading of a 'page' (a tab) is much faster than loading a new RW-page. The slideshow in the background (optional) is made with the TABS-slideshow stack from Tsooj Media (Read Chapter 8).

Both TABS stacks are extremely simple to use: in an instant you have your menu, tabs and all your photos in the theme.
BUT I LIKE A NORMAL MENU…
When you don't like one of both one-level menus above, but a 'normal' menu with a submenu? Marathia Stacks made the AltTabsMenu stack which uses Rapidweavers Menus System. With this responsive stack you'll get the same lay-out and look of the Tabs stacks above.

And another option is the responsive One-Level-Menu stack by DeFligra. This stack also uses the Rapidweavers Menu-System.

Another important note:
A. Go to your Rapidweaver5 preferences, and ensure that all options below are enabled (see image left)!
• Consolidate CSS files
With RW6 this option is already enabled by default.

This makes exports of your project and uploading of your website faster, it gives an improved Internet Explorer support and it must be enabled in order for the Preview button to display then built-in Manual.

B. The Capriola font (Theme Styles > Content Font) is a Google font. It only shows up when you are online. Local preview doesn't work. All other fonts show up when you’re offline and online.So when you’re working offline this font is not visible! All other fonts show up when you’re offline and online.

C. This theme works fine with Rapidweaver 4 and 5/6, but NOT with all plugins and stacks. When you have questions about this theme feel free to post them on the RapidWeaver Forum (preferrable), 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. Importing plugins or stacks into the content of a tab is not always possible. But you can import them in an ExtraContent area or in the sidebar. When a stack doesn't work with this theme, then this is caused by a conflict with the scripts used in this theme. I'm sorry, but I cannot solve this.

Read Chapter 21 about adding the built-in Photo-Album page to your project.
Read Chapter 11 about adding the built-in Contact page to your project.

Links between tabs are not possible.

D. This theme works fine in all modern browsers (IE8+, Safari, Firefox, Opera, Camino, etc.) and on your iPhone/Android and iPad/tablet. With IE7 the Tabs Titles display as an Accordion.

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.

WHAT'S IN THE MANUAL
1. How to install a theme
1a. Applying Custom CSS Code
2. Add a Menu with the TABS stack
2a. Create a link to another tab
3. The Title and Logo have a link with your website
4. Position of the Logo
5. Fluid images with the flexible tag
6. Content (Semi)Transparent
7. Add a Background Pattern to the body, container or content
8. Add a Slide Show to the body with the TABS Slideshow stack
9. Add a Slide Show or Image to the body with a not-Stacks page
10. Underline Links
11. Importing a Contact page
12. Importing a Blog page
13. Searchbox
14. TextTime script
15. Date (US and European) script
16. Mail a Friend script
17. ExtraContent
18. Issues with stacks, plugins, etc
19. More CSS
       A: Letterpress
       B: Text Shadow
       C: Different font to Blog or Filesharing Title
       D: Bold font to Tab Title
       E: Opacity to ExtraContent 1 or 2
       F: Text-Align to ExtraContent
       G: Rounded or Square corners
20. Font Awesome Icons:
       Start with your first FontAwesome Icon
       Size of the FontAwesome Icons
       Color of the FontAwesome Icons
       Add a Letterpress effect or shadow to your FontAwesome Icon
       Add a link to your FontAwesome Icon
       Multiple icons
       Each icon a different color
       Icons with text
       NEW How to use the Latest FontAwesome icons
21. Tutorials

1. How to install a theme
To install the HV-TABS theme double click on the theme to install it automatically.

Then restart RapidWeaver: the new theme will appear in the themes drawer. The theme name in the theme drawer will be HV-TABS. 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.

1a. Applying Custom CSS code
The HV-TABS 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: 20px;}

but

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



2. Add a Menu with the TABS stack
In the download file of this theme is a HV-TABS stack. Install this stack. After the installation has completed, you must restart RapidWeaver if it was open during installation.
With the TABS Menu stack you can easily add menu tabs to your webpage. This stack set is designed for use with RapidWeaver 5 and the Stacks Plugin version 2.
Automatic Updates of this stack: In case an update of the TABS stack is available you'll notice a small "red exclamation icon" next to the TABS stack from within the Stack Elements Library. 

A. After installation of the TABS stack the following stack is available in the Stack elements library:

stacks2

1 is the TABS Menu stack (read B) , and 2 the TABS Slide show stack (read Chapter 9).

B. After adding the TABS stack (1) you can start with adding your stacks by dropping as "many" other stacks elements (text stacks, columns stacks, image stacks, etc.) inside the HV TABS stack. By default we've added 3 Tab titles and 3 places where you can add your content elements:

tabs_menu

Setting the number of tabs is done via the Stacks Side Pane:

tabs2

Replace the default text "Tab title" with your own menu text value, for example Home and/or with a Font-Awesome Icon (see D.)

C. Select one of these options in the Theme Styles > Menu Tabs Stacks:

tabslook

When you've selected the Accordion style, you can choose the items to start open or closed:

acc

After dragging some stacks have a look in Preview. Choose Menu Font-Size and Colors in the Theme Styles of the theme.

D. Instead of a Text for the Tab Title you can add a Font Awesome Icon (read Chapter 20) too. For example paste this as plain text:

<i class="icon-home"></i>Home

Select this and go to RW > Format > Ignore Formatting.

Or without a text, so only an icon:

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

Select one of these options in the Theme Styles:

iconstext

Select "Icon with Text" when you put an icon before a text. The default option is with only text or with only an icon in the Tab Title.

Select a Font-Size in the Theme Styles > Menu Tabs Font-Size (14px - 32px) and Colours

With this in the Custom CSS you'll get a larger font-size (50px is just an example) to the Font-Awesome Icon:

.responsive-tabs__list [class^="icon-"],
.responsive-tabs__heading [class^="icon-"] {
font-size: 50px;}

All Font-Awesome Icons.

E. PHOTO ALBUM. Instead of a Text for the Tab Title you can add thumbnails too.
To prevent that the thumbnails are in a column instead of being in a strip across the top of the picture on your mobile, paste this in the Custom CSS (or in the 'custom css' file in the Contents of the theme, see Chapter 1a) :

.responsive-tabs__list { display: block;} .responsive-tabs__heading { display: none; }
.responsive-tabs__panel {margin-bottom: 0px;}

But that's up to you. This is an example. When you like a hover effect, paste this in the Custom CSS:

.responsive-tabs__list__item {opacity: 0.70;}.responsive-tabs__list__item:hover {opacity: 1;}

And this is an example without thumbnails.

About thumbnails: you can make a thumbnail of each large image with an image editor like Photoshop. But there's an easier way to do this.
When your images are online, the link to an image is for example this: http://www.henkvrieselaar.com/tulips/tulip3.jpg
Paste this code in your browser window to see the image.
Now we're going to make a thumbnail of this image link. Paste this in the Tab Title area as plain text (or select it and choose in the RW menu Format > Clear Formatting):

<img src="http://www.henkvrieselaar.com/tulips/tulip3.jpg" height="40" width="60">

The height and width are 40px and 60px here. Any dimension is possible.

F. Creating a "submenu": drag a new Tabs stack element inside a Tabs stack:

subtabs

Or create a submenu with other menu stacks. Marathia Stacks made the AltTabsMenu stack which uses Rapidweavers Menus System. With this responsive stack you'll get the same lay-out and look of the Tabs stacks above.
When you want to decrease the margin between this menu and the content, paste this in the Custom CSS:

#myExtraContent3 .Tmenu {margin-bottom: 0px !important;padding-top: 0px !important;}


And another option is the responsive One-Level-Menu stack by DeFligra. This stack also uses the Rapidweavers Menu-System.
Or enable the button Theme Styles > MENU > BUILT-IN MENU ánd add the HV-TABS stack: now you've the built-in menu ("main menu") and the menu stacks ("sub menu") on one page.

2a. Create a link to another tab
Create a link to another tab? Highlight the text or an image you want to link, and then click the ‘Add Link’ button. Now a popup window shows up (see image below):

tabs_link

1. Add # in the input field behind URL.

2. Click on the [+] button below the Custom Attributes table. On the selected line, double-click the area below the ‘Name’ heading.
In the selected text area, type class and below 'Value' type hv-tabs-tab.

3. Click on the [+] button again. On the selected line, double-click the area below the ‘Name’ heading.
In the selected text area, type data-property and below 'Value' type the tab number, for example 2 when you want to link to tab 2. Replace the number for another tab.

Now you're ready. Click on "Set Link". Test this in preview. See this example (click on Slide Show or Movie).
It's also possible to make a link outside theTabs stack to a tab, see this example.

Create a link to another url
You can also link a Tab to an external link. For example to the Apple website. To do this paste this as plain text in the Tab:

<A href="http://www.apple.com/" target="_blank">Apple</A>


Just replace
http://www.apple.com with your own url, and Apple with another word.

3. The Title and Logo have a link with your website
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. Of course this is only useful with the BUILT-IN menu or a menu stack.

4. Position of the Logo
Drag your Logo into the Site Setup > Logo area. it shows up above the Title. The logo is responsive.
Only JPG, PNG or GIF images are allowed!
You can also drag your logo into the sidebar (below the main Content area) or in the ExtraContent1 area. Now your logo has no link to the index.html (of course this is only useful with the BUILT-IN menu or a menu stack), so you have to make a link manually.

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

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

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

media_editor2

or in an image stack:

stack_image

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

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

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

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

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

6. Container (Semi)Transparent
In the Theme Styles > Container Background you can enable the button “Container > Colour (default), Semi-Transparent Black or White or Transparent”.
Perhaps you prefer a ‘darker or lighter black’. To do this, first select the Colour (Default) option. Now paste the code below in the Custom CSS (or custom css file, see Chapter 1a) and increase or decrease the number in this code 0.55 to make it more or less black, for example 0.15 or 0.65 or whatever (IMPORTANT: This works with all browsers, but not with IE6, IE7 and IE8!):

#container {background-color: rgba(0,0,0,0.55) !important;}


Not black but white? Paste this in the Custom CSS:

#container {background-color: rgba(255,255,255, 0.20) !important;}


Other colors? Read this.

7. Add a Background Pattern to the body, container or content
By default you can choose a color in the Theme Styles > Other Colours > Body Background. It could be nice to add a pattern to the background.

How to do this:
Step 1: Download a pattern from the internet (see below). There are some patterns in the download file to start with.
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):

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


Or to the Container:

#container {background: url(%resource(pattern1.jpg)%) repeat !important;}


Or to the content:

#contentWrapper {background: url(%resource(pattern1.jpg)%) repeat !important;}


With RW4: replace the part

background: url(%resource(pattern1.jpg)%)


with

background: url(assets/pattern1.jpg)


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

8. Add a Slide Show or Image to the body with the Tabs Slideshow stack
In the download file of this theme are two TABS stacks (see Chapter 2A). With the TABS Slide Show stack you can easily add images to the background of your webpage. This stack set is designed for use with RapidWeaver 5 and the Stacks Plugin version 2.

To achieve fast loading pages and normal image transitions, it is best to optimize your images before uploading to your website or adding them into the RapidWeaver 5 Resources.

IMPORTANT: what about loading speed and image file size?

You can achieve this using your favorite image editor and choose "Save for Web & Devices". Set the DPI value at 72 and use a maximum height/width amount of 1200 pixels. Of course it's best to test your full screen Slideshow on multiple devices and try to lower the maximum amount of the heigth/width when possible. Try to strive for a file size that is below 200kb, keep you image file size small and your website visitors happy. 



A. After installation of the TABS SlideShow stack the following stack is available in the Stack elements library:

tabs_slideshow

B. After adding the TABS stack you can start with adding your images via the Stacks Side Pane:

tabs_images

Click on the first "Set Link" button to open up the RW built-in Link dialog, add a full URL (first image below) or use one of your images that is placed inside the RapidWeaver Resources (second image below):

link1

link_res

With the Slide Controls buttons you can navigate through your images. By default they are not visible. Enable the button Show in Theme Styles > Slide Show Controls. By default the Slide Show Speed is Slow. Click on the buttons Slideshow Speed > Medium or Fast for another speed.

Instead of this stack you can add images or a slide show with the bgStretcher stack. The Slide Controls buttons will not display with this stack.

9. Add a Slide Show or Image to the body with a not-stacks page
There are two options:

1. Import a Stacks page with the TABS slide show stack or a Stacks page with the bgStretcher stack in a not-stacks page (Contact, Blog, Filesharing, Sitemap, etc.) with the @import(()) feature of the Pluskit plugin or with the Global Content stack by Joe Workman. Read this tutorial when using the Pluskit plugin.

2. Paste this in the in the content (or sidebar) with your images in the Resources (RW5 +). 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="maximage">
<img src="%resource(image1.jpg)%" alt="Name of your image3"/>
<img src="%resource(image2.jpg)%" alt="Name of your image3" />
<img src="%resource(image3.jpg)%" alt="Name of your image3"/>
</div>

With RW4: replace the part

%resource(image1.jpg)%

with

assets/image1.jpg

(do not remove the quotation marks!).

Or with your images online:

<div id="maximage">
<img src="http://www.domain.com/images/image1.jpg" alt="Name of your image1"/>
<img src="http://www.domain.com/images/image2.jpg" alt="Name of your image2" />
<img src="http://www.domain.com/images/image3.jpg" alt="Name of your image3"/>
</div>


Try this example with 3 images:

<div id="maximage">
<img src="http://www.henkvrieselaar.com/tulips/tulip1.jpg" alt="Purple Tulip"/>
<img src="http://www.henkvrieselaar.com/tulips/tulip2.jpg" alt="Field with Tulips" />
<img src="http://www.henkvrieselaar.com/tulips/tulip3.jpg" alt="Red Tulip"/>
</div>


The examples above are with 3 images. Remove some lines when you prefer only one image, for example:

<div id="maximage">
<img src="http://www.your_website/images/image1.jpg" alt="Image 1"/>
</div>

Add one or more lines

<img src="http://www.your_website/images/image1.jpg" alt="Image 1"/>

when you would like to add more images.

Hide or Show the Slide Show Controls in the Theme Styles > Slide Controls.
Set a speed in the Theme Styles > Slide show Speed.

10. Underline Links
By default the links in the Content are not underlined. You can select any color in the Theme Styles > Colours.
When you prefer underlined text decoration, paste this in the Custom CSS (Page-Inspector > Header > CSS) (or in the 'custom css' file in the Contents of the theme, see Chapter 1a):

a:link {text-decoration: underline;}


11. Importing a Contact Page
With the @import feature of the Pluskit plugin (or with the Global Content stack by Joe Workman) you can import any page into another page. Read more about it here.
When you import a built-in Contact page in another page or inside the Tabs stack a special extra step required to include a 'page prefix' to get it all working properly. Read this tutorial.
Another option is to use the Contact Form stack by Doobox.

12. Importing a Blog Page
With the @import feature of the Pluskit plugin (or with the Global Content stack by Joe Workman) you can import any page into another page. Read more about it here.
Importing Blog pages into a Tabs stack with the @import feature of the Pluskit plugin is possible but @import only pulls the content area in. So with the TABS theme or any other theme you lose the sidebar with the categories, etc. It's almost always better to leave blog pages on their own.

13. Searchbox
You can add a searchbox in the sidebar, content (in a Tabs stack) or in any ExtraContent area (EC1, EC2, EC3, EC4 or EC5). How to do this?

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


When you put this code between <div id="myExtraContent1"> and </div> it shows up in the EC1 area above the title (enable the EC1 area in Theme Styles > Logo and ExtraContent1).
Another option is to put the code in the free ExtraContent stack and choose 1 in the settings of this stack. Replace myExtraContent1 with myExtraContent 2,myExtraContent 3,myExtraContent 4 or myExtraContent 5 in the code above when you prefer it in another EC area.

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

C. Import the Rapidsearch plugin into a HV-Tabs stack with the Pluskit plugin or with the Global Content stack (Example).

14. TextTime script

You can add a TextTime in the sidebar, content (in a Tabs stack) or in any ExtraContent area (EC1, EC2, EC3, EC4 or EC5). 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.

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

15. Date (US and European) script

(example) You can add a Date in the sidebar, content (in a Tabs stack) or in any ExtraContent area (EC1, EC2, EC3, EC4 or EC5). How to do this?
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="myExtraContent1"> and </div> it shows up in the EC1 area.

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

16. Mail a Friend script
You can add a Mail-A-Friend script in the sidebar, content (in a Tabs stack) or in any ExtraContent area (EC1, EC2, EC3, EC4 or EC5). How to do this?
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.

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


17. 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.
Double click on the .rwsnippet file and once directed to do so, restart RapidWeaver.

This theme theme has five EC areas:

ec_tabs

The EC1 area is at the upper left side, EC2 is at the bottom right. Both ExtraContent areas can be used for a short text line or a word, small images (for example social network icons with the built-in Font-Awesome icons or your own icons), a searchbox, date/time (example) or mail-a-friend snippet (see chapters above), some stacks (for example the Hide ‘n’ Show stack) or whatever. In mobile mode the maximum height of EC1 is about 40px.
ExtraContent 3 is above the menu Tabs, below the Title and Slogan.
ExtraContent 4 is between the content and the footer.
ExtraContent 5 is below the footer.

Paste this in the SIDEBAR or Content area as plain text to show both EC areas* (and now - IMPORTANT -select the complete code and go to RapidWeaver > Format > Ignore Formatting. That pinkish hue means that portion has been marked as “Ignore formatting”):

<div id="myExtraContent1">This is the ExtraContent 1 container.</div>
<div id="myExtraContent2">This is the ExtraContent 2 container.</div>
<div id="myExtraContent3">This is the ExtraContent 3 container. Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper.</div>
<div id="myExtraContent4">This is the ExtraContent 4 container. 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>


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 paste this in the Custom CSS (or custom css file, see Chapter 1a) (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: 11px;}


The same for the other ExtraContent areas.

18. Issues with stacks, plugins, etc.
There maybe some conflicts with some stacks and plugins. I don't have all stacks and I haven't tested them all of course. The demo pages show some examples.

• When you put a stack in the content, sidebar or in an ExtraContent area allmost all stacks will work fine.
• When you drag a stack inside the Tabs stack there maybe some conflicts with some stacks.

I have added the following stacks without any problems inside the Tabs stack: the Basic stacks (Text, Image, HTML), Columns/Grids and Content stacks, Responsive Columns stacks, HTML5 Audio and Video stacks, RefinedSldr, FancyViewr and VideoResizr stack, Responsive Lightbox stack, Liquid Gallery stack, ViewPoint stacks, Newsticker , AnimateIt and and ScrollPane stack, Contact Form stack, the FreeStyle and Toggle stack and some others.

Importing Blog pages into a Tabs stack with the @import featureof the Pluskit plugin is possible but @import only pulls the content area in. So with the TABS theme or any other theme you lose the sidebar with the categories, etc. It's almost always better to leave blog pages on their own.
This page works fine with the BUILT-IN MENU or a menu stack.

When you import the Weaverpix plugin with the @import feature of the Pluskit plugin inside the Tabs stack, you'll notice that not only a few themes will work.
All themes will display correctly when you import it in the Content or Sidebar, or in an ExtraContent area.
This page works fine with the BUILT-IN MENU or a menu stack.

Importing the built-in Photo Album page inside the Tabs stack is not possible, unless you use the prettyPhoto stack too (read Chapter 21 about this). This page works fine with the BUILT-IN MENU or a menu stack.

19. More CSS
A: Letterpress
Add a letterpress effect to the Title with this in the Custom CSS (or in the 'custom css' file in the Contents of the theme, see Chapter 1a):

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


Or to the Slogan with this in the Custom CSS:

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


The ‘darkness’ of the shadow is 0.50 in this example. Decrease or increase this, for example 0.15.
The vertical and horizontal offset is 0px and -1px, the blur is 0px. Any number is possible, try it :-)

Letterpress effects looks best when the background is a bit darker than the text.
Sometimes this looks better with a bold font (see chapter 7 about this).
Note: CSS3 Shadows are not supported by Internet Explorer 6, 7, 8 and 9.

B: Text Shadow
Add this code in the Custom CSS (or in the 'custom css' file in the Contents of the theme, see Chapter 1a) for a bit shadow to the Title:

#pageHeader h1
{text-shadow: 2px 2px 4px rgba(0,0,0,0.45);}


The ‘darkness’ of the shadow is 0.45 in this example. Decrease or increase this, for example 0.15.
The vertical and horizontal offset is 2px and 2px, the blur is 4px. Any number is possible, try it :-)

Or to the Slogan with this:

#pageHeader h2
{text-shadow: 2px 2px 4px rgba(0,0,0,0.45);}


0.45 is the darkness. When you prefer more increase this to for example 0.50 or 0.75 up to 1. Any number between 0 and 1 is possible.

And text-shadow to the Blog and Filesharing Title:

.blog-entry-title a, .filesharing-item-title
{font-weight: bold; text-shadow: 0 -1px 0px rgba(0,0,0,0.35);}


This looks best when there is less difference in color between background and text.
You may remove the line font-weight: bold; when you prefer a normal font

Note: CSS3 Shadows are not supported by Internet Explorer 6, 7, 8 and 9.

C: Different font to Blog or Filesharing Title
The Blog and Filesharing title font are by default the selected Content font. A Bebas or Winterthur font can be nice too.
Paste this in the Custom CSS (or custom css file, see Chapter 1a) of the Blogpage:

.blog-entry-title{
font-family: 'WinterthurCondensedRegular';
text-transform: uppercase;
font-size: 32px;}

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

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

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

As you can see I've another font-size too (32px) and it's getting smaller on your mobile device (sizes are up to you). Replace uppercase with lowercase for a lowercase font style.

And this with the Bebas font (only uppercase):

.blog-entry-title{
font-family: 'BebasNeueRegular';
font-weight: normal;
font-style: normal;
font-size: 40px;}

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

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

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

Replace .blog-entry-title with .filesharing-item-title when you would like another font to the FileSharing Title.

D: Bold font to the Tab Titles
When you prefer a bold font to the Tab Title, paste this in the Custom CSS (or custom css file, see Chapter 1a):

.responsive-tabs__list [class^="icon-"],
.responsive-tabs__heading [class^="icon-"],
.responsive-tabs__heading,.responsive-tabs__list {
font-weight: normal;
font-style: normal;}
[class^="icon-"] {font-weight: normal !important;}



E: Opacity to ExtraContent 1 or 2
When you prefer opacity to the ExtraContent1 or 2 button, for example with the Hide 'n' Show stack, paste this in the Custom CSS (or custom css file, see Chapter 1a):

#myExtraContent2 a:link {
filter: alpha(opacity=35); filter: progid:DXImageTransform.Microsoft.Alpha(opacity=35); -moz-opacity: 0.35; opacity: 0.35;}

#myExtraContent2 a:hover {
filter: alpha(opacity=100) !important; filter: progid:DXImageTransform.Microsoft.Alpha(opacity=100) !important; -moz-opacity: 1 !important; opacity: 1 !important;-webkit-transition: all 300ms ease;-moz-transition: all 300ms ease;-o-transition: all 300ms ease;transition: all 300ms ease;}

This is an example. Hover the button. Replace 2 with 1 in the css above for ExtraContent2.

F: Text-Align ExtraContent
In the Theme Styles > Alignment you can center your content. When you would like to center the ExtraContent area only, paste this in the Custom CSS (or custom css file, see Chapter 1a), for example EC4:

#myExtraContent4 {text-align: center;}

Replace 4 with 3 or 5 in the css above for ExtraContent3 or ExtraContent5. Don't do this for EC1 and EC2.

G: Only rounded Tabs corners on iPhone.
In the Theme Styles > Miscellaneous you can select square corners to the menu tabs. When you would like to have square tabs on the desktop and rounded corners only on the mobile site (round one definitely look good on iPhone) paste this in the Custom CSS:

@media screen and (max-width:480px) {.responsive-tabs__heading,.responsive-tabs__list__item { -webkit-border-bottom-left-radius: 3px; -webkit-border-top-left-radius: 3px; -webkit-border-bottom-right-radius: 3px; -webkit-border-top-right-radius: 3px; border-radius: 3px;}}


20. Font Awesome Icons
The build-in Awesome Icons are really fast and easy to use it anywhere in your website!
Please go to this page and have a look at all 302 icons. No stack or plug-in required to use Font Awesome in this theme.

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

Be sure always to end with the 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.

• SIZE of the FONT AWESOME ICONS
• By default the font-size of these icons is 20px. In the ‘Theme Styles > Font-Awesome Icons Font-Size and Colours’ you can choose 30px or 40px and any color.
With this in the Custom CSS (Page-Inspector > Header > CSS any font-size is possible, for example 32px:

[class^="icon-"] {font-size: 32px;}


Or increase the icon size with about 33% by using the icon-large class, so for example:
<i class="icon-camera icon-large"></i>

Or more:
<i class="icon-camera icon-2x"></i>
<i class="icon-camera icon-3x"></i>
<i class="icon-camera icon-4x"></i>

• COLOR of the FONT AWESOME ICONS
Go to the Theme Styles:

fai_icon

• ADD a LETTERPRESS EFFECT to your FONT AWESOME ICON
Example

Paste this in the Custom CSS (or in the 'custom css' file in the Contents of the theme, see Chapter 1a) for some letterpress effect to all icons:

[class^="icon-"]
{text-shadow: 0 -1px 0px rgba(0,0,0,0.15);}



The ‘darkness’ of the shadow is 0.15 in this example. Decrease or increase this, for example 0.55 or whatever. The vertical and horizontal offset is 0px and -1px, the blur is 0px. Any number is possible, try it :-)
IE6, IE7, IE8 and IE9 cannot display CSS3 text-shadows.

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

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

• 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 (by default it's 8px) when you have multiple icons. For example:

[class^="icon-"] {letter-spacing: 15px;}


• Each Icon a different color
When you would like to give each icon a different color paste this in the Custom CSS (or in the 'custom css' file in the Contents of the theme, see Chapter 1a):

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


#FF0000 is a HTML color code for red, #0000FF is green and #00FF00 is blue. More color codes here.

And when you prefer a different hover color, for example to the Skype icon, paste this in the Custom CSS (or in the 'custom css' file in the Contents of the theme, see Chapter 1a):

i.icon-skype:hover{color: #00FFFF !important;}


• 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 tag!

NEW! • Use the newest FONT AWESOME ICONs
Paste this in the Custom Header (Page-Inspector > Header > Header) when you want to use these icons:

<link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.0/css/font-awesome.css" rel="stylesheet">

Find all icons on this cheat sheet. As you can see the icons have different names! You cannot use the names above.

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.

21. Tutorials

A.
You can import the built-in PhotoAlbum page with the Pluskit plugin (or with the Global Content stack by Joe Workman) in another page.
- With the Global Content Stack there are no problems when you click on a thumbnail. The large image opens in a new window: example.
The settings of this stack says: "remember to use the Blank theme". But you can use the Tabs theme for the Global Page too.
When the Filename of your Tabs page is index.html (be sure that your global page has this file name too).
When the Filename of your Tabs page is index.php (be sure that your global page has this file name too).
- With Pluskit: when you click on a thumbnail the large image doesn't open in a new window. So with importing a Photo Album page, these options in the Theme Styles > Colours are NOT available:

photoalbum

So when importing with Pluskit you can only set the Photo View color options without the HV-TABS stacks.

• When you would like to use the PhotoAlbum page and Pluskit, use the prettyPhoto Stack in a Photo Album page. You'll need to do this:

1) Add a Pluskit page to your project.
2) Create a Photo Album page and add some images.
3) Create a Stacks page with the prettyPhoto stack and add @import((name of PhotoAlbum page created in step 2)) inside the TABS stack.
4) Add the following code in Page Inspector>Header>JavaScript:

jQuery(document).ready(function(){jQuery('.thumbnail-frame').each(function(){jQuery('a',this).attr({'href' : jQuery('a img',this).attr('src').replace(/thumb/i,'full'),'rel' : 'prettyPhoto[gal]','title' : jQuery('.thumbnail-caption',this).text()});});});


That should do it. Click on a thumbnail...
This is an example.

• When you would like to use the PhotoAlbum page and Pluskit, you can also use the PA/Lightbox Stacks. This series of stacks (There are six of them) make new or existing Photo Album pages look modern again.
This is an example.

B.
You can import a Stacks page with the HV-TABS stack with the Pluskit plugin (or with the Global Content stack by Joe Workman) in another page. For example in a Weaverpix-, PhotoAlbum-, Contact-, Blog- or Filesharing page. Or in any other page.
This is an example with the AltTabsMenu stack (by Marathia stacks).

C.
With the HV-Tabs stacks you can also make a PhotoAlbum. Read Chapter 2E.



Paul Bradforth wrote some very useful RapidWeaver tips here.
-------------------------------------------------------------------------------------------
HV-TABS may not be resold or redistributed without the express written permission of Henk Vrieselaar.
SEPTEMBER 2013