HV PODIUM MANUAL (HV-PODIUM and HV-PODIUM ONE theme)
In the download file are two themes: HV-PODIUM and HV-PODIUM ONE.
The HV-PODIUM theme uses the built-in menu as any other theme.
With the HV-PODIUM ONE theme you have to make your own menu (read Chapter 9). With this theme the built-in menu option is disabled.
! IMPORTANT

A. (IMPORTANT !) Go to your Rapidweaver (RW5) preferences, and ensure that the option Consolidate CSS files is enabled. With RW6 this option is already enabled by default (check this in the Advanced section) This makes exports of your project and uploading of your website faster and gives an improved Internet Explorer support too.

B. By default the sidebar is hidden! So content in the the sidebar will not show up in preview. To enable the Sidebar go to the Theme Styles > Sidebar and choose an option (Sidebar above content, or above the Title/Slogan).

C. When you have questions about this theme feel free to post them on the RapidWeaver Forums (preferable), or drop me an email.
When you have questions about or issues with stacks or plugins (so not theme-related questions) please post them on the RW forums or send their developers an email.

D. This theme works fine in all modern browsers (IE8+, Safari, Firefox, Opera, Camino, etc.) and on your iPhone/Android and iPad/tablet.

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

WHAT'S IN THE MANUAL
1. How to install a theme
2. Automatic Updates with Waterfall
3. Logo
5. Add your own Background Pattern to the Right side
6. Add your own Background Pattern to the Left side
7. Font Awesome icons before the Page Title
8. ExtraContent
9. Make a One Page Menu with the Podium One theme
10. Font Awesome Icons
11. More CSS
12. Searchbox
13. TextTime script
14. Date (US and European) script
15. Mail a Friend script
16. Using the Hide 'n' Show stack
17. Tutorial importing a Contact Page or another page
18. Add a browser wide background image to your webpage
19. Replace the words Category, Archives, Feeds (so the sidebar content) links


1. How to install a theme
Double-click on the theme file you received when you downloaded your purchase. The theme file will end with a “.rwtheme” extension. Once you double-click the theme file RapidWeaver will launch, if it wasn’t running already, and install the theme for you.
After installation you’ll want to make sure you quit, and then restart RapidWeaver. This ensures that the app, and other plugins, all know you’ve installed a new theme and it will be visible to you in your theme drawer to choose for your project.

With the release of RapidWeaver 6 it is now possible to run two version of the app side-by-side. You can now have both RapidWeaver 5 and 6 installed and running at the same time. This can sometimes lead to confusion of where a theme needs to be installed.
If you’re double-clicking an Addon and it’s not being installed in the version of RapidWeaver you wish it to be, give this a try: drag and drop the theme right onto the RapidWeaver icon, of the version you wish it to be installed into, in the Dock. Doing so tells that version of the app that it is the one that should be responsible for installing the app.

2. Automatic Updates with Waterfall
Easy, Automatic Theme Updating with the plugin Waterfall for Both RapidWeaver® 5 & 6.
The hassle of manually updating themes is a pain point every RapidWeaver user has run into as some point. Waterfall is your effortless theme management tool, specifically designed to help save you time and prevent the headaches all too often associated with theme updating.
With the Waterfall plugin you've always the latest version of a theme. I strongly recommend to use this plugin for updating themes!!

3. Logo
The Title and Logo have a link with the index.html page of your website. Whatever base url is inserted in RapidWeaver > Site Setup > Web Address (with RW5), or Rapidweaver > General > Web Address (with RW6) will be the link.
Drag your Logo into the Site Logo area.
Now go to the Theme Variations > Miscellaneous section and enable the option to display the logo on a page. It shows up above the Title.
Another option is to put your logo in an ExtraContent area (1, 2 or 3) or in the Content or Sidebar. Now your logo has no link to the index.html, so you have to make a link manually.

LOGO SIZE
I personally do not like a huge logo in a website, but that's up to you. A logo with a maximum width of about 180px would be fine.
When you use a larger logo you can make it fluid:

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

When your logo image is wider than the Width of the left side, paste this in the Custom CSS:

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

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

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

Only JPG, PNG or GIF images are allowed!

5. Add your own Background Pattern to the Right Side
By default you can choose a background color or pattern to the right side (the content) in the Theme Styles > Colours. Or select the checkbook for adding a background-image (see chapter 18).

Adding a pattern is possible too. How to add your own pattern:
Step 1: Download a pattern from the internet (see below).
Step 2: Add your pattern, for example pattern1.jpg, to the Resources (RapidWeaver 5) and add this to the Custom CSS (Page-Inspector > Header > CSS):

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


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

6. Add your own Background Pattern to the Left Side
By default you can choose a background color (or a transparent background) or pattern to the left side (the menu and Title/Slogan area) in the Theme Styles > Colours.

Adding a pattern is possible too. How to add your own pattern:
Step 1: Download a pattern from the internet (see below).
Step 2: Add your pattern, for example pattern1.jpg, to the Resources (RapidWeaver 5) and add this to the Custom CSS (Page-Inspector > Header > CSS):

.left_bg,#pageHeader,#footer-wrap,.slicknav_menu
{background: url(%resource(pattern1.jpg)%) repeat fixed;}


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.

HIDE BACKGROUND PATTERN or BACKGROUND-COLOR.
With this in the Custom CSS you can hide the background pattern or color:

#pageHeader, #left {background-image:none; background-color:transparent;}


Option: Theme Variations > Miscellaneous > Add a bit Opacity to the Left Side

7. Font Awesome Icon before the Page Title
By default there is no FontAwesome icon before a page Title. Personally I don't like the use of icons in a menu. But that's up to you. Read Chapter 10 for more info about these icons.

With the PODIUM ONE theme: read Chapter 9.
With the PODIUM theme: it's very simple to add an icon before a Page Title. Paste this before the Page Title for a Home icon:

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


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.

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="fa fa-home"></i>

but

<i class=‘fa fa-home’></i>

fai-home

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

<i class="fa fa-home"></i>&nbsp;&nbsp;Home


When you want to hide the icons on a page, paste this in the Custom CSS (not with the Podium One theme):

#nav .fa {display:none;}


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

