HV-XXL2-r and HV-XXL2-r Flickr MANUAL

A. Go to your Rapidweaver (RW5) preferences, and ensure that the option Consolidate CSS files is enabled.

conscss

With RW6 this option is already enabled by default (please check this in the Advanced section). This makes exports of your project and uploading of your website faster and gives an improved Internet Explorer support too.

C. When you have questions about this theme feel free to post them on the RapidWeaver Forums (preferable), or contact me.
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 with all Rapidweaver versions and in all modern browsers and on your iPhone/Android and iPad/tablet.

E. BY DEFAULT THE SIDEBAR IS HIDDEN! Enable it in the Theme Styles > Sidebar Fontsize and Colours • Hide Sidebar.

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
2. Automatic updates with the Waterfall plugin
3. Logo
4. About the Background Images and SlideShow
   4A. How to add images with the HV Slider stacks?
   4B. How to add images in a not-Stacks page?
   4B. How to use the HV Slider Flickr stacks and snippets ?
5. ExtraContent
7. Add an image, slideshow or video to the ExtraContent 5 area
8. How to use the Font Awesome Icons
9. SearchBox
10. TextTime script
11. Date (US and European) script
12. Mail a Friend script
13. More CSS
14. Replace the words Category, Archives, Feeds (so the sidebar content) links
15. Using the Hide and Show stack

1. How to install a theme
Double-click on the theme file you received when you downloaded your purchase. The theme file will end with a “.rwtheme” extension. Once you double-click the theme file RapidWeaver will launch, if it wasn’t running already, and install the theme for you.
After installation you’ll want to make sure you quit, and then restart RapidWeaver. This ensures that the app, and other plugins, all know you’ve installed a new theme and it will be visible to you in your theme drawer to choose for your project.
2. Automatic Updates with Waterfall
Easy, Automatic Theme Updating with the plugin Waterfall for both RapidWeaver® 5 & 6.
The hassle of manually updating themes is a pain point every RapidWeaver user has run into as some point. Waterfall is your effortless theme management tool, specifically designed to help save you time and prevent the headaches all too often associated with theme updating.
With the Waterfall plugin you've always the latest version of a theme. I strongly recommend to use this plugin for updating themes!!
3. Logo
The Logo and the Title 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. You can enable the logo in the Site Setup. Just drag your logo, (transparent png-logo's are allowed too), into the Site Logo area and enable the radio button below it.

Position of the Logo:
Drag your logo to the Site Setup > Logo area and enable the radio button below it. By default the Logo is above the Title/Slogan, at the left side.
When your logo is big, you can make the it responsive too, but only when it's above the Title. With this in the Custom CSS:

#pageHeader img {max-width: 100%;height: auto;}

When your logo is very large try a lower percentage, for example 80%. Or whatever. Any % is possible, it depends of the size of your logo, try it yourself.

When you prefer your logo next to the Title and Slogan (see image above, bottom) go to Theme Styles > Miscellaneous and enable the button "Show Logo Right".
Sometimes it could be nice to hide the logo on some pages. In the Theme Styles > Miscellaneous you can select "Hide Logo".

You can also place an image in one of the ExtraContent areas, for example above the menu in the ExtraContent4 area. Drag an ExtraContent snippet into the sidebar and drag your image between <div id="myExtraContent4"> and </div>
Or drag your logo into an ExtraContent stack and select number 4 in the settings of the stack. Or EC1? It’s

There are 3 different ways for adding your images to the background.

4A. Use the free HV-Slider stacks set (explained in the next Chapter). You only need these stacks and your images of course. With these stacks you have the option in the Theme Styles for adding an image name and/or slideshow controls. I’ll explain it in Chapter 4A

4B. When you don’t use Stacks pages, you can also use the XXL2r snippets in the download file, explained in Chapter 4B.

4C. With the HV Slider Flickr stacks and the HV XXL2-r Flickr theme you can automatically get the Images from Flickr. Read Chapter 4C.

D. Current users of the previous XXL-r themes can still use the snippets for a background-image in the download file of the XXL-r Right and Left themes. With the XXL2-r theme I’d prefer the HV-Slider stacks or snippets in the download file. This will not be explained in this manual.

E. Use the bgStretcher stacks. With these stacks you’ll get a nice slideshow, but without the option of image names or slideshow controls. This option will not be explained in this manual.

ABOUT YOUR IMAGES
First something about your images:
1. To achieve fast loading pages and normal image transitions, it is best to optimize your images (for example with 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.
2. Another thing: do not overwhelm your visitors with hundreds of pages with photos. Personally I should use this theme within a project made with another theme, just to show your portfolio. When you like this theme for a certain page in your project go to RapidWeaver > Page Inspector and choose another theme in the popup menu.


4A. How to add images with the free HV-Slider stacks set?
Download these stacks here. They’re free! I would prefer this option for adding background images to your webpage: it’s simple and fast. You’ll need the Stacks plugin for this (not included in the download file). There's an example project in the download file with the Slider stacks. Here’s the User’s Guide of these Slider stacks.

There are 4 HV-Slider stacks in the download file:
a. HV Slider stack
b. HV Slider Image stack
c. HV Slider Warehoused stack
d. HV Slider Flickr stack: this stack can only be used with the HV-XXL2-r Flickr theme. Read Chapter 4C about this.

Summary:
1. Drag some images into the Resources of RW.
2. Drag one HV Slider stack (purple arrow in the image below) into a Stacks page and then within that stack (!) as many HV Slider Image stacks (blue arrows) as pictures you want to use, see image below:

img-stack
3. In the info panel of the HV Slider Image stack click on ‘Set Link’ (yellow arrow) and select an image from the Resources or an URL (when your images are on a server). See green arrow. Follow this step for the next images. In Preview your slideshow starts. In the input field behind ‘Title’ you can write the name of your image.
This name (the slide caption) will show up in the bottom right corner of the window. Please note that by default all Slideshow Controls ánd the SlideCaption are hidden! Enable an option the Theme Styles > Slide Controls (read part 4.).

In the info panel of the HV Slider stack you can change settings about the transition of your images (fade, slide, carousel, etc.), the speed and much more.
This is a detailed Users Guide.

In the download file is a HV Slider Warehoused Slideshow stack too. This Stack is automatically going to find all the image files in the resource folder and create the Slideshow including Image Captions / Descriptions.. Please note that PHP is required on your webserver to create the slideshow and the EXIF + IPTC features should be enabled. Read this tutorial about the HV Slider Warehoused Slideshow Stack.

4. By default the SlideShow Controls, SlideCaption and other buttons are hidden. They will show up at the bottom of your page when you choose one of the options and colors in the Theme Styles > Slide Controls > (purple arrow in image below):

slide-controls6

When you have enabled a Slide Caption, it would be nice to have the same Footer Font as the Slide Caption: go to Theme Styles > Miscellaneous > Footer Font: Yanone.

5. In the section ‘More Slide Controls’ (green rectangle in image above) you can make the Progress Bar thinner, Hide the Progress Bar* and/or Hide the semi-transparent Background of the Slideshow Controls and Footer, Show a Thumbnails Tray Button* (when you click on the Button Tray Up icon which shows up at the bottom of the browser window), a Dotted Overlay to the Thumbnails Tray* and/or a Border to the thumbnails in the tray*.
The options Show a Thumbnails Tray Button, Dotted Overlay to the Thumbnails Tray and Add Border to Thumbnails are not possible with Prev|Next Thumbnails selected in the Theme Styles > Slide Controls section.

Note: when you don’t like the progress bar or when you have only one background-image, hide the progress bar!

Choose a Font and Font-Size of Footer/SlideCaption in the Theme Styles > Footer and SlideCaption Font and Font-Size:

captionfont

Please check your page in Preview with with all screen-sizes (Full Width, iPad, iPhone).

!!! Important notes:
1.when you click in Preview mode on the Show Tumbnails Tray button at the bottom of your page you'll see an image with a question mark (see image below). Don't worry, this is only happening in Preview. After publishing your project you won't see this ?-button anymore.

question

2.when you click in Preview mode on the Pause/Play button at the bottom right side of your page you'll see an image with a question mark (see image below). Don't worry, this is only happening in Preview. After publishing your project you won't see this ?-button anymore.

thumbnails-tray

When you use a not-stacks page (Blog, Filesharing, etc.), you can import a Stacks page with the Slider stacks with Pluskit or with the Global Content stack in any other page. Or use the HV-XXL2-r snippets (you’ll find them in the XXL2-r download file) for these pages (read next Chapter).

Tip: Choose a background-color in the Theme Styles > Colors, so the slideshow starts with your favorite background color:

bbg

EXTRA 1: go to Theme Styles > Background-Image Effect to add an effect (fade, zoom, etc.). By default there’s no effect.
These options work with all browsers and IE10+, but don’t work with the bgStretcher stack.
EXTRA 2: when you like a blurred background image, go to Theme Styles > Miscellaneous > Blurred Background Image
This options work with all browsers and IE10+
EXTRA 3: When you check one of both options in the Theme Styles > Miscellaneous section (please don’t check them both at the same time), and you have the Show/Hide button enabled in the Theme Styles > Slide Controls, you’ll notice that when you click on the Show/Hide Button the Menu or Menu Button will disappear and the Content shows up:

hide-content

EXTRA 4: When you use the Elevator stack by Joe Workman, the slideshow controls will be covered bij the elevator button. To avoid this paste this in the Custom CSS:

#toTop{bottom: 50px !important;}

Now the elevator button shows up a bit higher. Or:

#toTop{left: 10px !important;}

Now the elevator button shows up at the left side. Or both:

#toTop{left: 10px !important; bottom: 50px !important}

Or center it :

#toTop{left: 50% !important; bottom: 60px !important}


When you use stacks you can skip the next section and go directly to Chapter 5.


How to add images in a not-Stacks page?
There are two options for this:
a: make a Stacks page with the HV Slider stacks as described in the previous chapter. Now import this stacks page into a not-stacks page with Pluskit or the Global Content Stack into any other page.
b: use the snippets in the XXL2r bg-image snippets folder in the download file (so these snippets are not needed when you use the free HV-Slider Stacks!).
There are three snippets in it: the XXL2-r example snippet, the XXL2-r Resources snippet and the the XXL2-r Flickr snippet (the last one doesn’t work with the HV-XXL2-r theme, only with the Flickr version).
First install these snippets, they are all in the download file.

The XXL2-r example snippet is an example with links to images on my server and you can use it with your own warehoused images too. Use the XXL2-r Resources snippet when your images are in the Resources of RW 5/6+.
Double-click on the snippet to install it just like a theme. Alternatively you can drag the snippet to the folder. 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 Custom Header (Page-Inspector > Header > Header):

snippets

Double-click on the snippet so you have a better view to all settings. Below you see the settings of the XXL2-r Resources snippet:

snippets

Instead of the snippets you can copy the script below too and paste it to the Custom Header when your images are on a server (warehoused):

<script type="text/javascript">
jQuery(function($){
$.supersized({
                
// Functionality
slideshow                   :       1,            // Slideshow on/off
autoplay                    :    1,            // Slideshow starts playing automatically
start_slide                 :       1,            // Start slide (0 is random)
stop_loop                    :    0,            // Pauses slideshow on last slide
random                    :     0,            // Randomize slide order (Ignores start slide)
slide_interval              :       4000,        // Length between transitions
transition                  :       1,             // 1-Fade, 2-Slide Top, 3-Slide Right, 4-Slide Bottom, 5-Slide Left, 6-Carousel Right, 7-Carousel Left
transition_speed            :    750,        // Speed of transition
pause_hover                 :       0,            // Pause slideshow on hover
keyboard_nav                   :       1,            // Keyboard navigation on/off
performance                :    1,            // 0-Normal, 1-Hybrid speed/quality, 2-Optimizes image quality, 3-Optimizes transition speed // (Only works for Firefox/IE, not Webkit)
image_protect                :    1,            // Disables image dragging and right click with Javascript
                                                              
// Size and Position                          
min_width                    :       0,            // Min width allowed (in pixels)
min_height                :       0,            // Min height allowed (in pixels)
vertical_center             :       1,            // Vertically center background
horizontal_center             :       1,            // Horizontally center background
fit_always                :    0,            // Image will never exceed browser width or height (Ignores min. dimensions)
fit_portrait                 :       1,            // Portrait images will not exceed browser height
fit_landscape                :       0,            // Landscape images will not exceed browser width
                                                              
// Components    (do not change this!)
slides                     :      [            // Slideshow Images

{image : 'http://www.henkvrieselaar.com/tulips/tulip3.jpg', title : 'Orange Tulips'},
{image : 'http://www.henkvrieselaar.com/tulips/tulip2.jpg', title : 'Field with Tulips'},
{image : 'http://www.henkvrieselaar.com/tulips/tulip1.jpg', title : 'Purple Tulips'}
                                                
]
                    
});
});
</script>


Or copy this XXL2-r Resources script when your images are in the Resources of RW:

<script type="text/javascript">
jQuery(function($){
$.supersized({
                
// Functionality
slideshow                       :       1,            // Slideshow on/off (1 = on; 0 = off)
autoplay                :    1,            // Slideshow starts playing automatically
start_slide                     :       1,            // Start slide (0 is random)
stop_loop                :    0,            // Pauses slideshow on last slide
random                :     0,            // Randomize slide order (Ignores start slide)
slide_interval                  :       3000,        // Length between transitions
transition                      :       1,             // 1-Fade, 2-Slide Top, 3-Slide Right, 4-Slide Bottom, 5-Slide Left, 6-Carousel Right, 7-Carousel Left
transition_speed        :    750,        // Speed of transition
pause_hover                 :       0,            // Pause slideshow on hover (1 = on; 0 = off)
progress_bar            :    1,            // Timer for each slide (1 = on; 0 = off)
keyboard_nav                :       1,            // Keyboard navigation on/off (1 = on; 0 = off)
image_protect            :    1,            // Disables image dragging and right click with Javascript (1 = on; 0 = off)
                                                
// Size and Position                          
min_width                        :       0,            // Min width allowed (in pixels)
min_height                    :       0,            // Min height allowed (in pixels)
vertical_center                 :       1,            // Vertically center background
horizontal_center           :       1,            // Horizontally center background
fit_always                :    0,            // Image will never exceed browser width or height (Ignores min. dimensions)
fit_portrait                     :       1,            // Portrait images will not exceed browser height (1 = on; 0 = off)
fit_landscape            :       0,            // Landscape images will not exceed browser width (1 = on; 0 = off)

// Components                            
slides                 :      [            // Slideshow Images

{image : '%resource(your_image1.jpg)%', title : 'Photo Text 1'},
{image : '%resource(your_image2.jpg)%', title : 'Photo Text 2'},
{image : '%resource(your_image3.jpg)%', title : 'Photo Text 3'}
                                                
]
                    
});
});
</script>

When you only want one background-image, this will be enough:

<script type="text/javascript">
jQuery(function($){
$.supersized({
                
                                                
// Size and Position                          
min_width                        :       0,            // Min width allowed (in pixels)
min_height                    :       0,            // Min height allowed (in pixels)
vertical_center                 :       1,            // Vertically center background
horizontal_center           :       1,            // Horizontally center background
fit_always                :    0,            // Image will never exceed browser width or height (Ignores min. dimensions)
fit_portrait                     :       1,            // Portrait images will not exceed browser height (1 = on; 0 = off)
fit_landscape            :       0,            // Landscape images will not exceed browser width (1 = on; 0 = off)

// Components                            
slides                 :      [            // Slideshow Images

{image : '%resource(your_image.jpg)%', title : 'Photo Text 3'}
                                                
]
                    
});
});
</script>


Looks difficult, but it isn’t :-) I’ll explain it below.

Adding your images with the snippets.

In the screenshot of the snippets above, you see only three text lines with images.
Add as many text lines as you like but be sure that there is NO COMMA AT THE END OF THE LAST TEXT LINE (see green arrow in the image below). So a comma behind each line is needed, except behind the last one (!!):

snippets-close

This is really very important! With a comma your images don't show up with all browsers!

There are different ways to add your images. You can store them somewhere on your server or drag them to the Resources (with RW5).
OK, here we go. Choose an option below (RW5 or online), where your images are.

With your images on a server (with RapidWeaver 5 and 6+).
This option is preferable, because uploading your website will be very fast. Not needed when you use the free HV-Slider stacks
First store your images on your server (warehoused). At the bottom of the script in the Custom Header you'll see this:

{image : 'http://www.website.com/your_image1.jpg', title : 'Photo Text 1'},
{image : 'http://www.website.com/your_image1.jpg', title : 'Photo Text 2'},
{image : 'http://www.website.com/your_image1.jpg', title : 'Photo Text 3'}


You may change the link http://www.website.com/your_image1.jpg (your image name without spaces!), and the text (Photo Text 1). By default the SlideShow Controls are hidden. They will show up at the bottom of your page when you choose one of the options and colors in the Theme Styles > Slide Controls:

When your images are in a folder, for example with the name 'images' (any name is possible, but without spaces!), replace
http://www.website.com/your_image1.jpg with http://www.website.com/images/your_image1.jpg

With your images in the Resources of RapidWeaver 5 and 6+:
Not needed when you use the free HV-Slider stacks
At the bottom of the script in the Custom Header you'll see this:

{image : '%resource(your_image1.jpg)%', title : 'Photo Text 1'},
{image : '%resource(your_image2.jpg)%', title : 'Photo Text 2'},
{image : '%resource(your_image3.jpg)%', title : 'Photo Text 3'}


Drag your images into the Resources of RW and replace the links to your images and the caption text (Photo Text1 here).
Don't change anything else to this script. As you can see every line ends with a comma, except the last one!
When your images are in a folder, for example with the name 'images' (any name is possible, but without spaces!),
replace %resource(your_image1.jpg)% with %resource(images/your_image1.jpg)%

Slide Controls
By default the SlideShow Controls, SlideCaption and other buttons are hidden. They will show up at the bottom of your page when you choose one of the options and colors in the Theme Styles > Slide Controls > (purple arrow in image below):

slide-controls6

In the section ‘More Slide Controls’ (green rectangle in image above) you can make the Progress Bar thinner, Hide the Progress Bar* and/or Hide the semi-transparent Background of the Slideshow Controls and Footer, Show a Thumbnails Tray Button* (when you click on the Button Tray Up icon which shows up at the bottom of the browser window), a Dotted Overlay to the Thumbnails Tray* and/or a Border to the thumbnails in the tray*.
The options Show a Thumbnails Tray Button, Dotted Overlay to the Thumbnails Tray and Add Border to Thumbnails are not possible with Prev|Next Thumbnails selected in the Theme Styles > Slide Controls section.

Choose a Font and Font-Size of Footer/SlideCaption in the Theme Styles > Footer and SlideCaption Font and Font-Size:

captionfont

Note: when you don’t like the progress bar or when you have only one background-image, hide the progress bar!

Please check your page in Preview with with all screen-sizes (Full Width, iPad, iPhone).

!!! Important notes:
1.when you click in Preview mode on the Show Tumbnails Tray button at the bottom of your page you'll see an image with a question mark (see image below). Don't worry, this is only happening in Preview. After publishing your project you won't see this ?-button anymore.

question

2.when you click in Preview mode on the Pause/Play button at the bottom right side of your page you'll see an image with a question mark (see image below). Don't worry, this is only happening in Preview. After publishing your project you won't see this ?-button anymore.

thumbnails-tray

Tip: Choose a background-color in the Theme Styles > Colors, so the slideshow starts with your favorite background color:

bbg

EXTRA 1: go to Theme Styles > Background-Image Effect to add an effect (fade, zoom, etc.). By default there’s no effect.
These options work with all browsers and IE10+, but don’t work with the bgStretcher stack.
EXTRA 2: when you like a blurred background image, go to Theme Styles > Miscellaneous > Blurred Background Image
This options work with all browsers and IE10+
EXTRA 3: When you check one of both options in the Theme Styles > Miscellaneous section (please don’t check them both at the same time), and you have the Show/Hide button enabled in the Theme Styles > Slide Controls, you’ll notice that when you click on the Show/Hide Button the Menu or Menu Button will disappear and the Content shows up:

hide-content

EXTRA 4: When you use the Elevator stack by Joe Workman, the slideshow controls will be covered bij the elevator button. To avoid this paste this in the Custom CSS:

#toTop{bottom: 50px !important;}

Now the elevator button shows up a bit higher. Or:

#toTop{left: 10px !important;}

Now the elevator button shows up at the left side. Or both:

#toTop{left: 10px !important; bottom: 50px !important}

Or center it :

#toTop{left: 50% !important; bottom: 60px !important}

Note: With some plugins (Formloom, Cartloom, etc.) the slideshow will not work.

Hide the name of your image(s)
When you’ve added a name to an image in the Slider stacks or in the XXL2-r snippets it appears at the right bottom corner of your page. When you don't want a name displayed in the navigation bar leave the magenta part in the code above empty, but do not remove the quotation marks!

SETTINGS

(Not needed when you use the free HV-Slider stacks, you can change the same settings within the stacks)
There are many options to customize your slideshow in this script. It looks difficult but it's really very simple! Just try it.
• Important. Be sure that you don't remove the comma behind each number! in the script!

Slideshow
Turns the slideshow on/off. Disables navigation and transitions.
Autoplay
Determines whether the slideshow begins playing automatically when the page is loaded (default is on), (1 = on, 0 = off).
Start Slide
The slide the slideshow starts on. 0 causes a random image to be loaded. By default it's 1.
Stop Loop
Pauses slideshow upon reaching the last slide, (1 = on, 0 = off).
Random
When on, slides are shown in a random order and the starting slide number will be disregarded (default is off), (1 = on, 0 = off).
Slide interval
Time between slide changes in milliseconds. The default is 3 seconds (3000ms).
Transition
Controls which effect is used to transition between slides. Options are as follows:
1 = Fade effect (Default)
2 = Slide in from top
3 = Slide in from right
4 = Slide in from bottom
5 = Slide in from left
6 = Carousel from right to left
7 = Carousel from left to right

Speed of transition
The time transitions take in milliseconds (default is 500 milliseconds).
Pause Hover
Pauses slideshow while current image image hovered on, (1 = on, 0 = off).
Progress Bar
(1 = on, 0 = off). Progress Bar that runs based on the slide interval.
Keyboard Navigation
Allows control via keyboard, (1 = on, 0 = off). Spacebar - Pause or play
Right arrow or Up Arrow - Next slide
Left arrow or Down Arrow - Previous slide
Image protection
Disables right clicking and image dragging using Javascript (default is off), (1=on, 0=off).
(When you've selected the option to show the previous and next thumbnail these images can be dragged to the desktop, so they are not protected).
Minimum width allowed, Minimum height allowed
Minimum dimensions the image is allowed to be. If either is met, the image won't size down further (default is
0). When all your images are for example 1024 x 768 px you could replace the numbers 0 with 1024 (width) and 768 (height). But I should keep both on 0.
Center the background vertically
Centers image vertically. When turned off, the images resize/display from the top of the page (default is on), (1 = on, 0 = off).
Center the background horizontally
Centers image horizontally. When turned off, the images resize/display from the left of the page (default is on), (1 = on, 0 = off).
Fit always
Prevents the image from ever being cropped. Ignores minimum width and height.
Fit portrait
Prevents the image from being cropped by locking it at 100% height, (1 = on, 0 = off).This will usually cause
vertical images to not cover the window entirely. With 1 (by default) your image shows up in portrait format.
Fit landscape
Prevents the image from being cropped by locking it at 100% width (default is off), (1 = on, 0 = off).This will usually cause horizontal images to not cover the window entirely.

Just change some options in the script in the Custom Header or in the Slider stacks to see what happens.

RESPONSIVE SLIDESHOW
The responsive XXL2-r theme resizes images to fill the browser while maintaining image dimension ratio. When you're using the free HV-Slider stacks (or the snippets in the download file) for adding your background-images, and make your browser smaller a part of the image will be 'cut' off on your mobile device.
When you don't like this and prefer a fluid background-image select these options in the free HV-Slider stacks (or in the snippets):
With these settings in the HV-Slider Stack your background slideshow will be more or less "responsive":

respons_setting

When you don’t use Flickr, you can skip the next section and go directly to Chapter 5.


4C. How to use the HV Slider Flickr stack or the HV XXL2 Flickr snippet?
Example 1Example 2
Read this page about the usage of the HV Slider Flickr stacks.There is a Flickr version of the theme in the download file: HV-XXL2-r Flickr, and a HV-XXL2-r Flickr snippet. This snippet is not needed when you use the free HV-Slider Flickr stacks! Read this page about the usage of the HV Slider Flickr stacks.

The XXL2-r and XXL2-r Flickr theme have the same look and almost the same Theme Styles, but the Flickr version has no Progress Bar and the Play/Pause button is not available and there are less options in the Theme Styles > Slide Controls. See image below:

flickr-slide

Choose a Font and Font-Size of Footer/SlideCaption in the Theme Styles > Footer and SlideCaption Font and Font-Size:

captionfont

The HV Slider stack or snippets doen’t work with this theme. So with the Flickr version you can only use the HV-Slider Flickr stack (preferable) or the HV-XXL2-r Flickr snippet in the download file of the theme.

Prior to amending the snippet to pull in Flickr images you will need:
1. A Flickr API key, which provides the authentication to link to images on Flickr. Apply for an API here.
Here’s a video how to get a Flickr API key.
A non commercial key will be issued immediately, you will receive the API Key (which you need) and another Secret code (which you don't need).
2. The ID number of the Set, User or Group of the source images on Flickr:
Set the ID number of the desired set is simply located in the appropriate URL. Click on the set (or album) and locate the number in the url address bar, see example below:

flickr1

User - to get the ID of a user requires you to use the ID getter tool: enter the address of the User's photo stream into the tool, and click on ‘Find’:

idgettr22

Group - To pull images from a group again use the ID getter tool: enter the address of the desired Group into the tool, and again click on ‘Find’.

When you use the HV-XXL2-r Flickr snippet (for example with not-stacks pages) instead of the stack: now that you have your API key and your Set, User or Group ID you are ready to start editing the snippet by copying and pasting the ID's and API key into the appropriate part of the snippet, replacing ########## in the Flickr snippet. Do not remove comma's or any other characters!!

source - Defines the type of source the them is pulling from. 1 - Set, 2 - User, 3 - Group.
You only need to provide the ID for the Source that is selected, so if you have the Source value as 1 you only need to provide a Set ID, the IDs for User and Group can be ignored.
total_slides - How many images to pull (Between 1-500)
image_size - Read this page.

When you like this theme for a certain page in your project go to RapidWeaver > Page Inspector and choose another theme in the popup menu.
5. 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 6EC areas*:
• ExtraContent1: this area is above the Title and Slogan. You can use this area for text, a stack, a snippet, social media icons or whatever.
• ExtraContent2: this area is at the above the footer. You can use this area for text, a stack, a snippet, social media icons or whatever.
• ExtraContent3: is at below the Footer and you can use this for text, a stack, a snippet, social media icons or whatever.
• ExtraContent4: is above the menu. You can use this for for text, images, a searchbox (see chapter 15), for a stack, a snippet, social media icons or whatever.
• ExtraContent5: this area is located below the Title and Slogan and can only be used an image, a slideshow or a video (for example with the Freestyle stack) with the same width as the container. This area is responsive.
• ExtraContent6: this area is located at the bottom right part of the browser window. Great for social icons, a search box or for a button. Or your footer text. When you put some text in the EC6 I’d suggest to add background color. The reason is that on your mobile the EC6 is on the text in the content and may therefore be less legible.
When you use a Stacks page with a text-stack in an ExtraContent stack, add a color and a bit padding to the background in the info panel of the stack.
When you don’t use a Stacks page, paste this in the Custom CSS:

#myExtraContent6 {
background-color: #000000;
padding-left: 5px;
border: 1px solid #ff0000;}

#000000 and #ff0000 are the HTML colors for black and red. Other HTML colors.
Example 1 - Example 2
On this page I’ve hidden the horizontal controls bar, and put the Footer in the ExtraContent6. With this in the Custom CSS the ExtraContent is closer to the bottom:

#myExtraContent6 {bottom: 15px !important;}


SHOW ALL EXTRACONTENT CONTAINERS (or have a look here):
When you would see all EC containers of this theme paste this in the Sidebar or Content as plain text (and now select the complete code and go to RapidWeaver > Format > Ignore Formatting. That pinkish hue means that portion has been marked as “Ignore formatting”):

<div id="myExtraContent1">This is the ExtraContent 1 container. Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc.</div>
<div id="myExtraContent2">This is the ExtraContent 2 container. Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc.</div>
<div id="myExtraContent3">This is the ExtraContent 3 container. Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc.</div>
<div id="myExtraContent4">This is the ExtraContent 4 container. Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc.</div>
<div id="myExtraContent6">This is the ExtraContent 6 container</div>

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

<div id="myExtraContent1">This is the ExtraContent 1 container</div>

Replace 1 with 2, 3, 4, 5 or 6 in the code above.
There is an EC snippet in the download file too with a Plain Text lay-out.
You can choose three different font-sizes in the Theme Styles > ExtraContent Font-Size (12px, 13px, 14px) and 15px. When you prefer another font-size (any number is possible), for example to the ExtraContent5 area, paste this in the Custom CSS:

#myExtraContent6 {font-size: 10px;}

Or center the ExtraContent:

#myExtraContent2 {text-align: center;}

Or a bold and large font in the ExtraContent:

#myExtraContent3 {
text-align: font-size: 16px;
font-weight: bold;}


7. Add a fluid image, slideshow or video to the ExtraContent5 area
Note: to achieve fast loading pages save your images for the web (in Photoshop > File > Save for Web & Devices). This means that the image file will be as small as possible. So add only 72dpi images.
Your image or video will be responsive (fluid), so any size is possible.
There are 3 ways to do this.

TUTORIAL 1
a. Paste this in the sidebar or in the Content as plain text:
<div id="myExtraContent57"></div>

With this code you've enabled the EC5 area. Select the complete code and go to RapidWeaver > Format > Ignore Formatting. That pinkish hue means that portion has been marked as “Ignore formatting”.

b. Drag your image, for example your_image.jpg, into the Resources with RapidWeaver 5 or 6+.

c. Paste this in the Custom CSS (Page-Inspector > Header > CSS) with RapidWeaver 5/6+:

#myExtraContent5 {background: url(resources/your_image.jpg) no-repeat;}


The name of your image in the Assets and in the Custom CSS must be exactly the same.

TUTORIAL 2
a. Paste this in the sidebar or in the Content as plain text:
<div id="myExtraContent5"></div>

b. Drag your image between <div id="myExtraContent5"> and </div>

TUTORIAL 3
a. Drag your image into an ExtraContent Stack, select number 5 in the side panel (settings) of the stack.

How to add a slideshow?
You can do this with a stack (there are some responsive slide show stacks) or with the Weaverpix plugin (select EC5 in the settings of this plugin).
When using a responsive slideshow stack you'll need the Stacks plugin. Drag the stack into the free ExtraContent stack and select nr 5.
Add your images to the plugin as described in the Manual of the plugin or stack.
With the plugin Pluskit or with the Global Content stack you can import those slideshows into other pages.
You can even add video stack to the EC5 area. Just drag a video stack into to the ExtraContent stack with EC5 selected.
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 ExtraContent or footer, before a blog or filesharing title or wherever.

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

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

.fa {color:#ff0000 !important;}

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

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

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


Or before the icon:

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


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

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


F. By default the font-size of these icons is the same as the selected font-size of Content, 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. When you put a FontAwesome icon in an ExtraContent area, for example the EC1 area, paste this in the Sidebar or Content as plain text (RW > Edit > Paste as Plain Text):

<div id ="myExtraContent1"><i class="fa fa-facebook-official"></i></div>


In Preview your icon shows up in the ExtraContent1 area, above the Menu. Be sure always to end with the </div> tag!!!
Another option is to paste the icon code in the free ExtraContent stack and select EC1 in the settings of the stack.
Replace myExtraContent1 with another EC area (2 or 3) in the code above when you prefer it in another EC area.

I. 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. SearchBox
You can add a searchbox in the sidebar, content or in any ExtraContent area, but I would prefer EC4 or EC5. How to do this, for example in the EC4 (above the Menu)?

A. Add a RapidSearch Page to your project. Read the Rapidsearch Users Guide:

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

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


C. When you put this code between <div id="myExtraContent1"> and </div> it shows up in the EC1 area above the Title. Replace myExtraContent1 with myExtraContent2, myExtraContent 3, myExtraContent4 or myExtraContent 6 (not in ExtraContent5 please) in the code above when you prefer it in another EC area.

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

For a cleaner look check this box in the Theme Styles > Miscellaneous section:

searchbox

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

search_icon

So it will be this:

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


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

Select a color in the Theme Styles > Colours > SearchBox …

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

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


10. TextTime in the ExtraContent area
Paste the code below as plain text in the Sidebar. You can replace the names of the months and the days in your own language. Do not remove the quotation marks! This example is in the EC4 area.

<div id="myExtraContent4"><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)


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></div>

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

Replace myExtraContent4 with myExtraContent1, myExtraContent2, myExtraContent3 (not in ExtraContent5 please) or myExtraContent6 in the code above when you prefer it in another EC area.
11. Date (US and European) in the ExtraContent area
Paste the code below as plain text in the Sidebar when you prefer a US Date:

<div id="myExtraContent4">
<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>
</div>


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

Replace myExtraContent4 with myExtraContent 1, myExtraContent 2, myExtraContent 3 or myExtraContent 6 in the code above when you prefer it in another EC area.

This is the code when you prefer a European Date:

<div id="myExtraContent4">
<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>
</div>


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

Replace myExtraContent4 with myExtraContent1, myExtraContent2, myExtraContent3 (not in ExtraContent5 please) or myExtraContent6 in the code above when you prefer it in another EC area.
12. Mail-A-Friend in the ExtraContent area
Paste the code below as plain text into the Sidebar (the code explains which parts can be changed):

<div id="myExtraContent4">

<!-- 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></div>


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

Replace myExtraContent4 with myExtraContent1, myExtraContent2, myExtraContent3 (not in ExtraContent5 please) or myExtraContent6 in the code above when you prefer it in another EC area.
13. More CSS
A. By default the links in the Content are not underlined. You can select any color in the
Theme Styles > Colours. When you prefer underlined text decoration paste this in the Custom CSS (Page-Inspector > Header > CSS):

a:link {text-decoration: underline;}

B. By default the thumbnails in the Photo Album page are aligned left. In the Theme Styles > Miscellaneous > Center Content you can center all content (so ExtraContent1, 2 and 3 too) in the vertical strip. To center only the PhotoAlbum thumbnails paste this in the Custom CSS:

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

When you want to hide the Footer, paste this in the Custom CSS:

#footer {display: none;}


In the Theme Styles > Vertical Content and Horizontal Mobile Menu Borders you can hide the vertical content borders, but not the horizontal mobile borders. When you want to hide the too paste this in the Custom CSS:

#sidebarContainer,#navcontainer,#menu-icon,#sb-icon {border-bottom: none;}


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

blog

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

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


Only replace the words, don't remove the quotation marks!
Select a color of these words in the Theme Variations > Colours > Blog Categories/Archives/Feeds/Tag text.
15. Using the Hide 'n' Show stack
With the Hide 'n' Show stack (not included in the theme) you can add a delay to the opening of the content. See this example.
How to do this? (Effect and Speed are up to you, Speed and Show delay are in milliseconds):
In the settings of the HnS stack select for example these settings:

hns-stack

On this page I’ve used the Fancy Intro stack for a nice animated intro of a few seconds, and the Hide ’n’ Show stack with the settings above with a Show delay speed of 7500ms.

Or try this for a nice sliding effect of the menu: (paste #navcontainer in the input field behind Content ID(s):

hns-stack2

Or try this for a nice slide effect of the Title and Slogan: (paste #pageHeader in the input field behind Content ID(s):

hns-stack3

Or try this for a nice fade-in effect of the Content and Footer: (paste #content, #footer in the input field behind Content ID(s):

hns6

Example.

Or try this for a nice toggle effect of the Tray Button at the bottom of your page: (paste #tray-button in the input field behind Content ID(s):

hns-thumb

Of course you have to check the checkbox "Show Thumbnail Button" in the Theme Styles > Miscellaneous first.

Example.



-------------------------------------------------------------------------------------------
The HV-XXLr themes may not be resold or redistributed without the express written permission of Henk Vrieselaar.
March 2016