HV-NOTE-PAD MANUAL
In the download file are two themes:
NOTE PAD theme. This one is responsive (see F below).
NOTE PAD (not-responsive) theme. Some Chapters below don't apply for the not-responsive version.

First some important notes:
A. 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 (see Chapter 5).

B. When you don’t see the menu-icon in iPad Portrait or iPhone mode (or when you narrow your browser) go to your Rapidweaver preferences, and ensure that all options below are enabled (see image left)!

prefs

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


This makes exports of your project and uploading of your website faster and gives an improved Internet Explorer support too.
Also select these options in the Page-Inspector > General to show the Right- and Down Arrows (menu):

ut

B. This theme has many different Theme Styles and Color options. Don’t forget the Theme Styles > Miscellaneous section (see image left).

misc

C. Some fonts in this theme are Google fonts (QuickSand, Oxygen, Capriola, McLaren). They only show up when you are online. Local preview doesn't work . So when you’re working offline some fonts are not visible! All other fonts show up when you’re offline and online.

D. This theme works fine with Rapidweaver 4 and 5+, and with all plugins and stacks. When you have questions about this theme feel free to post them on the RapidWeaver Forum (preferrable), or drop me an email.
When you have questions about or issues with stacks or plugins (so not theme-related questions) please post them on the RW forums or send their developers an email.

E. This theme works fine in all modern browsers (IE7+, Safari, Firefox, Opera, Camino, etc.) and on your iPhone/Android and iPad/tablet. Down- and Right Arrows don't show up with IE7. But you can also use Font-Awesome arrows for this (but first disable the built-in icons in the Theme Styles > Miscellaneous section).

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

WHAT'S IN THE MANUAL
1. How to install a theme
1a. Applying Custom CSS Code
2. The Title and Logo have a link with your website
3. Position of the Logo
4. The Sidebar and sidebar icon (and how to replace it)
5. Using RapidCart
6. Using the bgStretcher stack
7. Font-Weight Title, Slogan and/or Menu
8. Absolute or Fixed Sidebar Position
9. Fluid images with the flexible tag
10. Content (Semi)Transparent
11. Inkspot or Coffee Stain position in Content
12. Add a Background Pattern to the body
13. Width SubMenu
14. Underline Links
15. Searchbox
16. TextTime script
17. Date (US and European) script
18. Mail a Friend script
19. Built-in Theme Color Styles
20. ExtraContent
21. Headings (h1, h2, h3, h4, h5, h6 and fonts)
22. More CSS
23. Font Awesome Icons:
       Start with your first FontAwesome Icon
       Size of the FontAwesome Icons
       Add a Letterpress effect or shadow to your FontAwesome Icon
       Add a link to your FontAwesome Icon
       Put an FontAwesome Icon in the ExtraContent 1 or 2 area
       Put an FontAwesome Icon in a Blog- or Filesharing page, or in the Menu
       Multiple icons
       Each icon a different color
       Icons with text
       Replace the Menu Icon
       Use the latest Font Awseome icons


1. How to install a theme
To install the NOTE-PAD theme, you have 2 options. You can double click on the theme to install it automatically, or drag the theme into the Stacks folder located within the Application Support Rapidweaver folder.
This folder can be found by going to the (username) / Libary / Application Support /RapidWeaver folder.
With Lion: Apple has hidden the user’s Library folder to casual viewers, in an attempt to stop new Mac users screwing their machines up. To access it, in the Finder go to the ‘Go’ menu and hold down the Option (Alt) key; the Library folder will appear as a choice.

Then restart RapidWeaver: the new theme will appear in the themes drawer. The theme name in the theme drawer will be HV-NOTE-PAD. The reason for this is that I am adding my initials, HV, to the front of the theme names so that all my themes will be conveniently grouped together in your theme drawer and will be easier for you to find in the future.
I've personally become good at creating a folder for every theme, naming it the same as the theme and putting all the ReadMe files, snippets, etc that come with the theme into this folder. I also include an extra copy of the theme in case I ever have to re-install.  I place all these folders in another folder.

1a. Applying Custom CSS code
The NOTE PAD theme has a very useful 'custom.css' file within the theme contents. Into this file, you can enter custom CSS code. Unlike the Custom CSS box under the Page Inspector in RapidWeaver (image below 2), code entered into the custom.css file gets applied to all pages and enables you to edit CSS using an editor like CSSEdit, Espresso or the free TextWrangler.