This theme has only 4 EC areas: ExtraContent, ExtraContent2, ExtraContent3 and ExtraContent4. The EC1 area is below the Title and Toggle icon. I would use EC1 for social media icons (with the built-in Font-Awesome icons or your own icons), a few words or text lines to explain that you can open the content by clicking on the Toggle icon, a snippet (for example Date/Time, a Mail-A-Friend or whatever). Or a image or image slider stack.
EC2 is in in the upper left or right corner of your window. Please use this only for a few words, or better: some social icons or a search box. With the sidebar enabled above the Title, the EC2 is hidden!
EC3 is below the Title and Slogan too, and you can set different widths to it.
EC4 is at the top of the content part of the theme, so at the right side (go to Chapter 11 (More CSS) how to center or justify the EC4 text.
EC5 is at the the right side. You can use this area only for an image or slideshow.
The Podium One has an EC5 needed for the menu (read Chapter 9).

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

<div id="myExtraContent1">This is the ExtraContent 1 container</div>
<div id="myExtraContent2”>ExtraContent 2</div>
<div id="myExtraContent3">This is the ExtraContent 3 container. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis auctor nibh dui, eget ultricies odio pellentesque eu. Morbi in accumsan neque, at luctus orci</div>
<div id="myExtraContent4">This is the ExtraContent 4 container</div>


There is an EC snippet in the download file with a Plain Text lay-out.
FONT-SIZE: select a font-size of the ExtraContent1, 2, 3 or 4 area in the Theme Styles. Or paste this in the Custom CSS (20px is an example):

#myExtraContent1 {font-size: 20px;}


9. Make a One Page Menu with the Podium One theme
This is only possible with the PODIUM ONE theme, not with the PODIUM theme.
The PODIUM ONE theme has a single page (or one-page) design. This can be an excellent technique for tackling smaller websites, even those that you might not think could ever be done without multiple pages. Obviously, single page designs are not ideal for every project. But there are reasons to use them (they’re intuitive to use, it can be faster and easier to maintain, you’re forced to simplify, it’s easier to organize and it has a reduced bandwidth).
Making a submenu is not possible with the PODIUM ONE.
OK, now we’re going to make a one-page menu with 3 menu-items and 3 anchors (there is an example project file in the download file):

A. Select an option in the Theme Variations > MENU > Show Menu Button .
When you prefer to show the menu items immediately after opening a page select this: Theme Variations > MENU > Hide Menu Button.

B. Select a Font-Size and colors of the One-Page menu in Theme Variations > Menu Font-Size and Colours.

C. With a Stacks2 page:
Drag an ExtraContent stack (free download) on your stacks page. You can change the ExtraContent value in the settings of this stack. Select 6 (the One Page Menu will be in the ExtraContent6 area). See image below:

ec5

With a not-stacks page (for example a Styled Text or Contact Form page): read Chapter I.

D. Drag a simple text-stack into the ExtraContent stack.
E. Now we're going to make a menu with three menu items.

menu

Start for example with ‘Home’. Copy the code below and paste this as Plain Text in the Text stack (or highlight this code and select RW > Format > Clear Formatting).

<a data-scroll href="#home">Home</a>

Make a new menu-item, for example 'My Work’ . Again copy the code below and paste this as Plain Text in the Text stack (or highlight this code and select RW > Format > Clear Formatting).

<a data-scroll href=“#mywork”>My Work</a>

As you can see I don't use spaces in the link #mywork !! Names are case-sensitive.
Make another menu-item, for example 'Get in Touch':

<a data-scroll href="#Contact">Get in Touch</a>

Now we've made 3 menu-items. You’ll see this in Edit mode:

menu-podium

In Preview when you click on the menu-button they'll show up, see image above.
When you want to make a link to another website or another page of your website make a link as you always do with RapidWeaver.

But now we'll need some anchors:

F. Now you need some HTML anchors:

anchor3

Drag a stack into your webpage, for example a text-stack, and add text, images or whatever to it. Paste the code below at the top of it as Plain Text, or highlight this code and select RW > Format > Clear Formatting:

<anchor id="home">Home</anchor>

Be sure that the word home between the quotation marks is exactly the same as in the link above! Names are case-sensitive, so Home is really quite different from home! Spaces are not allowed.

When you remove the word Home, so:

<anchor id="home"></anchor>

The anchor still works, but the word Home doesn’t show up in preview. That's all up to you.

OK, now the second anchor: again drag a stack into your webpage, for example a text-stack, and add text, images or whatever to it. Again paste the code below at the top of it as Plain Text, or highlight this code and select RW > Format > Clear Formatting:

<anchor id="mywork">This is my Work</anchor>

And again repeat this step and add this link somewhere else:

<anchor id="Contact">Get in Touch</anchor>

Now in Preview clicking on a menu-item gently scrolls you to the designated HTML anchor. Have a look at the example project in the download file how I did it.

Select Theme Variations > Anchor Font for an anchor font. By default the anchor has a background-color. When you want to hide this color go to Theme Variations > Miscellaneous > Hide Background Anchor Link.
Select Anchor Font-Size for a font-size of the anchors.

G. Anchors in the sidebar:
You can scroll to an anchor in the sidebar too. Paste this for example in the menu (ExtraContent5 as explained in part E) as Plain Text or highlight this code and select RW > Format > Clear Formatting:

<a data-scroll href="#sb">Sidebar</a>

And now paste this as Plain Text at the top of or somewhere else the sidebar:

<span id="sb">This is the Sidebar</span>

When you don’t like a Sidebar Title, remove it. So for example

<span id="sb"></span>


H. Font-size, Color and Background of the anchor link
• BACKGROUND: By default the anchor link has a background-color. Select another color in the Theme Variations > Menu Font-Size and Colours.
You can hide the background of the anchor link in the Theme Variations > Miscellaneous > Hide Background anchor link.
• COLOR: select a color of the Anchor link in the Theme Variations > Menu Font-Size and Colours.
• FONT-SIZE: By default the font-size of the anchor link is 24px. Select another font-size of the Anchor link in the Theme Variations > Anchor Font-Size.
• FONT: Select another font of the Anchor link in the Theme Variations > Anchor Font.

I. With a not-stacks page (for example a Styled Text or Contact Form page):
Paste this <div id="myExtraContent6"> as plain text (!) before, and this </div> after the menu links, see example in left image below:

not-stacks

J. Importing pages in the One-Page design
You can import different pages into the content of a one-page design, for example stacks pages or a Contact page with the @import feature of the Pluskit plugin or with the Global Content stack.
How to import the built-in Contact Page?

1. Add a Pluskit Page to your project.

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

3. Paste this line as plain text below the anchor link in the page where you want to import the Contact page: @import((Contact Me))

4. Have a look in Preview: the Contact Form shows up… but it looks ugly :-(
IMPORTANT: Read this how to solve this: http://support.loghound.com/kb/pluskit/how-can-i-import-the-contact-page

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

K. Add a Font Awesome Icon to your Menu
Paste the Home icon before the Home text in the code above, so for example:

<anchor id="home"><i class="fa fa-home"></i> Home</anchor>

Any icon is possible (see next Chapter).

L. The Menu icon is not visible with Firefox and Chrome
Sometimes the menu-icon and menu is not visible with both browsers. Please uncheck these checkboxes in the Advanced Settings of RW7:

podium-advanced

Now they will show up with Firefox and Chrome.

10. Font Awesome Icons
The build-in Font Awesome Icons 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. 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.

Please visit the this website to view a list of all FontAwesome 4 icons available:

A.Click on an icon of your choosing from the list. For example the Facebook Official icon:

<i class="fa fa-facebook-official"></i>


B. Simply copy and paste the code for the icon that has generated on the page next to the content where you would like the icon to appear. Never remove the quotation marks! You can paste this anywhere: in the content or sidebar, in the ExtraContent or footer, before a blog or filesharing title or wherever.

C. Once placed in your project file, highlight the entire code and click Clear Formatting under Format at the top left of your screen. The font icon will now display in preview.

D. In the Theme Styles you can change the color of the icons in the content, sidebar and ExtraContent.
Other color? Paste this in the Custom CSS:

.fa {color:#ff0000 !important;}

#ff0000 is the HTML color for red. Other HTML colors.

E. 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="fa fa-facebook-official"></i>&nbsp;&nbsp;


Or before the icon:

&nbsp;&nbsp;&nbsp;<i class="fa fa-facebook-official"></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="fa fa-facebook-official"></i>&nbsp;&nbsp;<i class="fa fa-twitter-square"></i>


F. By default the font-size of these icons is the same as the selected font-size of Content, ExtraContent, etc. There are two options to increase the size of these icons:

To increase icon sizes relative to their container, use the fa-lg (33% increase), fa-2x, fa-3x, fa-4x, or fa-5x classes. So for example:

<i class="fa fa-camera-retro fa-lg"></i> fa-lg
<i class="fa fa-camera-retro fa-2x"></i> fa-2x
<i class="fa fa-camera-retro fa-3x"></i> fa-3x
<i class="fa fa-camera-retro fa-4x"></i> fa-4x
<i class="fa fa-camera-retro fa-5x"></i> fa-5x


Or increase the size of an icon with this in the Custom CSS (Page-Inspector > Header > CSS), any font-size is possible, for example 32px:

.fa {font-size: 32px;}


G. add a link to your FontAwesome icon (for example to your Facebook page):

<a href="#"><i class="fa fa-facebook-official"></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="fa fa-camera-retro fa-lg"></i></a


An email-address is possible too. Replace the # in the code with this: mailto:johndoe@mac.com
This is an example with an envelope icon:

<a href="mailto:johndoe@mac.co"><i class="fa fa-envelope"></i></a>


Don’t remove the quotation marks!

H. When you put a FontAwesome icon in an ExtraContent area, for example the EC1 area, paste this in the Sidebar or Content as plain text (RW > Edit > Paste as Plain Text):

<div id ="myExtraContent1"><i class="fa fa-facebook-official"></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 icon code in the free ExtraContent stack and select EC1 in the settings of the stack.
Replace myExtraContent1 with another EC area (2 or 3) in the code above when you prefer it in another EC area.

I. With this the text and the icon are inline and have the same font-size, for example this Cog icon:

<i class="fa fa-cog"></i>&nbsp;&nbsp; This is a Cog Icon


As you can see I’ve added some space between the icon and the text line too. Be sure that when you start with a </div...> tag you always have to end with the </div> tag!

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


11. More CSS
You can add all css-codes below in the Custom CSS:

Letter Spacing page Title
Decrease the letter spacing of the page Title:

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

Or -1px or -2px or whatever. Try it.
Line-Height Content and Sidebar
Increase the line-height (default 1.5):

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

Uppercase font to the Blog Title

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


Font-Size Blog Entry
With this in the Custom CSS the links in the content, sidebar and ExtraContent are underlined:

.blog-entry-title {font-size: 30px;}

(30px is an example)
Text Align ExtraContent4
By default the text in the ExtraContent4 area is aligned left. When you want to justify it, paste this in the Custom CSS:

#myExtraContent4 {text-align: justify;}


Or when you want to center it:

#myExtraContent4 {text-align: center;}

Underline Links
Increase only the blog e

a:link {text-decoration: underline;}

Transparent Background to Menu
By default the menu has a background-color. Any color is possible (Theme Variations > Menu Font-Size and Colours > Menu Background).
Make it transparent with this in the Custom CSS of the Podium theme:

#nav {background-color: transparent;}

And this with the Podium One theme:

#myExtraContent5 {background-color: transparent;}

More zoom and rotate options
In theTheme Variations > Miscellaneous > Zoom Effect you can add a zoom effect to your image(s). There are more options, for example zoom ánd rotate your image. Most browsers support this effect (Safari, FireFox, Chrome, IE10+). Paste this in the Custom CSS:

#bg img{
-webkit-backface-visibility: hidden;
-webkit-animation: imageAnimation 36s linear;
-moz-animation: imageAnimation 36s linear;
-o-animation: imageAnimation 36s linear;
-ms-animation: imageAnimation 36s linear;
animation: imageAnimation 36s linear;}

/* Animation for the slideshow images */@-webkit-keyframes imageAnimation {
0% { -webkit-transform: scale(1.5) rotate(20deg) ;}
100% { -webkit-transform: scale(1) rotate(0deg);}}

@-moz-keyframes imageAnimation {
0% { -moz-transform: scale(1.5) rotate(20deg);}
100% { -moz-transform: scale(1) rotate(0deg);}}

@-o-keyframes imageAnimation {
0% { -0-transform: scale(1.5) rotate(20deg);}
100% { -0-transform: scale(1) rotate(0deg);}}

@-ms-keyframes imageAnimation {
0% { -ms-transform: scale(1.5) rotate(20deg);}
100% { -ms-transform: scale(1) rotate(0deg); }}


Replace 36 (duration in seconds), 1.5 (scaling) or 20 (rotating in degrees). Most browsers support this effect (Safari, FireFox, Chrome, IE10+).

Or this for only zoom:

#bg img{
-webkit-backface-visibility: hidden;
-webkit-animation: imageAnimation 36s linear;
-moz-animation: imageAnimation 36s linear;
-o-animation: imageAnimation 36s linear;
-ms-animation: imageAnimation 36s linear;
animation: imageAnimation 36s linear;}

/* Animation for the slideshow images */
@-webkit-keyframes imageAnimation {
0% { -webkit-transform: scale(1.8) ;}
100% { -webkit-transform: scale(1) }}

@-moz-keyframes imageAnimation {
0% { -moz-transform: scale(1.8);}
100% { -moz-transform: scale(1);}}

@-o-keyframes imageAnimation {
0% { -0-transform: scale(1.8)}
100% { -0-transform: scale(1);}}

@-ms-keyframes imageAnimation {
0% { -ms-transform: scale(1.8);}
100% { -ms-transform: scale(1); }}

All numbers are examples.
12. Searchbox
Example
You can add a searchbox in the sidebar, content or in any ExtraContent area (EC1, EC2, EC3), How to do this, for example in the EC2 (above the Title)?

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


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

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


C. When you put this code between <div id="myExtraContent2"> and </div> it shows up in the EC2 area above the Title.

Another option is to put the code in the free ExtraContent stack and enable 2 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 myExtraContent2 with myExtraContent1, myExtraContent 3 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), first replace the word Search with this &#xf002;

