HV INFINITE-r MANUAL

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

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 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
4. Add a Background Pattern to the body
5. Add a Background Pattern to the Menu Strip
6. Add a Background Pattern to the Content Strip
7. Menu Box Shadow
8. Menu Font-Size and/or Text Shadows
9. Width of the SubMenu
10. Different font to Title, Slogan and/or Menus
11. FontWeight Title, Slogan and/or Menu
12. Underline links
13. Add an image or slideshow to the ExtraContent3 area
14. ExtraContent
15. Font Awesome Icons
16. Font Awesome icons before the Page Title
17. More CSS
18. Searchbox
19. TextTime script
20. Date (US and European) script
21. Mail a Friend script
22. Built-in Theme Color Styles
23. Colors (Optional)
23. Hide the menu-icons and replace them with a word
23. Disable Parent 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. In the theme drawer the theme show up with the name HV-Infinite-R.

2. Automatic Updates with Waterfall
Easy, Automatic Theme Updating with the plugin Waterfall for both RapidWeaver® 5 & 6 & 7.
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
Drag your Logo into the Site Setup > Logo area. By default it’s hidden! Click on the radio button in the Theme Styles > Hide ... Show to enable it.
Only JPG, PNG or GIF images are allowed!
Your Logo shows up at the top of the Vertical Menu Strip, above the menu.
The logo is always aligned right.
When you would like to position it left, paste this in the Custom CSS (Page- Inspector > Header > CSS):

#logo {text-align: left !important;}

or veterend:

#logo {text-align: center !important;}

You can adjust the vertical position of your logo with this in the Custom CSS:
#logo {margin-top: 25px !important;}
25px is just an example. Any number is possible.

Sometimes it could be nice to hide the logo on some pages. Select this on pages where you do not want the logo displayed (image leD).
This only works when your logo is in the Logo area in Site Setup.
You can also drag your logo into the sidebar or in the ExtraContent1 or ExtraContent2 area. Now your logo has no link to the index.html, so you have to make a link manually. Now the CSS-codes above don’t work of course.

4. Add a Background Pattern to the body
By default you can choose a background pattern or color in the Theme Styles. When you don’t like the build-in patterns you can use another one. How to do this:
• Step 1: Download a pattern from the internet (see below). There's one pattern in the download file to start with. • Step 2: Add your pattern to the Resourcesand add this to the Custom CSS (Page-Inspector > Header > CSS):

body {background: url(resources/pattern1.jpg) repeat fixed !important;}

Any pattern name is possible, but be sure that the name of the pattern is exactly the same as the name in the css.
More patterns:
http://subtlepatterns.com/
http://www.squidfingers.com/patterns/
and many other websites.

5. Add a Background Pattern to the Menu Strip
When you would like only a pattern to the vertical Menu Strip, do this:
• Step 1: Download a pattern from the internet (see below). There's one pattern in the download file to start with.
• Step 2: Add your pattern to the Resources and add this to the Custom CSS (Page-Inspector > Header > CSS):

#menuWrapper {background: url(resources/pattern1.jpg) repeat fixed;}

Any pattern name is possible, but be sure that the name of the pattern is exactly the same as the name in the css.
More patterns:
http://subtlepatterns.com/
http://www.squidfingers.com/patterns/
and many other websites.
In Preview your slideshow shows up. Example.

6. Add a Background Pattern to the Content Strip
When you would like only a pattern to the vertical Content Strip do this:
• Step 1: Download a pattern from the internet (see below). There's one pattern in the download file to start with.
• Step 2: Add your pattern to the Resources and add this to the Custom CSS (Page-Inspector > Header > CSS):

#contentstroke {background: url(resources/pattern1.jpg) repeat fixed;}

Any pattern name is possible, but be sure that the name of the pattern is exactly the same as the name in the css.
More patterns:
http://subtlepatterns.com/
http://www.squidfingers.com/patterns/
and many other websites.

7. Menu Box Shadow
By default there’s no box-shadow to the submenu. But it’s very simple to add this with this in the Custom CSS:

.ddsmoothmenu-v ul li ul {
-webkit-box-shadow: 3px 3px 9px rgba(0,0,0,0.40);
-moz-box-shadow: 3px 3px 9px rgba(0,0,0,0.40);
box-shadow: 3px 3px 9px rgba(0,0,0,0.40);}

The ‘darkness’ of the shadow is 0.40 now. Decrease or increase this, for example 0.15. The vertical and horizontal offset is 3px, the blur is 9px. Any number is possible, try it :-)
IE6, 7 and 8 don’t support these shadows.

8. Menu Font-Size and/or Text Shadow
FONT-SIZE: By default the font-size of the Menu is 18px. You can select 14px, 22px or 26px in the Theme Styles > Menu FontSize. With this in the Custom CSS you can choose another font-size to the menu:

.ddsmoothmenu-v ul li a{ font-size: 20px;}

Or to the submenu:

.ddsmoothmenu-v ul li ul li a,
.ddsmoothmenu-v ul li ul li a:hover { font-size: 11px;}

20px and 11px are examples. Any number is possible.
TEXT-SHADOW: With this in the Custom CSS you can create a text shadow to the menu:

.ddsmoothmenu-v ul li a{ text-shadow: 1px 1px 3px rgba(0,0,0,0.30);}

Or this (letterpress effect, sometimes better with a bold font):

.ddsmoothmenu-v ul li a { text-shadow: 0 -1px 0px rgba(0,0,0,0.25);}

Read Chapter 7 how to change the darkness and offset of these shadows.

9. Width of the SubMenu
By default the sub levels of the menu have a fixed width, depending of the submenu font size. The width of the Main-menu depends of the selected width of the Container in the Theme Styles. When you would like to decrease or increase the width of the sub levels paste this in the Custom CSS:

.ddsmoothmenu-v ul li ul{ width: 170px !important;}

170px is an example. Any number is possible. See image below (top):

submenu3

The second image (below bottom) is with a smaller sub level width.
When you have a smaller container width and/or many sub levels (a 'deep menu') the submenus stretch off to the right. With the css above you have the ability to make the submenu shorter.

10. Different font to Title, Slogan and/or Menu
You can select a font to your webpage in the Theme Styles > Font.
But you can replace the font to for example the Title, the Slogan or the Menu. Just add one of these codes below in the Custom CSS (Page-Inspector > Header > CSS):

#pageHeader h1 {font-family: Impact;}

Now the Title has an Impact font.

#pageHeader h2 {font-family: Comic Sans MS;}

Now the Slogan has a Comic Sans font.

.ddsmoothmenu-v ul li a{ font-family: "Arial Black";}

Now the Menu has an Arial Black font.

More (Websafe*) fonts:
font-family: Comic Sans MS;
font-family: Geneva, Tahoma, sans-serif;
font-family: Georgia, serif;
font-family: "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif; font-family: "Lucida Grande", Lucida, Verdana, sans-serif; font-family: Optima, "Trebuchet MS";
font-family: 'Trebuchet MS', Helvetica, sans-serif;
font-family: Verdana, Geneva, sans-serif;
font-family: Arial;
font-family: "Arial Black";
font-family: "Arial Narrow";
font-family: Impact;

The font-family property is a prioritized list of font family names and/or generic family names for an element. The browser will use the first value it recognizes. iPad or iPhone cannot handle all fonts. So check this please.
*Web-safe fonts are those fonts likely to be present on a wide range of computer systems, and are used by web content authors to increase the chance that content will be displayed in their chosen font. If a visitor to a website does not have the specified font, their browser will select an alternative. The a list of fonts above are safe to use on your web pages as they are installed on both Macs and PCs.

11. FontWeight Title, Slogan and/or Menu
By default all fonts have a normal font-weight. When you prefer a bold font paste this in the Custom CSS (Page-Inspector > Header > CSS):

#pageHeader h1 {font-weight: bold;}

Now the Title has a bold font.

#pageHeader h2 {font-weight: bold;}

Now the Slogan has a bold font.

.ddsmoothmenu-v ul li a,
.ddsmoothmenu-v ul li ul li a:hover {font-weight:bold;}

Now the Menu has a bold font.

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

a:link {text-decoration: underline;}



13. Add an image or slideshow to the ExtraContent3 area
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.

I've added the ExtraContent3 container to show your image in below the Title and Slogan.
The easiest way to add an image in the EC3 is to add a (free) ExtraContent stack into a Stacks page, select nr 3 in the info-panel of the stack, and drag your image into this stack. Ready.

This is another option (when you don’t use a stacks page):
A. Drag your image (JPG, PNG or GIF) into the Resources.
B. Paste this in the Sidebar or in the Content:

<div id="myExtraContent3"></div>


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

background: url(resources/image1.jpg) no-repeat;}

Replace image1.jpg with the name of your own image in the Resources.

Adding a slideshow: with many slideshow stacks (for example the free Freestyle2 stack) you can make your slideshow in the EC3. Add a slideshow stack into a ExtraContent stack with nr 3 selected in the info panel.
You can make a slideshow in the EC3 with the Weaverpix plugin too.

Note. Most slide-shows fade in, so when opening a page first a background color shows up. You can choose a color in the Theme Styles > Colours > ExtraContent3 Background.

14. ExtraContent
The INFINITE-R theme is enabled with a very special feature called ExtraContent. ExtraContent allows you to add more content then RapidWeaver typically allows.
The INFINITE theme has up to 5 EC areas:

extracontent_infinite