To open the custom.css file, right click (or CTRL + Click) the theme preview icon in RapidWeaver and select "Reveal Theme Contents in Finder" (see image below 2). In the Contents you'll see different files and folders. Open the custom.css file in your preferred code editor, paste the code(s) in it and save the file. If you only need to apply custom CSS code to a single page, enter this code under the Page Inspector custom CSS box as normal (Page-Inspector > Header > CSS, see image below 2).

CUSTOMCSS

When you don't see any difference after adding the code to this custom.css file and saving it, add a space and !important to it.
Example:

Not

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

but

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


2. The Title and Logo have a link with your website
The Title and Logo have a link with the index.html page of your website. Whatever base url is inserted in RapidWeaver > Site Setup > Website will be the link.

3. Position of the Logo
Drag your Logo into the Site Setup > Logo area. By default it’s hidden! Click on the radio button in the Theme Styles > Logo and ExtraContent1 > Show Logo to enable it. Your Logo shows up above the Title and Slogan.

logo

Only JPG, PNG or GIF images are allowed!
You can also drag your logo into the sidebar (below the Title and Slogan) or in the ExtraContent1 area. Now your logo has no link to the index.html, so you have to make a link manually.

4. The Sidebar and Sidebar icon (and how to replace it)
By default the sidebar is hidden! So content in the the sidebar will not show up in preview by default. There are three sidebar options in the Theme Styles > Sidebar:

The Sidebar is hidden (‘Hide Sidebar (by Default)’)
With the option ‘Show Sidebar’ the sidebar shows up, in mobile mode too.
With the option ‘Show Sidebar with Open/Close Button’ the sidebar shows up too, but is closed in mobile mode.
On your mobile device (tablet, smartphone) the sidebar shows up below the Title and Slogan, when you click on the Chevron Down icon at the top left side (see image below).

fai_icon

HOW CAN I REPLACE THIS ICON WITH ANOTHER ONE?
A. When you don’t like this button, choose any other icon, for example the Bookmark icon or any of the other 302 Font-Awesome icons (see chapter 22.).
Paste this in the Custom Header (Page-Inspector > Header > Header) to hide the asterisk icon and to show the Bookmark icon:

<body><style>i.icon-chevron-sign-down{display: none !important;}</style>
<div id="sb-icon"><i class="
icon-bookmark"></i></div></body>

So only replace the name of the icon (red here) with the name of another icon. Do not remove the quotation marks and don’t change anything to the blue text!
Choose an icon-colour in the Theme Styles > Sidebar.

B. There's another option to replace the sidebar icon. Paste this in the Custom CSS (Page-Inspector > Header > CSS) :

#sb-icon .icon-chevron-sign-down:before {content: "\f016"}

Here's a list of Font Awesome Icons and their CSS values for each icon.
In the example above I've replaced the chevron-down icon with the icon-file icon: \f016

When you prefer a sidebar open by default on your mobile device, enable the Sidebar in the Theme Styles > Sidebar > Show Sidebar with Open/Close Button (or choose option B above) and paste this in the Custom CSS (or in the 'custom css' file in the Contents of the theme, see Chapter 1a):

#sidebar2 {display: block;}


With the sidebar button (top left) you can click the sidebar away.
See Chapter 22 how to replace the menu icon.

5. Using RapidCart
When using the RapidCart plugin, the Title (and Logo, when enabled) may be covered by a horizontal beam when in responsive mode (iPad in portrait mode, iPhone, etc).
To avoid this, paste this in the Custom CSS (or in the 'custom css' file in the Contents of the theme, see Chapter 1a):

• Without Logo enabled:

@media screen and (max-width:768px) {
#pageHeader {margin-top: 85px !important;}
#menu-icon {top: 10px;}
#contentContainer{margin-top: 15px;}
#nav {top: 85px;}}


• With Logo enabled:

@media screen and (max-width:768px) {
#pageHeader {margin-top: 0px !important;}
#menu-icon {top: 10px;}
#contentContainer{margin-top: 15px;}
#logo {margin-top: 85px !important;}
#nav {top: 85px;}}


• With only ExtraContent1 enabled and Logo hidden:

@media screen and (max-width:768px) {
#pageHeader {margin-top: 0px !important;}
#menu-icon {top: 10px;}
#contentContainer{margin-top: 15px;}
#myExtraContent1 {margin-top: 85px;}
#nav {top: 85px;}}


Have a look in preview with a browser and make the browser window narrower.
With a tall logo just increase some numbers in the code above until it fits.

6. Using the bgStretcher stack
Example
When you use the the bgStretcher stack to create a slideshow or image to cover your whole background, paste this in the Custom CSS to make the sidebar and pageHeader transparent in mobile mode:

@media screen and (max-width:768px) {
#pageHeader,#sidebarContainer2 {
background-color: transparent !important;}}


I’ve also enabled the button Miscellaneous > Content Transparent Black. Other options: see Chapter 10.
And I’ve added text-shadow to the sidebar and content (see chapter 22).

When you use the bgStretcher 2 stack, version 1.02 paste this in the Custom CSS too:

#contentstrip {margin-top: -15px;}


7. Font-Weight 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) (or in the 'custom css' file in the Contents of the theme, see Chapter 1a):

#pageHeader h1 {font-weight: bold;}


Now the Title has a bold font.

#pageHeader h2 {font-weight: bold;}


Now the Slogan has a bold font.

#navcontainer a, #navcontainer ul ul a {font-weight:bold;}


Now the Menu has a bold font.

8. Absolute or Fixed Position
Optional is a fixed position of the Left Side (Title/Slogan/Menu/Sidebar) (Theme Styles > Miscellaneous > Left Side Fixed Position).
With a fixed position the left side of the website is fixed when scrolling up and down the content.
Example with fixed position.

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

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

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

media_editor2

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

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

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

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

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

10. Content (Semi)Transparent
In the Theme Styles > Miscellaneous you can enable the button “Content Transparent Black”.
Perhaps you prefer a ‘darker or lighter black’. To do this, paste the code below in the Custom CSS (or in the 'custom css' file in the Contents of the theme, see Chapter 1a) and increase or decrease the number in this code 0.55 to make it more or less black, for example 0.15 or 0.65 or whatever (IMPORTANT: This works with all browsers, but not with IE6, IE7 and IE8!):

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


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

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


When you prefer a 100% transparent Background enable the button “Background 100% Transparent” in the Theme Styles > Miscellaneous section.

11. Inkspot or Coffee Stain position in Content
Example 1
Example 2

In the Theme Styles > Miscellaneous you can enable the button(s) “Add Coffee Stain to Content” or “Add Inkspot to Content”. Only one background image is possible. When you prefer another position of these transparent images paste this in the Custom CSS (or in the 'custom css' file in the Contents of the theme, see Chapter 1a):

#contentContainer {background-position: 350px 230px;}


These numbers are examples. The first number is for the horizontal position, the second one for the vertical position. Any number is possible. Without content (text, images) only a part of these images will show up.
Add your own image (for example image.jpg) in the Resources and this in the Custom CSS (or in the 'custom css' file in the Contents of the theme, see Chapter 1a):

#contentContainer {background: url(%resource(image.png)%) no-repeat 70px 80px;}



12. Add a Background Pattern to the body
By default you can choose a background color in the Theme Styles > Colours > Body Background. With some NotePad Looks (Book, Vertical Line, Binding 1, 2 and 3, Stitching2, Notebook Grey, Ticket 1, 2 and 3, Tear-Off Edge 1, 2 and 4, Tear, Paper and Clean) it could be nice to add a pattern to the background.
I’ve made an example here:

How to do this:
Step 1: Download a pattern from the internet (see below). There are some patterns in the download file to start with.
Step 2: Add your pattern, for example pattern1.jpg, to the Resources (RapidWeaver 5) and add this to the Custom CSS (Page-Inspector > Header > CSS):

body,#sidebarContainer2,#pageHeader,#logo,#myExtraContent1,
#myExtraContent2,#navcontainer ul li ul,nav
{background: url(%resource(pattern1.jpg)%) repeat fixed;}


You may delete the word fixed in the code above.
IMPORTANT: Most NotePad looks are transparent. So enable the button Theme Styles > Miscellaneous > Content 100% Transparent to make the Content transparent too:

transpa

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 THE BACKGROUND-PATTERN WHEN IN MOBILE MODE.
Paste this in the Custom CSS:

@media screen and (max-width:768px) {body,#sidebarContainer2,#pageHeader,#logo,#myExtraContent1,
#myExtraContent2,nav,#navcontainer ul li ul {background-image: none;}}

HIDE THE BACKGROUND-PATTERN FROM THE SUBMENU BACKGROUND.
Paste this in the Custom CSS:

#navcontainer ul li ul {background-image: none;}


HIDE THE BACKGROUND-PATTERN FROM THE SUBMENU AND THE MOBILE MENU BACKGROUND
.
Paste this in the Custom CSS:

#navcontainer ul li ul,nav {background-image: none;}

Choose a color in the Theme Styles > Menu Font-Size + Colours.

13. Width SubMenu
When your submenu text is long and you’ve selected in the Theme Styles > Menu Type > SubMenu Side, it could be possible that a part of the text goes to the next line. When you would like a wider submenu paste this (so only with Menu Side!) in the Custom CSS (or in the 'custom css' file in the Contents of the theme, see Chapter 1a):

#navcontainer ul ul {width: 230px;}
#navcontainer ul ul ul {left: 230px;}


Any number is possible but both tags must have the same number.

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

a:link {text-decoration: underline;}



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

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


B. Name the RapidSearch page folder for example "search". And then, paste this code as plain text in the content or sidebar:

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


When you put this code between <div id="myExtraContent1"> and </div> it shows up in the EC1 area above the title (enable the EC1 area in Theme Styles > Logo and ExtraContent1).

Another option is to put the code in the free ExtraContent stack and 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. -->
<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 myExtraContent1 with myExtraContent 2 in the code above when you prefer it in the EC2 area.

16. TextTime script
Example
Paste the code below as plain text in the Sidebar or Content. You can replace the names of the months and the days in your own language. Do not remove the quotation marks!

<script language="JavaScript">

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

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

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

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

</script>


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

When you put this code between <div id="myExtraContent1"> and </div> it shows up in the EC1 area above the title (enable the EC1 area in Theme Styles > Logo and ExtraContent1).

Another option is to put the code in the free ExtraContent stack and choose 1 in the settings of this stack.Replace myExtraContent1 with myExtraContent 2 in the code above when you prefer it in the EC2 area.

17. Date (US and European) script
Example

Paste the code below as plain text in the Sidebar or Content when you prefer a US Date:

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


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


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

This is the code when you prefer a European Date:

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

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


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

When you put this code between <div id="myExtraContent1"> and </div> it shows up in the EC1 area above the title (enable the EC1 area in Theme Styles > Logo and ExtraContent1).

Another option is to put the code in the free ExtraContent stack and choose 1 in the settings of this stack.Replace myExtraContent1 with myExtraContent 2 in the code above when you prefer it in the EC2 area.

18. 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 above the title (enable the EC1 area in Theme Styles > Logo and ExtraContent1).

Another option is to put the code in the free ExtraContent stack and choose 1 in the settings of this stack.Replace myExtraContent1 with myExtraContent 2 in the code above when you prefer it in the EC2 area.

19. Built-in Theme Color Styles
You can select 12 different built-in color styles in the Page-Inspector > Styles. See image below (left).

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

20. 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 theme has two EC areas: ExtraContent1 and ExtraContent2. The EC1 area is above the Title/Slogan, EC2 is below the Title and Slogan. Both areas can be used for text, some stacks, images (for example social network icons with the built-in Font-Awesome icons or your own icons), a searchbox, date/time or mail-a-friend snippet (see chapters above), some stacks (for example the Hide ‘n’ Show stack) or whatever.

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

<div id="myExtraContent1">This is the ExtraContent 1 container. 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>


*IMPORTANT: By default the ExtraContent1 area is hidden. Enable a button in ‘Theme Styles > Logo and ExtraContent 1’ to show it.

FONT-SIZE: By default the font-size of the ExtraContent areas is the same as the selected Sidebar font-size. When you prefer another size paste this in the Custom CSS (11px is an example) (or in the 'custom css' file in the Contents of the theme, see Chapter 1a):

#myExtraContent1 {font-size: 11px;}


Or the EC2:

#myExtraContent2 {font-size: 11px;}


21. Headings (h1, h2, h3, h4, h5, h6 and fonts)
To make a portion of text stand out, select the text and choose ‘Blockquote’ from the HTML submenu. This will apply HTML tags to the code, and will be displayed as selected when Previewing the site.The h1 to h6 tags are used to define HTML headings. You can find the here (select a word or text line and go to RW > Format > HTML > and choose Heading 1, 2, 3, 4, 5 or 6). Each Heading has a different font-size.

You can add another font to each tag too. For example when you've selected the h1 heading and would like the BEBAS font to the h1 tag. Paste this in the Custom CSS:

h1 {font-family: 'BebasNeueRegular'; }

Or the LOBSTER font to the h1 tag: (see this example)

h1 {font-family: 'LobsterTwoItalic';}

Or the WINTERTHUR font to the h2 tag:

h2 {font-family: 'WinterthurCondensedRegular'; }

Or the KINGTHINGS font to the h2 tag:

h2 {font-family: 'KingthingsExeterRegular'; }



22. More CSS
A: Letterpress
Example

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

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


Or to the Slogan with this in the Custom CSS:

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


Or to the Menu:

#navcontainer a, #navcontainer ul ul a
{text-shadow: 0 -1px 0px rgba(0,0,0,0.50);}


Or to the Menu, Title and Slogan :

#navcontainer a, #navcontainer ul ul a,#pageHeader h1
{text-shadow: 0 -1px 0px rgba(0,0,0,0.30);}


Or to all text at the left side at once, including the sidebar and EC1:

#pageHeader h1, #pageHeader h2, #navcontainer a, #navcontainer ul ul a, #sidebarContainer #sidebar, #sidebarContainer2, #myExtraContent1,#myExtraContent2
{text-shadow: 0 -1px 0px rgba(0,0,0,0.50);}


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

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

B: Text Shadow
Example

I’ve added this code in the Custom CSS (or in the 'custom css' file in the Contents of the theme, see Chapter 1a):

#contentContainer,#pageHeader h1,#pageHeader h2, #sidebarContainer #sidebar,#sidebarContainer2,#myExtraContent1,#myExtraContent2, #navcontainer a, #navcontainer2 a, #navcontainer ul ul a, nav,#menu-icon, #sb-icon
{text-shadow: 2px 2px 4px rgba(0,0,0,0.45);}


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

Add this to the Custom CSS (or in the 'custom css' file in the Contents of the theme, see Chapter 1a) to add some text shadow to the Content (so the right side of the page):

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


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

And text-shadow to the Blog and Filesharing Title:

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


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

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

C: Vertical Border (1px) to Contentstrip
Example

By default you can add a double vertical border to the vertical contents trip in Theme Styles > Miscellaneous. Add this code in the Custom CSS (or in the 'custom css' file in the Contents of the theme, see Chapter 1a) to add a 1px border:

#contentstrip {border-right-style: solid;border-right-width: 1px;}

And this when you would like a box-shadow too:

#contentstrip {-webkit-box-shadow: 10px 0px 25px rgba(0,0,0,0.10);-moz-box-shadow: 10px 0px 25px rgba(0,0,0,0.10);box-shadow: 10px 0px 25px rgba(0,0,0,0.10);}

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

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

TUTORIAL about the icons

START with your FIRST FONT AWESOME ICON
1. Paste this as Plain Text (RW > Edit > Paste as Plain Text) anywhere in your website (Sidebar, Content, Footer, Menu, Stacks, ExtraContent areas, etc.):

<i class="icon-camera"></i>
In Preview a camera icon shows up now:
camera

Be sure always to end with the tag in the code above!
Replace the word icon-camera with for example icon-globe, icon-circle-arrow-right, icon-twitter, icon-heart or whatever. Do not remove the quotation marks! Find all names and icons here.

SIZE of the FONT AWESOME ICONS
• By default the font-size of these icons is 20px. In the ‘Theme Styles > Font-Awesome Icons Font-Size and Colours’ you can choose 30px or 40px.
With this in the Custom CSS (Page-Inspector > Header > CSS, or in the 'custom css' file in the Contents of the theme, see Chapter 1a). Any font-size is possible, for example 32px:

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


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

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


When you prefer another size in the icons in the Content (so the Right side), paste this in the Custom CSS (or in the 'custom css' file in the Contents of the theme, see Chapter 1a):

#contentContainer [class^="icon-"]
{font-size: 50px;}


And another size in the Sidebar:

#sidebarContainer [class^="icon-"], #sidebar2 [class^="icon-"]
{font-size: 64px;}


And another size in the ExtraContent1:

#myExtraContent1 [class^="icon-"]
{font-size: 36px;}


And another size in the ExtraContent2:

#myExtraContent2 [class^="icon-"]
{font-size: 42px;}


And another size in the Menu:

#navcontainer [class^="icon-"]
{font-size: 22px;}


And another size in the Footer:

#footer [class^="icon-"]
{font-size: 24px;}


(sizes above are examples, any number is possible)
ADD a LETTERPRESS EFFECT to your FONT AWESOME ICON
Example

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

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


Paste this in the Custom CSS for some letterpress effect to only icons in the content:

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


And to the Sidebar:

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


And to in the ExtraContent1:

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


And to the ExtraContent2:

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


And to the Menu:

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


And to the Footer:

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



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

ADD a LINK to your FONT AWESOME ICON
(for example to your Facebook page):

<a href="#"><i class="icon-facebook"></i></a>

Replace the # in this code with the page URL of your icon and the website will open in the same window. When you replace the # with http://www.facebook.com/jjohnson" target="_blank (so add only target="_blank) the website opens in a new window, so:

<a href= "http://www.facebook.com/jjohnson" TARGET="_blank"> <i class="icon-facebook"></i></a>

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

PUT an FONTAWESOME ICON in the EXTRACONTENT 1 or 2 AREA
When you put the icon in the EC1 area, first enable the EC1 area in the ‘Theme Styles > Logo and ExtraContent1’ and now paste this in the Sidebar or Content as Plain Text:

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

In Preview your icon shows up in the ExtraContent1 area, above the Title. Be sure always to end with the </div> tag!!! Or paste the code ...

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

… in the free ExtraContent stack and select EC1 or 2 in the settings of the stack.
Replace myExtraContent1 with myExtraContent 2 in the code above when you prefer it in the EC2 area.

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

PUT an AWESOME ICON in a BLOG, FILESHARING Page or in the MENU
Below you see some examples of Font Awesome Icons in a Filesharing Page, A Blog Page and in the Menu. You can paste them in the Title, the Slogan too or wherever else you want.

Examples:

• FileSharing Page (example)

FileSharing Title:
FAI_FILESHARING

• Blog Page (example)

Blog Title:

FAI_TITLE

Blog Read More

FAI_READMORE

Blog RSS feed:

FAI_RSS

Blog Time/Category (add a bit space to the left side of the font-awesome code):

FAI_TIME

• Menu (for example with the Home icon):

FAI_HOME

Or with the icon at the left side, or without name:

icon_menu

The icon will have the same color as the Menu Text. Other color? Paste this in the Custom CSS:

#navcontainer [class^="icon-"] {color: #FF0000 !important;}


#FF0000 is the HTML-color for red. All HTML colors.

Other font-size? Paste this in the Custom CSS:

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



Multiple Icons
For multiple social icons, repeat the above steps for each desired icon. For example:

<i class="icon-twitter"></i> <i class="icon-apple-logo"></i> <i class="icon-star"></i>

You can paste as many icons behind each other as you like and you can increase the letter-spacing too (by default it's 8px) when you have multiple icons. For example:

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


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

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


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

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

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


Icons with Text
With this the text and the icon are inline and have the same font-size, for example this Dashboard icon:

<i class="icon-dashboard"></i> This is a Dashboard Icon

Be sure that when you start with a tag!

Replace the Menu Icon
On your mobile device (tablet, smartphone) menu shows up at the right side as a reorder icon. When you don’t like this button, choose any other icon or replace it with a word, for example MENU.

NEW! Use the latest Font Awesome icons
Paste this in the Custom Header (Page-Inspector > Header > Header) when you want to use these icons:

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

Find all icons on this cheat sheet.

A. Replace it with another icon.
For example the Bookmark icon or any of the other 302 Font-Awesome icons (see chapter 22).
Paste this in the Custom Header (Page-Inspector > Header > Header) to hide the reorder icon and to show the Bookmark icon:

<body><style>i.icon-reorder{display: none !important;}</style>
<div id="menu-icon"><i class="
icon-bookmark"></i></div><body>

So only replace the name of the icon (red here) with the name of another icon. Do not remove the quotation marks and don’t change anything to the blue text! Choose an icon-colour in the Theme Styles > Menu Font-Size + Colours.

Chapter 4 describes how to replace the sidebar icon.

B. Replace it with a word.
Paste this in the Custom Header (Page-Inspector > Header > Header) to hide the reorder icon and to show a word (your own text):

<body><style>i.icon-reorder{display: none !important;}</style>
<div id="menu-icon">
MENU</div></body>

In this example the word is MENU. Do not change anything to the blue text! Choose a text colour in the Theme Styles > Menu Font-Size + Colours.
Additionally paste this in the Custom CSS (font-size is up to you):

#menu-icon {font-size: 24px;padding-right: 10px;}


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.



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