HV RATIO MANUAL

A. Go to your Rapidweaver (RW5) preferences, and ensure that the option Consolidate CSS files is enabled. With RW6/7 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.

B. IMPORTANT: This theme is made for RW7, but works fine with RW5, RW6 and RW7. RATIO takes advantage of the new Banner Image option in RW7, so with RW5 and RW6 you have disable this option by checking the checkbox in the Theme Styles > Banner Height and Hide Banner > Hide Banner.

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. This theme is responsive 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.    ExtraContent
5a.    Banner Image Option with Rapidweaver 7
5b.    Banner or Slideshow in ExtraContent2 (above Content)
6.    Font Awesome Icons
7.    Font Awesome icons before the Page Title
8.    More CSS
9.    Searchbox
10.  TextTime script
11.  Date (US and European) script
12.  Mail a Friend script
13.  Using the Hide 'n' Show stack
14.  Replace the words Category, Archives, Feeds (so the sidebar content) links
15.  Different Font to Content, Headings, Blog and Filesharing Title


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

2. Automatic Updates with Waterfall
Easy, Automatic Theme Updating with the plugin Waterfall for RapidWeaver®.
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/7) will be the link.
Drag your Logo into the Site Logo area.
By default the logo is hidden. Now go to the Theme Variations > Logo section and enable the option to display the logo. It will show up above the Title.
The Logo is always fluid.

Another option is to put your logo in for example the ExtraContent1 area (read Chapter 4), at the bottom right. Now your logo has no link to the index.html, so you have to make a link manually.

4. ExtraContent
This theme is enabled with a very special feature called ExtraContent. ExtraContent allows you to add more content then RapidWeaver typically allows.

This theme has 3 EC areas:
• ExtraContent1: the EC1 area is at the bottom right, in the Right area.
ExtraContent2 in the Left area, above the Content area. Use this area only for a responsive image or slideshow (with a slideshow stack in the free ExtraContent stack) or with the Weaverpix plugin (select EC2 in the plugin). Read more about this in the next Chapter (5).
• ExtraContent3 is between the Content and Footer. You can select a Font-Size, Font-Color and Background Color for this in the Theme Variations > ExtraContent3 Font-Size and Other Colours > ExtraContent Colours.

You can add ExtraContent in two ways:
1. With these free stacks: ExtraContent stack or the ExtraContent Plus 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="myExtraContent2">This is the ExtraContent 1 container</div>
<div id="myExtraContent3">This is the ExtraContent 3 container</div>


There is an EC snippet in the download file with a Plain Text lay-out for use in not-Stacks pages (Blog, Contact, Styled Text, etc).

5a. Banner Image Option with Rapidweaver 7

RATIO takes advantage of the new Banner Image option in RW7. The theme comes with one banner photo, but you can replace it with your own image. How to do that?

a. Drag your image into the ‘Override Site Banner’ area in the Page-Inspector > General Settings. See image below.

banner2

In preview your own image shows up. You can hide it or choose a height in the Theme Styles > Banner Height and Hide Banner:

height400

b. EXTRA. I’ve added an extra option in the Theme Styles > Banner Height and Hide Banner for a FullScreen Banner, even blurred:

banner2

Just try it. The right side of the window (Title, Slogan and Logo) is semitransparent now. With this option you may have to choose another Content (and Sidebar when you’ve used it) Font Color.
Check the checkbox Theme Styles > Miscellaneous > Add Text-Shadow and/or Theme Styles > Miscellaneous > Add Overlay for a text-shadow and/or semitransparent dotted overlay (only possible with the Full Screen Image).

IMPORTANT: this option works only with RW7! So with RW5 and RW6 you have disable this option by checking the checkbox in the Theme Styles > Banner Height and Hide Banner > Hide Banner.

5b. Banner or Slideshow in ExtraContent2 (above the Content)

In the previous Chapter 5a I’ve explained how to add your now image to take advantage of the new Banner Image option in RW7. Some users prefer a slideshow above the content at the left side instead of only one image. I’ve added an ExtraContent2 for this.
This chapter explains how to use the ExtraContent2 area for a responsive image or slideshow.

ADD YOUR BANNER WITH A STACKS PAGE
Step 1. First check the option in the Theme Styles > Banner Height and Hide Banner > Hide Banner. Only with this option the ExtraContent2 is enabled.
Step 2. With a Stacks page: drag an ExtraContent stack (free download) into a stacks page and select ExtraContent2 in the settings of the stack.
Step 3. Now drag your own image into this stack, see image below.
Step 4. In preview your image shows up at the top of the Content area.

ADD YOUR BANNER WITH A NOT-STACKS PAGE
With a not-stacks page (Contact, Blog, Styled Text, Sitemap, etc.) or Stacks page:
Step 1. First check the option in the Theme Styles > Banner Height and Hide Banner > Hide Banner. Only with this option the ExtraContent2 is enabled.
Step 2. First drag your image into the Resources of Rapidweaver.
Step 3. Copy the code below and paste it into a RW page as Plain text (RW > Edit > Paste as Plain Text) (in the content or in the sidebar):

<div id="myExtraContent2"><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 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="myExtraContent2"><img src="%resource(images/image1.jpg)%" ></div>

In preview your image shows up.

Images can be located in your Resources (see 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="myExtraContent2"><img src="http://www.domain.com/images/image1.jpg" ></div>

Try this working example:

<div id="myExtraContent2"><img src="https://static.pexels.com/photos/48796/carnival-woman-costume-orange-48796.jpeg" ></div>


HOW TO ADD A SLIDE SHOW IN THE EXTRACONTENT2
Adding a slide show in the ExtraContent2: drag your slide show stack in the ExtraContent stack and select EC2 in the settings of your stack. Add your images as described in the tutorial of the slide show stack. When the slide show stack has an option for showing thumbnails I would hide that option. But that's up to you.
A great stack for this is the (free) Freestyle stack, but there are many different other stacks for this, have a look at rapidweavercentral.info

Adding a slide show in the ExtraContent2 with the Weaverpix plugin or another slideshow plugin: select EC2 in the settings of the Weaverpix plugin. Add your images as described in the tutorial of the plugin.
Import a Weaverpix slideshow with the @import feature of the Pluskit plugin (or with the Global Content stack) into any other page.

Tutorial how to import a Weaverpix page (or another slideshow plugin) with Pluskit into another page:
1. Add a Pluskit Page to your project.
2. Add a Weaverpix Page to your project. Add Photos and choose a theme. The Page Title of this page is for example weaverpix (any name is possible). Hide this page from the menu.
3. Now there are two options:
a. Add a Stacks page to your project where you want to show your Weaverpix slideshow, drag a text-stack into it and paste this in the stack to import the Weaverpix page: @import((weaverpix))
b. Instead of a Stacks 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((weaverpix))
4. In Preview your slideshow shows up.

6. 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 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 and ExtraContent. You like them bigger? 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 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.

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. Maybe only the Home icon. But that's up to you. Read the previous Chapter 6 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.

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:

#navcontainer .fa {display:none;}


8. More CSS
You can put all css-codes below in the Custom CSS:

Extra CSS when you use the bgStretcher stack
Put this in the Custom CSS so the Left Side is transparent:

#left,
#sidebarContainer,
.toggle-box + label,
#myExtraContent3
{background-color: transparent !important;}

.toggle-box + label,#sidebarContainer
{border-bottom: 1px solid #ffffff;}

When you enable the Sidebar you’ll notice horizontal white lines: #ffffff is the HTML color for white. Other HTML colors.
With this in the Custom CSS the Right Side will be transparent:

#right,
#pageHeader
{background-color: transparent !important;}


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).
Center thumbnails and text in the built-in Photo Album Page
With this you can center the thumbnails wrap in a built-in Photo Album Page:

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


9. Searchbox
Example
You can add a searchbox in the sidebar, content or in any ExtraContent area (EC1 or EC3, not in EC2), How to do this, for example in the EC1 (at the bottom right)?

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 above the Content. Choose the colors in the Theme Variations.

Another option is to put the code in the free ExtraContent stack and enable 1 in the settings of this stack.
Notes:
• Do not add index.html or index.php because for some reasons RapidSearch won't work with the absolute url.
• When you add the tag <br> at the end of the line <input type="text" name="query" value=""/> the word ‘Search’ goes to the next line.

So it will be this:

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


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

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 > SearchBox …

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


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

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

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

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

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


13. Using the Hide 'n' Show stack
A. 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 ExtraContent1 area). 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 in this example is: #container, #title, #footer