• ExtraContent1: this area is at the top of the Vertical Menu Strip, just above the Menu. The EC1 area can be used for text, some stacks, images (for example your Logo or social network icons), a searchbox, date/time or mail-a-friend snippet (see chapters above) or whatever.
• ExtraContent2: this area is below the Menu and can be used for text, , some stacks, images (for example your Logo social network icons), a searchbox, date/time or mail-a-friend snippet (see chapters above) or whatever.
• ExtraContent3: this area is between the Title/Slogan and the Content. It can only be used images or slide shows.
• ExtraContent4: this area is below the footer and can be used for text, images (for example your Logo or social network icons), some stacks, a searchbox, date/time or mail-a-friend snippet (see chapters above) or whatever.
• ExtraContent5: this area is also below the footer and can be used for text, images (for example your Logo or social network icons), some stacks, a searchbox, date/time or mail-a-friend snippet (see chapters above) or whatever. This area has an option for a background color.

You can add ExtraContent in two ways:
1. With these free stacks: ExtraContent stack or the ExtraContent Plus stack. With these stacks you don’t need the EC snippets in the download file.
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”):

By default the font-size of all EC areas is 12px. In the Theme Styles you can choose 11px or 13px. When you prefer another font-size to the ExtraContent3 paste this in the Custom CSS (Page- Inspector > Header > CSS):

#myExtraContent2 {font-size: 16px; }


SHOW ALL EXTRACONTENT CONTAINERS
• When you would see all ExtraContent containers of this theme paste this in the SIDEBAR 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 container. Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper.</div>

<div id="myExtraContent2">This is the ExtraContent 2 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>



There are EC snippets in the download file too. Install them and you can drag them in for example a not-stacks page..

15. Font Awesome Icons
The build-in Font Awesome Icons 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 in the Theme Variations > Font-Awesome and Social Icons Font-Size and Colors. You like them bigger?
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 a not-Stacks page 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 with a Stacks page 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.

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

16. 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. Maybe only the Home icon. But that's up to you. Read the previous Chapter 7 for more info about how to use these icons.

fai-home

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>


So for example the page title will be this:

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

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>


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:

#cssmenu .fa,.mean-container .mean-nav .fa {display:none;}



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

Line-Height Content and Sidebar
Increase or decrease the line-height (default 1.5):

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


Font-Size Blog Entry
With this in the Custom CSS you’ll get a larger font-size of the blog-entry title:

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

(30px is an example)
Font-Size Footer
Change the font-size of the footer with this in the Custom CSS:

#footer {font-size: 14px;}

14px is an example, any font-size is possible.
Center thumbnails and text in the built-in Photo Album Page
With this you can center the thumbnails warp in a built-in Photo Album Page. It looks best when you hide the Sidebar:

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


Text-shadow to Title
Add a text-shadow to the Title with this in the Custom CSS:

.ddsmoothmenu-v ul li a{text-shadow: 1px 1px 3px rgba(0,0,0,0.30);}

Add a letterpress effect to the Title with this in the Custom CSS:

#pageHeader h1,.ddsmoothmenu-v ul li a{text-shadow: 0 -1px 0px rgba(0,0,0,0.25);}

Sometimes this looks better with a bold font.
The ‘darkness’ of the shadow is 0.25 now. 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 :-) IE6, 7 and 8 don’t support these shadows.
Add a Letterpress effect to the Slogan, Blog or Filesharing Title
Simple, paste this in the Custom CSS:

#pageHeader h1,#pageHeader h2, .ddsmoothmenu-v ul li a, .ddsmoothmenu-v ul li a:hover { font-weight: bold; text-shadow: 0 -1px 0px rgba(0,0,0,0.35);}

0.30 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 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
CSS3 Shadows are not supported by Internet Explorer 6, 7 and 8.


18. Searchbox
Example
You can add a searchbox in the sidebar, content or in any ExtraContent area (EC2, EC3, EC4, preferably not in EC3), How to do this, for example in the EC4 (above the Content)?

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


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

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


C. When you put this code between <div id="myExtraContent1"> and </div> it shows up in the EC1 area. Choose the colors in the Theme Variations.
When you put this code between <div id="myExtraContent2"> and </div> it shows up in the EC2 area.
When you put this code between <div id="myExtraContent4"> and </div> it shows up in the EC4 arear.

Another (much easier) option is to put the code in the free ExtraContent stack and enablefor example nr 1 in the info panel 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”.

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

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

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


19. 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 content.
When you put this code between <div id="myExtraContent2"> and </div> it shows up in the EC2 area below the footer.
When you put this code between <div id="myExtraContent4"> and </div> it shows up in the EC2 area above the content.

Another option is to put the code above in the free ExtraContent stack and choose 1 in the settings of this stack.

20. 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 content.
When you put this code between <div id="myExtraContent2"> and </div> it shows up in the EC2 area below the footer.
When you put this code between <div id="myExtraContent4"> and </div> it shows up in the EC2 area above the content.

