HV FOTON2 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. With this theme the sidebar always shows up above the content.

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 in all modern browsers (IE9+, Safari, Firefox, Opera, Camino, etc.) and on your iPhone/Android and iPad/tablet.

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

WHAT'S IN THE MANUAL
1. How to install a theme
2. 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. Logo
6. Font Awesome icons before the Page Title
7. Replace Toggle Icon with a Text or with another Icon
8. Font Awesome Icons
9. More CSS
     Font-Size SubMenu
     Line-Height Content
     Letter-Spacing
     Font-size of the Footer
     Font-Size Blog Entry
     Center the Thumbnails in a PhotoAlbum page
     Underline links
     Background Colour SubMenu with bgStretcher stack
     Fixed Menu
     Overlay with your own images
     More zoom and rotate options
10. Searchbox
11. Using the Hide 'n' Show stack
12. Replace the words Category, Archives, Feeds (so the sidebar content) links


1. How to install a theme
To install the HV-Foton2 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.

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

Please don’t use punctuations in the name of your images. So for example not my dog (1).jpg but my-dog1.jpg. 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

C. The Slideshow Controls Buttons are only appear when you add 2 or more images. You can hide them in the Theme Variations > Miscellaneous > Hide 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),

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

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

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

bg

In the Theme Variations > Miscellaneous > 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 or content 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>

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



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

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

bg

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

E. 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. 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.
Go to Theme Styles > Miscellaneous > Hide Logo when you would like to hide the logo on a page.

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

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

#pageHeader 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){
#pageHeader img {height: auto;width:45%;}}

Or with a smaller logo for example:

@media screen and (max-width:767px){
#pageHeader 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){
#pageHeader 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:

#pageHeader 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.

Only JPG, PNG or GIF images are allowed!
You can also drag your logo in the Content or Sidebar. Now your logo has no link to the index.html, so you have to make a link manually.

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



7. Replace the toggle icon with a text or with another icon
a. Replace the toggle icon with a text:
By default the toggle icon is an eye icon. It's very simple to replace it with a word or text line. Example.
Paste this in the Custom CSS (don't forget the dot before hv-toggle):

@media screen and (min-width:1024px){
.hv-toggle a.toggle-trigger:before {
content: "
Your Show Content Text";
font-size: 20px;
line-height: 1.8;
font-family:Tahoma,Geneva,sans-serif;}

.hv-toggle a.active.toggle-trigger:before {
content: "
Your Hide Content Text";
font-size: 20px;
line-height: 1.8;
font-family:Tahoma,Geneva,sans-serif;}}


With this css the text will be replaced by the eye icons below 1024px (iPad, smartphone), because it could cover the menu icon now.
Replace the red text with your own word(s). Don’t remove the quotation marks!
By default the font-size is 20px. You can make it bigger or smaller. More distance from the horizontal menu line? Increase the line-height, for example 1.9 or 2.2 or whatever.

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

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"; line-height: 1.4;}
.hv-toggle a.active.toggle-trigger:before { content: "\f08a"; line-height: 1.4;}

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"; line-height: 1.4; }
.hv-toggle a.active.toggle-trigger:before { content: "\f139"; line-height: 1.4; }

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

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

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

8. Font Awesome Icons
The build-in Font Awesome Icons 4 are really fast and easy to use it anywhere in your website!
Make sure you have got CSS Consolidation turned on in RapidWeaver preferences. If you see squares instead of icons, this is a sure-sign that you've not turned on consolidation, and therefore the links to the icons are broken.

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

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

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


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

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

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

.fa {color:#ff0000 !important;}

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

E. Add a bit space behind an icon with this character entity after each code &nbsp; , once or a few times. So for example:

<i class="fa fa-facebook-official"></i>&nbsp;&nbsp;


Or before the icon:

&nbsp;&nbsp;&nbsp;<i class="fa fa-facebook-official"></i>


Add a bit space between two icons with this character entity between each code &nbsp; , once or a few times. So for example:

<i class="fa fa-facebook-official"></i>&nbsp;&nbsp;<i class="fa fa-twitter-square"></i>


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

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

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


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

.fa {font-size: 32px;}


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

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


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

<a href="http://www.facebook.com/jjohnson" TARGET="_blank"><i class="fa fa-camera-retro fa-lg"></i></a


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

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


Don’t remove the quotation marks!

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

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


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

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


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

Font-Size Footer
By default the footer has the same font-size as the content. When you prefer another size, paste this in the Custom CSS (12px is an example):

#footer {font-size: 12px;}

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
Letter-Spacing
You can add some letter-spacing (all numbers below are examples), for example to the Title:

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

Or to the slogan:

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

Or to the footer:

#footer {letter-spacing: 1px;}

Font-weight Title and Slogan

#pageHeader h1 {font-weight:bold;}

or to the Slogan:

#pageHeader h2 {font-weight:bold;}

Letter-Spacing
You can add some letter-spacing (all numbers below are examples), for example to the Title:

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

Center thumbnails and text in the built-in Photo Album Page
With this you can center the thumbnails warp in a built-in Photo Album Page. It looks best when you hide the Sidebar:

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

Box-Shadow to the Content
You can add box-shadow to the content (container) of your page with for example this css:

#container{
-webkit-box-shadow:1px 2px 7px rgba(0,0,0,0.25);
-moz-box-shadow:1px 2px 7px rgba(0,0,0,0.25);
box-shadow:1px 2px 7px rgba(0,0,0,0.25);}

Box-shadows look great with white transparant backgrounds like here and here.
About the settings:
The horizontal offset of the shadow (here 1px), positive means the shadow will be on the right of the box, a negative offset will put the shadow on the left of the box.
The vertical offset of the shadow (here 2px), a negative one means the box-shadow will be above the box, a positive one means the shadow will be below the box.
The blur radius (here 7px), if set to 0 the shadow will be sharp, the higher the number, the more blurred it will be.
The color is black in this example. The intensity of the black is 0,25 in this example. More black with for example 0,80 or whatever.
This is another example (example):

#container{
-webkit-box-shadow:0px 40px 80px rgba(0,0,0,0.35);
-moz-box-shadow:0px 40px 80px rgba(0,0,0,0.35);
box-shadow:0px 40px 80px rgba(0,0,0,0.35);}

This does not work with Internet Explorer 8.
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.
10. Searchbox
You can add a searchbox in the sidebar, content or footer.

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>


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

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

search_icon

So it will be this:

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


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

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



11. 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 Content of your page.
How to do this (Effect and Speedare up to you):
In the settings of the HnS stack select these settings (image below). The Content ID: .cbp-bislideshow li

hns1a

The text ‘Show and Hide Background Images’ can be changed.
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 top of the window when he/she clicks on a link in 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. The Content ID is now: .cbp-bicontrols

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

hns2a

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

bloggcat

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 FOTON2 may not be resold or redistributed without the express written permission of Henk Vrieselaar: