HV FOTON MANUAL

! IMPORTANT

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.

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

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

D. This theme works fine in all modern browsers (IE8+, Safari, Firefox, Opera, Camino, etc.) and on your iPhone/Android and iPad/tablet.
It works fine with IE7 too, but the down arrows in the menu and font-awesome icons (see chapter 9) don't show up.

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.

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

WHAT'S IN THE MANUAL
1. How to install a theme
2. Add a Slide Show or Image to the body with the Foton stack
3. Add a Slide Show or Image to the body with a not-stacks page
4. Applying Custom CSS Code
5. Logo
7. Add your own Background Pattern to the body
8. Font Awesome icons before the Page Title
9. ExtraContent
10. Toggle Icon or text to open the Content
11. Font Awesome Icons
12. More CSS
     Font-Size SubMenu
     Line-Height Content
     Letter-Spacing
     Font-size of the Footer
     Font-Size Blog Entry
     Center the Content
     Center the ExtraContent
     Underline links
     Background Colour SubMenu with bgStretcher stack
     Fixed Menu
     Overlay with your own images
     More zoom and rotate options
13. Searchbox
14. TextTime script
15. Date (US and European) script
16. Mail a Friend script
17. Using the Hide 'n' Show stack
18. Tutorial importing a Contact Page
19. Blog Title, Filesharing, or Headings (h1, h2, h3, etc) Font
20. Replace the words Category, Archives, Feeds (so the sidebar content) links


1. How to install a theme
To install the HV-Foton theme, you have these options: you can double click on the theme to install it automatically, or drag and drop the theme on the RW icon, or drag the theme into the Rapidweaver folder located within the Application Support Rapidweaver folder.

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

2. Add a Slide Show or Image to the body with the Foton stack
In the download file of this theme is a FOTON stack. With this stack you can easily add images to the background of your webpage. This stack set is designed for use with RapidWeaver 5 and 6 and the Stacks Plugin version 2.

To achieve fast loading pages and normal image transitions, it is best to optimize your images (for example Photoshop and some other image editors) before uploading to your website or adding them into the RapidWeaver Resources. I prefer jpg images.
More data on a web page means longer loading time, and this can even affect your search ranking. While you can upload and insert full size images right from your camera to your site, those 10MB files are going to take much longer to load on your site than an optimized version of that same image that is, say, 300kB. And on a photography site with lots of images, you can see how this file size issue becomes critical.

A. In the download file is the FOTON Slideshow Images stack:

stack

After installation of this FOTON stack the following stack is available in the Stack elements library:

foton1

B. After adding the FOTON stack you can start with adding your images (1, 2, …until 10) via the Stacks Side Pane:

stack-foton

When you would like to add more than 10 images with this stack download this FOTON stack (up to 20 images!) or use the script below (chapter 3). But... maybe your visitors get bored or annoyed when you show lots of images

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

link1

link_res

The Slideshow Controls Buttons are only appear when you add 2 or more images. You can hide them in the Theme Variations > SlideShow Controls. So with only one image they are hidden by default.
With the Slide Controls buttons you can navigate through your images.
By default the Slide Show Speed is Slow. Click on the buttons Theme Variations > Slideshow Speed > Medium, Fast or Faster for another speed.
• Slow=8000ms
• Medium=6000ms
• Fast=5000ms
• Faster=3500ms
When you prefer another speed paste this in the Custom Javascript section (Page-Inspector > Header > Javascript):
HV_Foton_SlideShowSpeed=1500;
(this means 1500ms): example

- Change the Transition Speed in the Theme Variations > Slideshow Fade Transition Speed.
- Add a Zoom Effect to the first background image in the Theme Variations > Miscellaneous > Zoom Effect Background Image. Most browsers support this effect (Safari, FireFox, Chrome, IE10+). Read Chapter 12 for more zoom and rotate options.

Remove an image: click on 'Set Link' again, in the popup window select URL and put # in the input field.

Choose a background-color of the body depending of the color of your images (the slideshow or image fades in with this color):
bg-color

In the Theme Variations > Overlay > you can choose a semi-transparent overlay.

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

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

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

B. Paste this in the in the sidebar as plain text as plain text with your images in the Resources (RW5 +). Select the complete code and go to RapidWeaver > Format > Ignore Formatting (see image below).

ignore-format

That pinkish hue means that portion has been marked as “Ignore formatting”. OK, here’s the code:

<div id="cbp-bislideshow" class="cbp-bislideshow">
<li><img src="%resource(image1.jpg)%" alt="Name of your image1”/></li>
<li><img src="%resource(image2.jpg)%" alt="Name of your image2”/></li>
<li><img src="%resource(image3.jpg)%" alt="Name of your image3"/></li>
</div>

With RW4: replace the part

%resource(image1.jpg)%

with

assets/image1.jpg

(do not remove the quotation marks!).

Or with your images online (warehoused):

<div id="cbp-bislideshow" class="cbp-bislideshow">
<li><img src="http://www.domain.com/images/image1.jpg" alt="Name of your image1”/></li>
<li><img src="http://www.domain.com/images/image2.jpg" alt="Name of your image2”/></li>
<li><img src="http://www.domain.com/images/image3.jpg" alt="Name of your image3"/></li>
</div>


Try this example with 3 images:

<div id="cbp-bislideshow" class="cbp-bislideshow">
<li><img src="http://www.henkvrieselaar.com/tulips/tulip1.jpg" alt=“Purple Tulip”/></li>
<li><img src="http://www.henkvrieselaar.com/tulips/tulip2.jpg" alt=“Field with Tulips”/></li>
<li><img src="http://www.henkvrieselaar.com/tulips/tulip3.jpg" alt=“Red Tulip“/></li>
</div>


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

<div id="cbp-bislideshow" class="cbp-bislideshow">
<li><img src="http://www.domain.com/images/image1.jpg" alt="Name of your image1”/></li>
</div>


Add one or more lines

<li><img src="http://www.domain.com/images/image2.jpg" alt="Name of your image2”/></li>

when you would like to add more images.

It's not needed to add a name in the Alt tag, so you can leave it empty. But don't remove the quotation marks!
For example:

<li><img src="http://www.domain.com/images/image.jpg" alt="”/></li>



The Slideshow Controls Buttons are only appear when you add 2 or more images. You can hide them in the Theme Variations > SlideShow Controls. So with only one image they are hidden by default.
With the Slide Controls buttons you can navigate through your images.
By default the Slide Show Speed is Slow. Click on the buttons Theme Variations > Slideshow Speed > Medium, Fast or Faster for another speed.
- Change the Transition Speed in the Theme Variations > Slideshow Fade Transition Speed.
-Add a Zoom Effect to the first background image in the Theme Variations > Miscellaneous > Zoom Effect Background Image. Most browsers support this effect (Safari, FireFox, Chrome, IE10+). Read Chapter 12 for more zoom and rotate options.

Choose a background-color of the body depending of the color of your images (the slideshow or image fades in with this color):
bg-color

In the Theme Variations > Overlay > you can choose a semi-transparent overlay.

C. Instead if copy and paste the code above, you can also use the free FOTON snippets in the download file (not needed when you use the free FOTON stack).

snippets

First install these snippets, they are all in the download file:
The fotonexample.rwsnippet is an example with links to images on my server so you can start immediately. The fotonrw5andrw6.rwsnippet is for RapidWeaver 5/6.
Double-click on the snippet to install it just like a theme. Once installed you need to restart RapidWeaver for the changes to take effect.
Then from the View Menu you can access the Snippets Window. From there you can simply 'Drag and Drop' the code into the sidebar as described above in part B.

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

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

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

Not

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

but

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


5. 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 > Website will be the link.
Drag your Logo into the Site Setup > Logo area.
Now go to the Theme Styles > Logo section and enable an option to display the logo on a page.
When you open the content with the Toggle button, the logo will show up above the menu (left, right or center).
NEW: you can also replace the Title with your Logo. Enable one of the other buttons in the Theme Styles > Logo section.
NEW: you can also show the Title ánd your Logo. Enable one of the other buttons in the Theme Styles > Logo section:

logo3

With this option select a Title Position (Left or Right) in the Theme Styles too: Theme Styles > Position (menu • title…).
Another option is to put your logo in an ExtraContent area. In part C I explain how to do that in EC2.

LOGO SIZE
I personally do not like a huge logo in a website, but that's up to you.
When you use a larger logo you can make it fluid:

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

A. When your logo image is wider than the selected Container Width (Theme Styles > Container Width) and you would like to fit it in the container, paste this in the Custom CSS or in the custom.css file (in the css examples below I've selected a 900px Container Width):

#logo img,.logo img {height: auto;width:100%;}

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

#logo img,.logo img {height: auto;width:25%;}


When your logo is wider than the selected Container Width, you can also put it in the ExtraContent4 area (see Chapter 8).

B. When you have a large logo but it's smaller than the selected Container width, paste this in the Custom CSS or in the custom.css file:

@media screen and (max-width:767px){
#logo img,.logo img {height: auto;width:45%;}}

Or with a smaller logo for example:

@media screen and (max-width:767px){
#logo img,.logo img {height: auto;width:35%;}}

With a very small logo an extra css is not always needed, but try for example:

@media screen and (max-width:767px){
#logo img,.logo img {height: auto;width:15%;}}


When your logo is large, but you would like a smaller one on your website paste this in the Custom CSS:

#logo img,.logo img {height: auto;width:15%;}

45%, 35% and 15% are examples. Try another percentage and check it when you open the page in preview with a desktop browser and slowly make the browser thinner and wider.

C. When your logo is in the ExtraContent2 area (the small beam at the top) you have probably to decrease the size of your logo.
First drag your logo into an EC stack and select 2 in the settings of the stack.
Another option is to put your logo image between <div id="myExtraContent1"> and </div>
So for example:
<div id="myExtraContent1">
logo4black</div>

In preview you'll notice that your logo is too tall. Now paste this in the Custom CSS to adjust it:

#myExtraContent2 img {width: 65%; height: auto;}

65% is an example and up to you. This is an example of the logo in EC2.

Send me an email when you've questions about this.

Only JPG, PNG or GIF images are allowed!
You can also drag your logo in the Content or Sidebar, or in an ExtraContent area (for example EC1below the header). Now your logo has no link to the index.html, so you have to make a link manually.

7. Add your own Background Pattern to the body
Example. By default you can choose a background color in the Theme Styles > Colours.

Adding a pattern is possible too. In my demosite I' show some examples. How to add your own pattern:
Step 1: Download a pattern from the internet (see below).
Step 2: Add your pattern, for example pattern1.jpg, to the Resources (RapidWeaver 5) and add this to the Custom CSS (Page-Inspector > Header > CSS, not in the custom.css file):

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


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

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

It's very simple to add an icon before a Page Title. Paste this before the Page Title for a Home icon:

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

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 (see image below):

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="icon-home"></i> but <i class='icon-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='icon-home'>&nbsp;&nbsp;Home</i>

When you want to hide the icons on a page, paste this in the Custom CSS:

#header nav [class^="icon-"],#header nav .fa,
.mean-container .mean-nav [class^="icon-"],.mean-container .mean-nav .fa
{display:none;}


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

This theme has only three EC areas: ExtraContent, ExtraContent2 and ExtraContent3. The EC1 area is below the Title and Toggle icon. I would use EC1 for social media icons (with the built-in Font-Awesome icons or your own icons), a few words or text lines to explain that you can open the content by clicking on the Toggle icon, a snippet (for example Date/Time, a Mail-A-Friend or whatever). Or a image or image slider stack.
EC2 is in in the upper left or right corner of your window. Please use this only for a few words, or better: some social icons or a search box.
EC3 is below the Title and Slogan too, and you can set different widths to it. When you want to center a stack (for example a slideshow or image) in the ExtraContnet3, paste this in the Custom CSS:

#myExtraContent3 {text-align: center;}



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

<div id="myExtraContent1">This is the ExtraContent 1 container</div>
<div id="myExtraContent2”>ExtraContent 2</div>
<div id="myExtraContent3">This is the ExtraContent 3 container</div>


There are some EC snippets in the download file with a Plain Text, a 2-Column and a 3-Columns lay-out. With this responsive theme I'd prefer some responsive columns stacks. There are some great fluid columns stacks available: www.stackscenter.com
FONT-SIZE: select a font-size of the ExtraContent1, 2 or 3 area in the Theme Styles. Or paste this in the Custom CSS (20px is an example) (or in the 'custom css' file in the Contents of the theme, see Chapter 1a):

#myExtraContent1 {font-size: 20px;}


Examples:
1. You can add a slideshow in the EC1. Example.
2. Or this one. Example.
Add a box shadow in the Theme Variations > Miscellaneous > Add Box shadow to EC1 image.
You can add those images or slideshow to EC3 too and select a width.

10. Toggle Icon or Text to open or close the content
a. Replace the toggle arrow-down icon with a text:
By default the toggle icon is a down arrow. It's very simple to replace it with a word or text line.
IMPORTANT: Select in the Theme Styles > Toggle Open Icon or Text > Text "Open content" (open) and ... (see image below)

text

Now paste this in the Custom CSS (don't forget the dot before hv-toggle):

.hv-toggle a.toggle-trigger:before {
content: "
Your Open Text";}

.hv-toggle a.active.toggle-trigger:before {
content: "
Your CloseText";}

Replace the red text with your own word(s). Don’t remove the quotation marks!
By default the font-size is 24px. You can make it bigger or smaller. More distance from the horizontal menu line? Increase the line-height, for example 1.3 or 1.5 or whatever.
For example add another font-size and line-height:

.hv-toggle a.toggle-trigger:before {
content: "
Your Open Text";
font-size: 32px;
line-height: 1.4;}

.hv-toggle a.active.toggle-trigger:before {
content: "
Your CloseText";
font-size: 32px;
line-height: 1.4;}

The font is by default the Roboto Condensed font

b. Replace the toggle icon with another icon:
Search in the icons set of FontAwesome for nice icons: http://fortawesome.github.io/Font-Awesome/icons/
Click on an icon. For example the Heart icons. In the next screen you see the icon in different sizes and just below it a Unicode. In the image below you see two heart icons. The left one has Unicode f004 and the open heart icon has unicode f08a:

unicode2

IMPORTANT: Select in the Theme Styles > Toggle Open Icon or Text > Toggle On (open) and Toggle Off (close) Icon (see image below)

plus

In the css below you see the tags for the open and close icon.
Paste the Unicode between "\ and " (see example below)

.hv-toggle a.toggle-trigger:before { content: "\f004"; }
.hv-toggle a.active.toggle-trigger:before { content: "\f08a"; }

Now copy both lines and paste it in the Custom CSS. In preview you see your heart icon. Click on it and it's an open heart icon.

Other example with chevron circle down and up icons:

.hv-toggle a.toggle-trigger:before { content: "\f13a"; }
.hv-toggle a.active.toggle-trigger:before { content: "\f139"; }

And what about a hand-down icon and a hand-up icon:

.hv-toggle a.toggle-trigger:before { content: "\f0a7"; }
.hv-toggle a.active.toggle-trigger:before { content: "\f0a6"; }

It's really fun to try other icons, just try it :-)

c. Size of the Toggle Icon:
When you prefer a smaller size (example 28px), paste this in the Custom CSS:

.hv-toggle a.toggle-trigger:before {font-size: 28px !important;}

With a small size you can increase the space above and below the icon. Add this too:

.hv-toggle { line-height:1.8;}

(by default it's 1.5, any number is possible).
When you want a larger size of the icon (for example 46px), paste this in the Custom CSS:

.hv-toggle a.toggle-trigger:before {font-size: 46px !important;}

With a large size you can decrease the space above and below the icon. Add this too:

.hv-toggle {line-height:1.3;}

With a very large font there might be some problems on your mobile. So use for example this css with a large icon size:

.hv-toggle a.toggle-trigger:before {font-size: 76px !important;}

@media screen and (max-width:768px){
.hv-toggle a.toggle-trigger:before { font-size: 66px !important;}}

@media screen and (max-width:600px){
.hv-toggle a.toggle-trigger:before { font-size: 56px !important;}}

@media screen and (max-width:480px){
.hv-toggle a.toggle-trigger:before { font-size: 46px !important;}}

Please test this in Preview with RW6 or make your bowser-window smaller.

d. Replace the toggle close icon (x) with a word or text.
Paste this in the Custom CSS when you want to replace the close-icon with a word, for example 'Close':

.hv-toggle a.active.toggle-trigger:before {
font-family: FontAwesome;
content: "
Close";
line-height: 1.2;
font-size: 32px;}


e. Replace the toggle close icon (x) with another icon.
(read more in part b)
Paste this in the Custom CSS when you want to replace the close-icon with another FontAwesome icon, for example the Arrow Circle Up icon:

.hv-toggle a.active.toggle-trigger:before {
font-family: FontAwesome;
content: "\
f0aa";
line-height: 1.2;
font-size: 32px;}

f. Hide the toggle icons.
Paste this in the Custom CSS when you want to hide the open and close icons:

.hv-toggle a.toggle-trigger:before {content: "";}
.hv-toggle a.active.toggle-trigger:before {content: "";}


11. Font Awesome Icons
The build-in Font Awesome Icons 3.2 and 4 are really fast and easy to use it anywhere in your website!
Make sure you have got CSS Consolidation turned on in RapidWeaver preferences (very important).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.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.

This page shows all Font Awesome 3.2 icons.
This page shows all Font Awesome 4 icons.
No stack or plug-in required to use Font Awesome in this theme.
As you can see the icons have different names! For example with the 3.2 icons the name of the camera icon is:
<i class='icon-camera'></i>
And with the Font Awesome 4 icons the name of the camera icon is this:
<i class='fa fa-camera'></i>

• 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 </i> 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.

• CHANGE THE COLOR of a FONT AWESOME ICON
In the Theme Styles you can change the color of the icons in the content, sidebar and extra content.

• ADD SPACE BEFORE or BEHIND a FONT AWESOME ICON
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='icon-twitter'></i>&nbsp;&nbsp;

Or before the icon:
&nbsp;&nbsp;
<i class='icon-twitter'></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='icon-twitter'></i>&nbsp;&nbsp;<i class='icon-apple-logo'></i>

• SIZE of the FONT AWESOME ICONS
• By default the font-size of these icons is the same as the selected font-size of Content, ExtraContent, Menu, etc.
With this in the Custom CSS (Page-Inspector > Header > CSS), any font-size is possible, for example 32px:
In ExtraContent1:

#myExtraContent1 [class^="icon-"], #myExtraContent1 .fa {font-size: 32px;}

In ExtraContent2:

#myExtraContent2 [class^="icon-"], #myExtraContent2 .fa {font-size: 32px;}


In ExtraContent3:

#myExtraContent3 [class^="icon-"], #myExtraContent3 .fa {font-size: 32px;}


In the Content:

#content [class^="icon-"], #content .fa {font-size: 32px;}


In the Sidebar:

#sidebar [class^="icon-"], #sidebar .fa {font-size: 32px;}


You can choose different colors for an icon the content, sidebar or ExtraContent in the 'Theme Styles > Colours > FontAwesome Icon in…'
Read this about other options of the icon size.

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

Or with the FontAwesome 4 icons:

<a href= "http://www.facebook.com/jjohnson" TARGET="_blank"> <i class='fa fa-facebook-square'></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 an EXTRACONTENT AREA
When you put the icon in 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='icon-camera'></i></div>

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

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

… in the free ExtraContent stack and select EC1 in the settings of the stack.
Replace myExtraContent1 with another EC area (2, 3, 4 or 5) in the code above when you prefer it in another EC area.

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

• 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 when you have multiple icons. For example:

[class^="icon-"],.fa {letter-spacing: 8px;}

Instead of adding padding you can also 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='icon-twitter'></i>&nbsp;&nbsp;<i class='icon-apple-logo'></i>&nbsp;&nbsp;<i class="icon-star"></i>

• EACH ICON A DIFFERENT COLOR
When you would like to give each icon a different color paste this in the Custom CSS:

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


This only works with the Font Awesome Icons 3.6.1. #FF0000 is a HTML color code for red, #0000FF is green and #00FF00 is blue. More color codes here.

• 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 </div...> tag you always have to end with the </div> tag!

• ICON TO TITLE, MENU, FOOTER, BLOG-TITLE, FILESHARING-TITLE, etc.
You can add a FontAwesome icon to the menu, the footer, a blog title or whatever.
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="icon-home"></i> but <i class='icon-home'></i>.
Below some examples.

• TITLE: paste this in the Title area in the Page-Inspector a Camera icon (example):

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

title

• MENU: Read Chapter 6

• FOOTER: paste this in the Footer area in the Page-Inspector or Site-Setup for a Facebook icon:

<i class='icon-facebook-sign'></i>

Add a bit more space between icon and title with this behind the icon code with the character entity &nbsp; (once or a few times):

<i class='icon-home'></i>&nbsp;&nbsp;

When you prefer another color, paste this in the Custom CSS:

#footer [class^="icon-"], #footer .fa {
color: #FF0000 !important;}


#FF0000 is the HTML color for red. More about colorcodes.

When you would like to have another size, add a font-size too, for example:

#footer [class^="icon-"], #footer .fa {
color: #FF0000 !important;
font-size: 36px;}



• BLOG TITLE: paste this in the Custom CSS for a File icon (Unicode f0f6 or any other icon, read Chapter 9 how to change icons):

.blog-entry-title a:before { content: "\f0f6";}

or a circle:

.blog-entry-title a:before { content: "\f111";}

or a heart:

.blog-entry-title a:before { content: "\f004";}

or a bullhorn:

.blog-entry-title a:before { content: "\f0a1";}

Or any of the other 435 icons: http://fortawesome.github.io/Font-Awesome/icons/

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.


12. More CSS
You can add all css-codes below in the Custom CSS (or in the 'custom css' file in the Contents of the theme, see Chapter 2):

Font-Size Submenu
With a large menu font-size it could be nicer to make the submenu font smaller. To do that paste this in the Custom CSS:

#header nav ul ul li a {font-size: 14px;}

Uppercase or normal font to Submenu
When the main-menu has an uppercase font, it could be nice to give a normal font to the submenu:

#header nav ul ul li a {text-transform: none;}

Bold font to menu
To do that paste this in the Custom CSS:

#header nav ul li a {font-weight:bold;}

Line Height Content and Sidebar
Increase the line-height of Content and Sidebar with this in the Custom CSS:

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


1.8 is an example, by default it's 1.5
Line Height ExtraContent
Increase the line-height of an ExtraContent area (for example EC1) with this in the Custom CSS:

#myExtraContent1 {line-height: 1.8;}

1.8 is an example, by default it's 1.5
With this it will be smaller (example with EC3):

#myExtraContent3 {line-height: 1.2;}


Letter-Spacing
You can add some letter-spacing to the Title in the Theme Styles > Title Letter-Spacing.
You can add some letter-spacing (all numbers below are examples), for example to the Slogan:

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

Or to the footer:

#footer {letter-spacing: 1px;}

Or to the content: go to Theme Styles > Miscellaneous > Letter Spacing Body

Uppercase font to the Blog Title

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


Font-Size Blog Entry
Increase only the blog entry font-size (so not the font-size in the sidebar) with this in the Custom CSS:

.blog-entry {font-size: 18px;}

(18px is an example)

Text Shadow or Letterpress effect to the Title
You can add some text-shadow to the Title in the Theme Variations > Miscellaneous > Add Shadow to Title. When you want another shadow paste this in the Custom CSS:

#pageHeader h1{text-shadow: 3px 3px 3px #E4E4E4;}

or

#pageHeader h1{text-shadow: 3px 3px 3px #000000;}

or

#pageHeader h1{text-shadow: 3px 3px 9px #000000;}

#E4E4E4 is the HTML color for gray (great on a white background!). #000000 is black. More colorcodes. The numbers 3px are examples. Try some others, it's really fun :-)
Adding a letterpress effect (example), best with a darker background such as the brown_skin.png pattern in the download file:

#pageHeader h1{text-shadow: 1px 1px 2px #FFD2B4;}

(not supported by Internet Explorer)

Hide Text Shadow to the Toggle Content
In the Theme Styles > Miscellaneous > Add Shadow to Content Text you can add shadow to all text in your RW page. You can hide text-shadowin the Toggle Content (for example when the background is white) with this in the Custom CSS:

.hv-toggle-content {text-shadow: none;}

Add blur to the body text
With this you can add some blur to the body text:

body {text-shadow: 0px 0px 5px #cccccc;}

(not supported by Internet Explorer)

Bold font
You can add a bold font, for example to the Title:

#pageHeader h1 {font-weight:bold;}

or to the Slogan:

#pageHeader h2 {font-weight:bold;}

or to the footer:

#footer {font-weight:bold;}

Font-size of the Footer
By default the footer has the same font-size as the content (Page-Inspector > Content FontSize and Colours).
When you prefer another font-size to the footer:

#footer {font-size: 12px;}


Contact Form Background input fields
By default the background color of the input fields of the built-in Contact Form have the same color or pattern as the body.
When you would like to have a different background color paste this in the Custom CSS:

input[type="text"],.form-input-field,fieldset input[type="text"]
input[type="text"],input[type="submit"],input[type="reset"] {
background-color: #FF0000 !important;}

#FF0000 is the HTML color for red. More about colorcodes.
Underline links
By default the links are not underlined. When you want this select the button Theme Styles > Miscellaneous > Underline links. Font-Awesome icons in an ExtraContent area will be underlined too. Hide that with this in the Custom CSS (for example EC1);

#myExtraContent1 a:link {border-bottom-style: none;}

Background Colour SubMenu (with bgStretcher stack)
In the Page-Inspector > Menu FontSize and Colours you can choose a colour to the submenu background. When using the bgStretcher stack it could be nice to make the submenu background a bit transparent. To do this paste this in the Custom CSS:

#menu {background-color: rgba(0,0,0,0.7);}

Now it's black transparent. With a white transparent background:

#menu {background-color: rgba(255,255,255,0.8);}


0.7 and 0.8 are examples. More transparent: 0.4 or whatever. Less transparent: 0.9

Background Opacity content
In the Page-Inspector > Content and Menu background there’s an option for a Content Colour. You can choose any color. To add a bit opacity add this in the Custom CSS of the page or in the custom css file.

.hv-toggle-content
{filter:alpha(opacity=90);filter:alpha(opacity=90);-moz-opacity:.90;opacity:.90}

Example.

Fixed Menu
A fixed menu (so the menu is always visible when scrolling down) is only possible with the option Theme Variations > Menu Position > Right, Center or Left. Not with a position within the container. Always select a background-color to the menu (Theme Variations > Menu Background and FontStyle > Lowercase or Uppercase • Menu Background Color)

When there is no Toggle icon enabled and there's no slideshow or image in the ExtraContent4 area, paste this in the Custom CSS:

#header nav {position: fixed;}
@media screen and (min-width:768px){.slogan {padding-top: 80px;}}


When you have an image or slideshow in the ExtraContent4 paste this in the Custom CSS:

#header nav {position: fixed;}
#myExtraContent4 {margin-top: 0px;}

When you have enabled the Toggle Icon ánd there is an image or slideshow in the ExtraContent4, paste this in the Custom CSS:

#header nav {position: fixed;}
#myExtraContent4 {margin-top: 52px;}

When you have only enabled the Toggle Icon (so no image or slideshow in the ExtraContent4), paste this in the Custom CSS:

#header nav {position: fixed;}
#myExtraContent4 {margin-top: 65px;}

Overlay with your own image
In theTheme Variations > Overlay you can choose different semi-transparent overlays to cover your background color, pattern, image or slideshow. You can add your own image (preferable a tiled image) too.
How to do this?
1. Add your image to the Resources.
2. Add this to the Custom CSS section:

#overlay{width:100%;height:100%;position:fixed;top:0;z-index:0;left:0;
background:url(resources/your-image.jpg) repeat;
filter:alpha(opacity=15);filter:alpha(opacity=15);-moz-opacity:.15;opacity:.15;}


Replace your-image.jpg with the name of your own image. The opacity is up to you. On this page I've added an animated gif image. Do a search on the internet. It's all possible.

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

.cbp-bislideshow li{
-webkit-backface-visibility: hidden;
-webkit-animation: imageAnimation 36s linear;
-moz-animation: imageAnimation 36s linear;
-o-animation: imageAnimation 36s linear;
-ms-animation: imageAnimation 36s linear;
animation: imageAnimation 36s linear;}

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

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

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

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


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

Or this for only zoom:

.cbp-bislideshow li{
-webkit-backface-visibility: hidden;
-webkit-animation: imageAnimation 36s linear;
-moz-animation: imageAnimation 36s linear;
-o-animation: imageAnimation 36s linear;
-ms-animation: imageAnimation 36s linear;
animation: imageAnimation 36s linear;}

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

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

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

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

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

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 at the bottom of the menu strip (see Chapter 15).

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”.
Replace myExtraContent1 with myExtraContent 2, myExtraContent 3, myExtraContent 4 or myExtraContent 5 in the code above when you prefer it in another ExtraContent area.

D. When you would like to replace the word 'Search' with a FontAwesome icon (see image below), first replace the word Search with this &#xf002;

search_icon

So it will be this:

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


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

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


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

<script language="JavaScript">

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

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

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

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

</script>


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

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

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

15. Date (US and European) script
Example

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

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


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


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

This is the code when you prefer a European Date:

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

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


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

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

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

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

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

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


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

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

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

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

17. Using the Hide 'n' Show stack
1. With the Hide 'n' Show stack (not included in the theme) your visitor can show and hide the background image or slideshow when he/she clicks on a link in the ExtraContent2 area (or ExtraContent1). See this example.
How to do this (Effect and Speedare up to you):
In the settings of the HnS stack select these settings (image below). The ID: .cbp-bislideshow li

hns-image

Or add a delay to the images when opening a page: In the settings of the HnS stack select 'Show Delayed" and in the Link/Button Properties select "Use Links: No". Speed and Effect are up to you.

2. With the Hide 'n' Show stack (not included in the theme) your visitor can show and hide the slideshow controls panel at the bottom of the window when he/she clicks on a link in the ExtraContent2 (or 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: .cbp-bicontrols

hns-controls

Or add a delay to the slideshow controls panel when opening a page: In the settings of the HnS stack select 'Show Delayed" and in the Link/Button Properties select "Use Links: No". Speed and Effect are up to you.

In this example I've added this to the Content ID(s): .cbp-bicontrols,#pageHeader h1,#header nav ul,.hv-toggle
I've added this stack into the free ExtraContent stack, selected EC2. Now you can hide and show the Slide Controls Panel, the Title, the menu and the toggle button. Try it yourself.

3. With the Hide 'n' Show stack (not included in the theme) your visitor can add a delay to the opening of the content. 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 is .hv-toggle-content

hns3

4. With the Hide 'n' Show stack (not included in the theme) your visitor can add a delay to the closing of the content too.
How to do this (Effect and Speed are up to you):
Select in the Theme Variations > Miscellaneous > Content Panel Open by Default.
In the settings of the HnS stack select these settings (image below). The ID: .hv-toggle-content

hns4

As you can see content is open 5 seconds and closes with a speed of 2 seconds.

5. Now another trick: add three Hide 'n' Show stacks (not included in the theme) in a Stacks page. The settings of the first one is as described in 3. The settings of the second one as in 4. The opening starts with a delay, and after 5 seconds the content is closed. How to do this? Disable the checkbox Theme Variations > Miscellaneous > Content Panel Open by Default.
In Preview you see that the content slides open slowly, and after 5 seconds it closes again.
With the third one you can hide and show the content as described in 2. See this example.

There are many more options with this stack.

18. Tutorial importing a Contact Page

A. Import a Contact Page in another page.

Example
1. Add a Pluskit Page to your project.

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

3. Now there are two options:
a. Add a Stacks2 page to your project, drag a text-stack into it and paste this in the stack to import the Contact page: @import((Contact Me))
b. Instead of a Stacks2 page you can import a stack or contact form in any other page too (Blog, Styled Text, Filesharing, etc.).
Paste this line as plain text in the sidebar or content of the page where you want to import the Contact page: @import((Contact Me))

4. In the example I’ve added the the code @import((Contact Me)) in a text stack in a fluid 2-Columns stack.

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

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

19. Blog Title, Filesharing, or Headings (h1, h2, h3, etc) Font
Replace the default Blog Entry Title font with another font, for example with Bebas:

.blog-entry-title {font-family: 'BebasNeueRegular'; font-size: 36px;}

By default the font-size is 24px, I made it bigger: 36px, but that's up to you).
Now add this for smaller font-sizes on your iPad (landscape, portrait) and iPhone:

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

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

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

And test this in preview when you make your browser smaller.
Or Winterthur:

.blog-entry-title {font-family: 'WinterthurCondensedRegular'; font-size: 38px;}

Or Roboto Regular:

.blog-entry-title {font-family: 'roboto_condensedregular'; font-size: 38px;}

Replace .blog-entry-title with .filesharing-item-title a:link or h1 or h2 or h3 etcetera when you want another font to the Filesharing Title, or to the headings, for example:

.filesharing-item-title a:link {font-family: 'WinterthurCondensedRegular'; font-size: 32px;}


h1 {font-family: 'BebasNeueRegular'; font-size: 36px;}


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

archive

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

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


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




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