search_icon

So it will be this:

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


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

Select a color in the Theme Styles > Colours > Rapidsearch …

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

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


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

<script language="JavaScript">

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

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

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

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

</script>


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

When you put this code between <div id="myExtraContent1"> and </div> it shows up in the EC1 area below the header.

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

14. Date (US and European) script
Example

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

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


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


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

This is the code when you prefer a European Date:

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

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


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

When you put this code between <div id="myExtraContent1"> and </div> it shows up in the EC1 area below the header).

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

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

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

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


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

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

When you put this code between <div id="myExtraContent1"> and </div> it shows up in the EC1 area below the header.

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

16. Using the Hide 'n' Show stack
With the Hide 'n' Show stack (not included in the theme) your visitor can show and hide a part of your webpage (for example the left side with a page made with the Podium theme to show the background image or slideshow). See this example.
How to do this (Effect and Speed are up to you):
In the settings of the HnS stack select these settings (image below). The ID: #left

hns-podium

I’ve replaced the text ‘Show Content’ and ‘Hide Content’ in the example with a FontAwesome Icon.

Another example with a Fade effect: replace #left with #content,#footer or with body
Another example with a Toggle effect: replace #left with #content

There are many more options with this stack.

17. Tutorial importing a Contact Page or another page

A. Import a Contact Page in another page.
Example
1. Add a Pluskit Page to your project.
2. Add a Contact Page to your project. The Page Title of this page is for example Contact Me
3. Now there are two options:
a. Add a Stacks2 page to your project, drag a text-stack into it and paste this in the stack to import the Contact page: @import((Contact Me))
b. Instead of a Stacks2 page you can import a stack or contact form in any other page too (Blog, Styled Text, Filesharing, etc.).
Paste this line as plain text in the sidebar or content of the page where you want to import the Contact page: @import((Contact Me))
4. In the example I’ve added the the code @import((Contact Me)) in a text stack.
5. Have a look in Preview and click on the envelope icon: the Contact Form shows up… but it looks ugly :-(
IMPORTANT: Read this how to solve this: http://support.loghound.com/kb/pluskit/how-can-i-import-the-contact-page
6. Instead of Pluskit you can also use the Global Content stack to import a page in another page.

B. Import a Contact Page in an ExtraContent area, for example EC2 at the left side.
Example
1. Add a Pluskit Page to your project.
2. Add a Contact Page to your project. The Page Title of this page is for example Contact Me
3. Now there are two options:
a. Add a Stacks2 page to your project, add the free ExtraContent stack (select 2 in the settings of the stack) in this page, now drag a text-stack into this ExtraContent stack, and paste this in the stack to import the Contact page: @import((Contact Me))
b. Instead of a Stacks2 page you can import a stack or contact form in any other page too (Blog, Styled Text, Filesharing, etc.).
Paste this line as plain text in the sidebar or content of the page where you want to import the Contact page:
<div id="myExtraContent2">@import((Contact Me))</div>
5. Have a look in Preview and click on the envelope icon: the Contact Form shows up… but it looks ugly :-(
IMPORTANT: Read this how to solve this: http://support.loghound.com/kb/pluskit/how-can-i-import-the-contact-page
6. Instead of Pluskit you can also use the Global Content stack to import a page in another page.

Almost any content, with the exception of a RapidWeaver Blog Page* can be imported anywhere into any RapidWeaver page, including non-stacks pages. The imported elements can be viewed within Rapidweaver immediately.
* The blog archives in the sidebar don’t show up on an imported page.

With Pluskit: if you have one Pluskit page on your RapidWeaver site, you can place a text on any page "@Import((PageName))" and the contents of any named page (not the Pluskit page) will appear in that position.

18. Add a browser wide background image to your webpage

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.

IMAGES:Have you tried running the images through http://www.imgopt.comThis is an awesome tool from Yahoo which removes all the extra stuff that isn't needed for web images, reducing the size, but not the resolution. 


OK, here we go:
A. First of all select in the Theme Variations the option Right Side Background > Background Image. Optionally you can choose Left Side Background > Transparent.

B. Drag your own image (jpg, png) into the Resources.

C. Copy the code below and paste it into the Custom Header (Page-Inspector > Header > Header):

<div id="bg"><img src="%resource(image1.jpg)%" ></div>

Replace the name image1.jpg in the code above with the name of your own image in the Resources. Be sure that the image name in the Custom Header is exactly the same as in the one in the Resources! Names are case-sensitive. Please don't use spaces in a name.
When you put your image in a folder (for example the folder images) in the Resources, paste this:

<div id="bg"><img src="%resource(images/image1.jpg)%" ></div>

In preview your image shows up. Isn't that nice? Perhaps the text on the right is not easy to read. For a better readability of the text, you can choose a semi-transparent background or background color of the content in the Theme Styles > Content (Right Side) Overlay.
In the Theme Styles > Miscellaneous > Add Zoom Effect you can add a zoom-effect to your background image. Read Chapter 11 for another zoom-effect.

Tip: by default the background-color is white. The image fades in, so when the main color of your image is for example dark grey choose another color in the Theme Variations:

color

D. Images can be located in your Resources (see A above) or on a server (e.g. http://www.domain.com/images/img1.jpg). So when you choose to add an image on your server replace resources/img1.jpg in the code above with http://www.domain.com/images/image1.jpg (don't remove the quotation marks!). So:

<div id="bg"><img src="http://www.domain.com/images/image1.jpg" ></div>

Try this working example:

<div id="bg"><img src="http://static.pexels.com/wp-content/uploads/2014/05/black-and-white-city-house-378-825x550.jpg" ></div>

E. How can I add a link to my browser wide background image? Paste this when you would like to link your image with a website:

<a href="#"><img src="%resource(img1.jpg)%"></div></a>

When you replace # with an url of a website the background image has a link to that website. Example:

<a href="http://www.google.com"><a href="#"><img src="%resource(img1.jpg)%"></div></a>

F. How can I hide and show the content (the left and right side) to show the background image?
Enable this checkbox in the Theme Variations > Miscellaneous:

hide

In the upper left corner an ‘adjust icon’ shows up. When you click on it the content fades away. Click again and the content shows up again.

When you want another icon (example), paste this in the Custom CSS:

.closebutton:before {content: "\f042";}

Now replace the red code (f042 here) with another Font Awesome icon unicode (see image below when you click on an icon), for example the picture icon f03e , so:

.closebutton:before {content: "\f03e";}

unicode

G. When adding a background-image to the built-in Photo Album page I’d recommend to use a lightbox stack to show your photos, for example the PA/Lightbox stack, this is an example). You can import this stack with Pluskit or the Global Content stack into the Photo Album page. Or don’t use a background image of course

H. With the bgStretcher stack you can create a striking home page or splash page using an oversized static image or a dramatic slideshow to cover your whole background.

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

archive

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

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


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



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