Another option is to put the code above in the free ExtraContent stack and choose 1 in the settings of this stack.

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


22. Built-in Theme Color Styles
You can select 20 different built-in color styles in the Page-Inspector > Styles. See image below (left).
And of course you can customize everything from within a style and save it with another name (image right). Choose “Save Style As...” and give your own style a name.

theme_styles

23. Colors (Optional)
By default the background and text colors of the sidebar and EC1 and EC2 with the responsive layout on your iPhone or iPad have the same colors as on your Mac.
When you prefer a different color* to the sidebar background and text, the EC1 and 2 in the responsive layout put this in the Custom CSS:
for a BACKGROUND color:

#sidebarContainer2 {background-color: #FF0000;}

or a transparent BACKGROUND:

#sidebarContainer2 {background-color: transparent;}

TEXT color:

#sidebarContainer2, #sidebarContainer2 a:link {color: #00FF00 !important;}
#sidebarContainer2 a:link {text-decoration: underline;}


EXTRACONTENT1 color:

#sidebarContainer2 #myExtraContent1,
#sidebarContainer2 #myExtraContent1 a:link {color: #0000FF;}
#sidebarContainer2 #myExtraContent1 a:link {text-decoration: underline;}

EXTRACONTENT2 color:

#sidebarContainer2 #myExtraContent2,
#sidebarContainer2 #myExtraContent2 a:link {color: #0000FF;}
#sidebarContainer2 #myExtraContent2 a:link {text-decoration: underline;}

*About the colors: #FF0000 is the HTML color code for red, and #00FF00 for green, etc. Any color is possible, see this page: h9p://www.computerhope.com/htmcolor.htm
When you use a logo, the background on a mobile device will have a color. Paste this in the Custom CSS to make it transparent:

#logo2{background-color: transparent;}


24. Hide the menu-icons and replace them with a word
In the Theme Styles > Responsive design you can choose between three different icons:

menu_icons

In the Theme Styles > Hide section you can choose a smaller button.
But you can also hide these icons and replace them with a word, for example MENU. How to do this?

• Step 1: Right-click the theme in the theme drawer, select “Reveal theme contents in finder...” and in the folder opening up go to the scripts folder and open it. In this folder you see the togglemenu.js script. Open it with Texteditor (it’s on your mac) or with the free TextWrangler. The image below shows what you see:

MENU
Put a word (preferable short!), for example MENU, between

<div id="menu-icon">

and

</div>


So it will be

<div id="menu-icon">MENU</div>


(see image above in the red circle). Don’t change anything else in this script!

• Step 2: Paste this in the Custom CSS (Page-Inspector > Header > CSS):

#menu-icon {
width: 82px;
font-size: 40px;
font-family: 'PT Sans Narrow', sans-serif; text-transform: uppercase;
line-height: 2;
color: #000000; background-image:none !important;}

#menu-icon:hover, #menu-icon.active {color: #FF0000;}


When you would like the icon ánd the word MENU paste this in the Custom CSS:

#menu-icon {
width: 150px;
font-size: 40px;
font-family: 'PT Sans Narrow', sans-serif;
text-transform: uppercase;
line-height: 2.1;
text-align: right;
color: #000000;}

#menu-icon:hover, #menu-icon.active {color: #FF0000;}


Increase or decrease the width and/or the font-size until you’re satisfied.
About the colors: #000000 is the HTML color code for black, and #FF0000 (in this example the color when hovering the menu button) for red.
Any color is possible, see this page: http://www.computerhope.com/htmcolor.htm

Responsive Menu Font-size
By default the font-size of the responsive menu is 24px. Other size? Paste this in the Custom CSS (any number is possible):

#nav{ font-size: 18px;}

Fixed Responsive Menu
When you paste this in the Custom CSS the responsive menu will stay at the bottom of your mobile when scrolling. But please use this when you have only a few menu-items:

#menu-icon,#nav {position: fixed;}

Hide horizontal sidebar beam
When your sidebar is empty you’ll see a small horizontal beam at the bottom of your page. When you don’t like this you can hide it in the Theme Styles > Hide...Show > Hide Responsive Sidebar.
Transparent background horizontal sidebar beam
By default the sidebar background in responsive mode has a color. When you prefer a transparent background paste this in the Custom CSS:

#sidebarContainer2 {background-color: transparent;}


25. Disable Parent Links
A common request made by many RapidWeaver users is the ability to disable links in a drop-down menu, but keep the text displayed in the menu and acting as a trigger for sub-pages. The Infinite-R theme is equipped with the Link-Suppressor script by Will Woodgate. In the Theme Styles is a button to disable the parent links. Simple and reliable.


-------------------------------------------------------------------------------------------
HV INFINITE-r may not be resold or redistributed without the express written permission of Henk Vrieselaar:
2016