HV CEFALUS MANUAL

A. 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 (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 drop me an email.
When you have questions about or issues with stacks or plugins (so not theme-related questions) please post them on the RW forums or send their developers an email.

D. This theme works fine in all modern browsers and on your iPhone/Android and iPad/tablet.

E. 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. Automatic Updates with Waterfall
3. Logo
4. ExtraContent
5. Responsive Image (banner) or Slideshow in ExtraContent3 (between Title/Slogan and Content)
6. Add a Background image to the Title and Slogan area
7. Font Awesome Icons
8. Font Awesome icons before the Page Title
9. More CSS
10. Searchbox
11. TextTime script
12. Date (US and European) script
13. Mail a Friend script
14. Using the Hide 'n' Show stack
15. Replace the words Category, Archives, Feeds (so the sidebar content) links

About the Title, Slogan and Logo area
By default the Title, Slogan (or Logo if you/ve used one) are hidden when you scroll down a page.
In the Theme Styles > Miscellaneous section is an option ’Title, Slogan and Logo Slide Down and Up when Scrolling’:
slide2
When you enable this option the Title, Slogan (or logo if you've used one) appear in a small strip just below the menu when you scroll down the page.

1. How to install a theme
Double-click on the theme file you received when you downloaded your purchase. The theme file will end with a “.rwtheme” extension. Once you double-click the theme file RapidWeaver will launch, if it wasn’t running already, and install the theme for you.
After installation you’ll want to make sure you quit, and then restart RapidWeaver. This ensures that the app, and other plugins, all know you’ve installed a new theme and it will be visible to you in your theme drawer to choose for your project. In the theme drawer the theme show up with the name HV-CEFALUS.

2. Automatic Updates with Waterfall
Easy, Automatic Theme Updating with the plugin Waterfall for both RapidWeaver® 5 & 6 & 7.
The hassle of manually updating themes is a pain point every RapidWeaver user has run into as some point. Waterfall is your effortless theme management tool, specifically designed to help save you time and prevent the headaches all too often associated with theme updating.
With the Waterfall plugin you've always the latest version of a theme. I strongly recommend to use this plugin for updating themes!!

3. Logo
The Title and Logo have a link with the index.html page of your website. Whatever base url is inserted in RapidWeaver > Site Setup > Web Address (with RW5), or Rapidweaver > General > Web Address (with RW6/7) will be the link.
Drag your Logo into the Site Logo area.
By default the logo is hidden. Now go to the Theme Variations > Title • Slogan • LogoLogo section and enable the option to display the logo. It will show up above the Title.

Another option is to put your logo in for example the ExtraContent4 area, above the Content. Or put it in the ExtraContent 3 area (below the Content. Now your logo has no link to the index.html, so you have to make a link manually.

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

This theme has 4 EC areas:
• ExtraContent1: the EC1 area is at the top of the content. Use this area only for a responsive image or slideshow (with a slideshow stack in the free ExtraContent stack) or with the Weaverpix plugin (select EC1 in the plugin). Read more about this in the next Chapter (5).
NOTE: in some case you could use he EC1 for some text, see this example. But you need some extra CSS for this: I’ve added this in the Custom CSS for the font-size, text- and link-colour:

#myExtraContent1 a:link {color: #CCCCFF; font-size: 14px;line-height: 2;}

#CCCCFF and #FFFFFF are html-colors; Find all html-color codes and names here.
#myExtraContent1 a:hover{color: white; font-size: 14px;line-height: 2;}
ExtraContent2 is below the Content area. You can select a Font-Size, Font-Color and Background Color for this in the Theme Variations > ExtraContent2 Font-Size and ExtraContent Colours. By default the text is aligned left. When you like a centered text go to the Theme Variations > Miscellaneous > ExtraContent2 Text-Align Center.
ExtraContent3 is below the Footer. You can select a Font-Size and Font-Color for this in the Theme Variations > ExtraContent3 Font-Size and ExtraContent Colours. The text is always centered.
• ExtraContent4 is at the top of the Content area. You can select a Font-Size, Font-Color and Background Color for this in the Theme Variations > ExtraContent4 Font-Size and ExtraContent Colours. By default the text is aligned centered. When you prefer the text at the left side of tis area, go to the Theme Variations > Miscellaneous > ExtraContent4 Text-Align Left.

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

<div id="myExtraContent2">This is the ExtraContent 2 container</div>
<div id="myExtraContent3">This is the ExtraContent 3 container</div>
<div id="myExtraContent4">This is the ExtraContent 4 container</div>


There is an EC snippet in the download file with a Plain Text lay-out.

5. Responsive Image (banner) or Slideshow in ExtraContent1 (above the Content)
Read Chapter 6 when you like a background image to the Title and Slogan Background!
Any width or height is possible, but preferable the same width or wider than the selected Container Width in the Theme Styles.
I’ve added a RW6 example file in the download file with a leafs.jpg image.
More images:
https://www.pexels.com
https://unsplash.com

This chapter explains how to use the ExtraContent1 area for a responsive image or slideshow.

• ADD YOUR BANNER WITH A STACKS PAGE

extracontent1 background

Step 1. With a Stacks page: drag an ExtraContent stack (free download) into a stacks page and select ExtraContent1 in the settings of the stack, see red arrow in image below.
Step 2. Now drag your own image (any width or height is possible, but preferable the same width or wider as the selected Container Width) into this stack, see image below.

extracontent1

In preview your image shows up at the top of the Content area.

When you use the previous version of the Stacks plugin (v. 2.7.2) your image may be a bit blurred in preview. To avoid this double-click on the image in the image stack and in the next screen uncheck the checkboxes Constrain Width and Constrain Height. This is not needed with the latest Stacks (v. 3) plugin.

• ADD YOUR BANNER WITH A NOT-STACKS PAGE
With a not-stacks page (Contact, Blog, Styled Text, Sitemap, etc.) or Stacks page:

Step 1. First drag your image into the Resources.
Step 2. Copy the code below and paste it into a RW page as Plain text (RW > Edit > Paste as Plain Text) (in the content or in the sidebar):

<div id="myExtraContent1"><img src="%resource(image1.jpg)%" ></div>

Replace the name image1.jpg in the code above with the name of your own image in the Resources. Be sure that the image name is exactly the same as in the one in the Resources! Names are case-sensitive. Please don't use spaces in a name.
When you put your image in a folder (for example the folder images) in the Resources, paste this:

<div id="myExtraContent1"><img src="%resource(images/image1.jpg)%" ></div>

In preview your image shows up.

Images can be located in your Resources (see above) or on a server (e.g. http://www.domain.com/images/img1.jpg). So when you choose to add an image on your server replace resources/img1.jpg in the code above with http://www.domain.com/images/image1.jpg (don't remove the quotation marks!). So:

<div id="myExtraContent1"><img src="http://www.domain.com/images/image1.jpg" ></div>

Try this working example:

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

When you like a browser-wide responsive (fluid image, click on the checkbox in the Theme Variations > Miscellaneous > Make Image or Slideshow in ExtraContent1 Browser Wide:

ec2image



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

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

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

6. Add a background-image to the Title/Slogan

title-background

You can add your own image to the Title and Slogan Area. See this example.
How to do this?

STEP 1. Any width or height is possible, I’d prefer a wide image, for example at least 1500px wide or even wider. And a height of minimal 300px or even 340px with Title/Slogan and Logo enabled.
Drag your own image into the Resources of Rapidweaver. But a smaller image could be nice too. It’s all up to you. Only the upper part of the image shows up. The image is always horizontally centered, but not fluid with this option. You’ll find an image in the download file so you can try it immediately: watch.jpg

IMPORTANT: the images are by default not repeated horizontally. So at the left and right side the background-color of the Title Slogan area shows up. Give it a color in the Theme Variations > Background Color > Title and Slogan Background. When like to repeat the background-image horizontally, go to the Theme Variations > Miscellaneous > Repeat Background Image in Title Slogan area.

STEP 2. Paste this in the Custom CSS (the image name is your-image.jpg in this example):

#title {background-image: url(%resource(your-image.jpg)%);}

When you use the image in the download file the code will be this:

#title {background-image: url(%resource(watch.jpg)%);}

Be sure that the image name is exactly the same as in the one in the Resources! Names are case-sensitive. Please don't use spaces in a name.
When your images are in an images folder in the Resources (for example with the name ‘images’), paste this in the Custom CSS:

#title {background-image: url(%resource(images/your-image.jpg)%);}

When your image is warehoused (on a server) paste this in the Custom CSS:

#title {background-image: url(http://www.website.com/image.jpg);}


Try this working example:

#title {background-image: url(http://www.henkvrieselaar.com/Themes/elite/rw_common/themes/hv_elite/images/bulb.jpg);}

Your image shows up in preview.

STEP 4 (optional). In the Theme Styles > Miscellaneous section is an option ’Title, Slogan and Logo Slide In and Out when Scrolling’. When you enable this option the Title, Slogan (or logo if you've used one) appear in a small strip just below the menu when you scroll down the page.
When you would like to add the same image in this strip too, add the code above and this in the Custom CSS (don’t forget the dot before the code):

.title2 {background-image: url(%resource(your-image.jpg)%);}


When you use the image in the download file the code will be this:

.title2 {background-image: url(%resource(watch.jpg)%);}

Be sure that the image name is exactly the same as in the one in the Resources! Names are case-sensitive. Please don't use spaces in a name.
When your images are in an images folder in the Resources (for example with the name ‘images’), paste this in the Custom CSS:

.title2 {background-image: url(%resource(images/your-image.jpg)%);}

When your image is warehoused (on a server) paste this in the Custom CSS:

.title2 {background-image: url(http://www.website.com/image.jpg);}


You use also merge both codes separated with a comma, for example:

#title, .title2 {background-image: url(%resource(images/your-image.jpg)%);}


STEP 5 (optional). Go to the Theme Styles > Main Background Colors > Title and Slogan Background (see image below):

tsbg

and choose a background color (green arrows in image below):

tsbackground2

STEP 6 (optional). When you prefer a taller image in this area paste this in the Custom CSS:

#title {height: 300px;}

300px is an example. Any height is possible. Of course your image must be tall enough to fill this area.

FREE IMAGES: I’ve added some extra banner images, all 1600px wide but different heights. They are all free to use, without copyright (I’ve made them myself: http://www.henkvrieselaar.com/images/abc.zip
More images:
https://www.pexels.com
https://unsplash.com

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

Please visit the this website to view a list of all FontAwesome 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 and ExtraContent. You like them bigger? There are two options to increase the size of these icons:

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

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


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

.fa {font-size: 32px;}


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

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


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

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


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

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


Don’t remove the quotation marks!

H. When you put a FontAwesome icon in a not-Stacks page in an ExtraContent area, for example the EC1 area, paste this in the Sidebar or Content as plain text (RW > Edit > Paste as Plain Text):

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


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

Important: Be sure that when you start with a </div...> tag you always have to end with the </div> tag!

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

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. Maybe only the Home icon. But that's up to you. Read the previous Chapter 7 for more info about how to use these icons.

fai-home

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

<i class="fa fa-home"></i>


So for example the page title will be this:

<i class="fa fa-home"></i> Home


Note: the FontAwesome script is appearing in the browser title when the browser title is empty. To hide it put a title in the Page-Inspector > Browser Title:

browser-title

IMPORTANT: When you copy a Font Awesome code be sure to replace the quotation marks " with ' when you use the built-in SiteMap page in your project too.
So not

<i class="fa fa-home"></i>

but

<i class=‘fa fa-home’></i>


Need more space between the icon and the text? Paste this character entity between each code &nbsp; once or a few times. So for example:

<i class="fa fa-home"></i>&nbsp;&nbsp;Home


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

#cssmenu .fa,.mean-container .mean-nav .fa {display:none;}



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

Extra CSS when you use the bgStretcher stack
Put this in the Custom CSS so the Title/Slogan,Footer and EC3 background is transparent:

#footer-wrapper,#title {background-color: transparent;}

With the bgStretcher stack it could be nice to add a bit opacity to the content too (0.9 is an example):

#container {opacity: 0.9;}

Line-Height Content and Sidebar
Increase or decrease the line-height (default 1.5):

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


Font-Size Blog Entry
With this in the Custom CSS you’ll get a larger font-size of the blog-entry title:

.blog-entry-title {font-size: 30px;}

(30px is an example)
Center thumbnails and text in the built-in Photo Album Page
With this you can center the thumbnails 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;}


Background pattern to the Title and Slogan area
By default you can choose a color to the background in the Theme Styles > Main Background Colors > Title and Slogan Background.
Adding a pattern is possible too. How to add your own pattern:
Step 1: Download a pattern from the internet (see below).
Step 2: Add your pattern, for example pattern2.jpg, to the Resources and add this to the Custom CSS:

#title {background: url(%resource(pattern2.jpg)%) repeat fixed;}


10. Searchbox
Example
You can add a searchbox in the sidebar, content or in any ExtraContent area (EC2, EC3, EC4, preferably not in EC1), How to do this, for example in the EC4 (above the Content)?

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="myExtraContent4"> and </div> it shows up in the EC4 area above the Content. Choose the colors in the Theme Variations.
When you put this code between <div id="myExtraContent2"> and </div> it shows up in the EC2 area below the content.
When you put this code between <div id="myExtraContent3"> and </div> it shows up in the EC3 area below the footer.

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

So it will be this:

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


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

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

search_icon

So it will be this:

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


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

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

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

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


11. 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="myExtraContent2"> and </div> it shows up in the EC2 area below the content.
When you put this code between <div id="myExtraContent3"> and </div> it shows up in the EC3 area below the footer.
When you put this code between <div id="myExtraContent4"> and </div> it shows up in the EC2 area above the content.

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

12. 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="myExtraContent2"> and </div> it shows up in the EC2 area below the content.
When you put this code between <div id="myExtraContent3"> and </div> it shows up in the EC3 area below the footer.
When you put this code between <div id="myExtraContent4"> and </div> it shows up in the EC2 area above the content.

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

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


14. Using the Hide 'n' Show stack
A. With the Hide 'n' Show stack (not included in the theme) your visitor can show and hide a part of your webpage (for example the ExtraContent1 area). See this example.
How to do this (Effect and Speed are up to you):
In the settings of the HnS stack select these settings (image below). The ID in this example is: #container, #title, #footer

hns1

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

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

hns2

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

There are many more options with this stack.

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



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