hns1

Or with the ExtraContent1, ExtraContent2 and ExtraContent4 too: #container,#title,#footer,#myExtraContent1, #myExtraContent2, #myExtraContent2

B. Add a Hide ’n’ Show stack and put this ID in the Content ID(s) for the image in the ExtraContent3 (see image below): #myExtraContent4
In this example the Start Action is Show Delayed and the effect is Toggle of the EC4 (image below left).

hns2

When you have an image in the EC1, put #myExtraContent1 in the input field. Have a look in preview…

There are many more options with this stack.

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

blog

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!
Select a color of these words in the Theme Variations > Colours > Blog Categories/Archives/Feeds/Tag text.

15. Different Font to Content, Headings, Blog and Filesharing Title
I’ve used many Google fonts and other fonts in this theme. You can choose different fonts to the Left and to the Right section of the screen.
When you like different fonts to for example the Content, Headings, Blog and Filesharing Title, do this:

A. First Choose a Main Font for the Left and Right side of the window in the Theme Variations > Font Left Side and Theme Variations > Font Right Side. For example the default font Raleway Bold for both sides.
B. Suppose you want to replace the font of the content and sidebar in the Left Side with for example the Droid Serif font. To do this paste this in the Custom CSS:

#contentContainer #content, #sidebarContainer #sidebar,#sidebarContainer .sideHeader
{font-family: 'Droid Serif', serif; font-style: normal;}

Have a look in Preview.
When you like this font in the ExtraContent1 too, paste this in the Custom CSS:

#myExtraContent1
{font-family: 'Droid Serif', serif; font-style: normal;}

And in the ExtraContent3:

#myExtraContent3
[font-family: 'Droid Serif', serif; font-style: normal;}

You can do this with any other font in this theme (see below).
Now we’re going to replace the Font of the Blog or Filesharing Title. Let’s choose the Julius Sans One Font. Paste this in the Custom CSS of a Blog- Page:

.blog-entry-title
{font-family: 'Julius Sans One', sans-serif; }

And this in a Filesharing Page:

.filesharing-item-title
{font-family: 'Julius Sans One', sans-serif; }

Have a look in Preview again.
Now the Headings (H3, h4, h5 and h6). For example the h3 with the Poppins font:

h3
{font-family: 'Julius Sans One', sans-serif; }

Replace h3 with h4, h5 or h6, or combine them (always separated with a comma!):

h3, h4, h5, h6
{font-family: 'Julius Sans One', sans-serif; }

I hope you understand how it works.

C. Below are all fonts you can use in the same way as I have done above:

Raleway Bold:

{font-family: 'Raleway', sans-serif; }

Droid Serif:

{font-family: 'Droid Serif', serif; font-style: normal;}

Nunito:

{font-family: 'Nunito', sans-serif;}

Fauna One:

{font-family: 'Fauna One', serif;}

Comfortaa:

{font-family: 'Comfortaa', cursive;}

ABeeZee:

{font-family: 'ABeeZee', sans-serif; }

Titilium Web:

{font-family: 'Titillium Web', sans-serif;}

Arvo:

{font-family: 'Arvo', serif;}

Ubuntu:

{font-family: 'Ubuntu', Arial, Helvetica, Geneva, sans-serif;}

Open Sans:

{font-family: 'Open Sans', Arial, Helvetica, Geneva, sans-serif;}

Arial:

{font-family: Arial, Helvetica, Geneva, sans-serif;}

Georgia:

{font-family:Georgia,serif;}

Helvetica:

{font-family: "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;}

Lucida:

{font-family: "Lucida Grande","Lucida Sans Unicode", helvetica, verdana, arial, sans-serif;}

Tahoma:

{font-family: Tahoma, Geneva, sans-serif;}

Verdana:

{font-family: Verdana, Geneva, sans-serif;}

Geneva:

{font-family:Geneva,Tahoma,sans-serif;}

Bree Serif:

{font-family: 'Bree Serif', serif;}

Poppins:

{font-family: 'Poppins', sans-serif}

Nobile:

{font-family: 'Nobile', sans-serif;}

Julius Sans One:

{font-family: 'Julius Sans One', sans-serif; }






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