HV BANX MANUAL

A. Go to your Rapidweaver preferences, and ensure that the option Consolidate CSS files is enabled. With RW7 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.

B. IMPORTANT: BANX takes advantage of the new Banner Image option in RW7. But you can use the theme with RW6 too, but for a banner (image, slide show, video) you have to use ExtraContent4 (read Chapter 6).

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. This theme is responsive Users no longer just browse the web with desktop computers.
responsive-banx
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.    Banner Image Option with Rapidweaver 7
6.    Responsive Banner, Slideshow or Video in ExtraContent4 (instead of the RW7 banner)
7.    Font Awesome Icons
8.    More CSS
8b.    CSS for Fixed Menu
9.    Searchbox
10.  TextTime script
11.  Date (US and European) script
12.  Mail a Friend script
13.  Using the Hide 'n' Show stack
14.  Replace the words Category, Archives, Feeds (so the sidebar content) links


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

2. Automatic Updates with Waterfall
Easy, Automatic Theme Updating with the plugin Waterfall for RapidWeaver®.
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 > General > Web Address (with RW7) will be the link.
Drag your Logo into the Site Logo area.
By default the logo is hidden. Now go to the Theme Variations > Miscellaneous > Logo 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 ExtraContent1 area (read Chapter 4 about ExtraContent), on the banner image. 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 bottom on the banner image. Nice for a short message (a few text lines), social icons or a search box. You can also put a stack in the ExtraContent1 area, but note that not every stack will work here.
You can choose a breakpoint the Theme Styles > ExtraContent1 Breakpoint. By default it’s 600px. Below this, the EC1 will display a s a block below the banner. You can test this by narrowing the browser window.
ExtraContent2 is at the bottom, just above the Footer.
You can select a Font-Size, Font-Color and Background Color for this in the Theme Variations > ExtraContent1 or ExtraContent2 Font-Size and Other Colours > ExtraContent Colours.
ExtraContent3 is in the sidebar, just above the Sidebar content.
You can select a Font-Size, Font-Color and Background Color for this in the Theme Variations > ExtraContent3 Font-Size and Other Colours > ExtraContent Colours. When you put an image or stack in the EC3 you can heide the padding on your mobile (iPhone/iPad) by checking the option Theme Variations > Miscellaneous > Hide Padding ExtraContent3 on Mobile.
When you like a Background-Color to the EC3 add a Padding (Miscellanesous) and a background-color.
ExtraContent4 is hidden by default. It can only be used for images (banners), slideshow, video’s, etc. It replaces the RW7 banner image when you select in the Theme Variations > RW7 Banner Height - Display ExtraContent4.

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="myExtraContent1">This is the ExtraContent 1 container</div>
<div id="myExtraContent2">This is the ExtraContent 2 container</div>
<div id="myExtraContent3">This is the ExtraContent 3 container</div>


There is an EC snippet in the download file with a Plain Text lay-out for use in not-Stacks pages (Blog, Contact, Styled Text, etc).

5. Banner Image Option with Rapidweaver 7

The BANX theme takes advantage of the new Banner Image option in RW7. The theme comes with one banner photo (a red tulip), but you can replace it with your own image. How to do that?

a. Drag your image into the ‘Override Site Banner’ area in the Page-Inspector > General Settings. See image below.

banx-image

In preview your own image shows up. You can hide it or choose a height in the Theme Variations > RW7 Banner Height - Display ExtraContent4:

banner-height

Check the checkbox Theme Styles > Miscellaneous > Add Text-Shadow for a text-shadow.

You can hide the banner image in the Theme Styles > Miscellaneous > Hide Banner Image. Select a Background Color of the Title and Slogan area in Main Background Colors > Banner Background. The height can be selected in Theme Variations > RW7 Banner Height - Display ExtraContent4.

6. Responsive Banner, Slideshow or Video in ExtraContent4 (instead of the RW7 banner)
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 ExtraContent4 area for a responsive image or slideshow.

IMAGE:
Step 1. Go to the Theme Variations > RW7 Banner Height - Display ExtraContent4 and select the option Hide Banner • Display ExtraContent4 (see image below):

ec4

Step 2. With a Stacks page: drag an ExtraContent stack (free download) into a stacks page and select ExtraContent4 in the settings of the stack, see green arrow in image below.
Step 3. 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.

ec4-stack

In preview your image shows up above of the Content area.

SLIDE SHOW:
Step 1. Go to the Theme Variations > RW7 Banner Height - Display ExtraContent4 and select the option Hide Banner • Display ExtraContent4.

ec4

Step 2. Drag an ExtraContent stack (free download) into a stacks page and select ExtraContent4 in the settings of the stack (see green arrow in image above).
Step 3. Now drag your slide-show stack in this ExtraContent stack and add your images as described in the tutorial of the slide-show stack. When the slide-show stack has an option for showing thumbnails I would hide that option.
A great stack for this is the (free) Freestyle stack (images, videos, and more), but there are different other stacks for this, have a look at rapidweavercentral.info

VIDEO (with a Stacks page):
Step 1. Go to the Theme Variations > RW7 Banner Height - Display ExtraContent4 and select the option Hide Banner • Display ExtraContent4.
Step 2. Drag an ExtraContent stack (free download) into a stacks page and select ExtraContent4 in the settings of the stack (see green arrow in image above).
Step 3. Drag a video stack into the ExtraContent stack:
With the Freestyle2 stack you can add videos (HTML5, Vimeo, YouTube, etc.). There are more video stacks, such as the HTML5 Video stack.
About the YouTube option in the Freestyle stack: a box marked Custom Para’s is provided in the stack settings. When you put ?autoplay=1 in this area, the video starts playing automatically as the page loods.
When you put this in the area ?autoplay=1&modestbranding=1&showinfo=0&controls=0 all controls and info are hidden and the video starts automatically.
In some other YouTube or video stacks you can hide these options in the stacks settings.
Read the tutorial of the HTML5 and Vimeo stacks how to hide controls, start autoplay or loop.

YOUTUBE VIDEO (with a Stacks or a not-Stacks page):
With a not-stacks page (Blog, Styled Text, Contact, Sitemap, etc) you can add a YouTube video in the ExtraContent4 too.
Step 1. Go to the Theme Variations > RW7 Banner Height - Display ExtraContent4 and select the option Hide Banner • Display ExtraContent4.

ec4

Step 2. Paste this as Plain Text in the Sidebar or Content of a page:

<div id="myExtraContent4"><div class="video-container"><iframe width="560" height="315" src="https://www.youtube.com/embed/SWv3ungRSBY?rel=0&modestbranding=1&autoplay=1&autohide=1&showinfo=0&controls=0" frameborder="0" allowfullscreen"></iframe></div></div>

Or paste only this code in a ExtraContent stack with EC4 selected:

<div class="video-container"><iframe width="560" height="315" src="https://www.youtube.com/embed/SWv3ungRSBY?rel=0&modestbranding=1&autoplay=1&autohide=1&showinfo=0&controls=0" frameborder="0" allowfullscreen"></iframe></div>


Step 3
. Select the complete code and go to RapidWeaver > Format > Ignore Formatting. That pinkish hue means that portion has been marked as “Ignore formatting”.
in Preview a YouTube video shows up.

Step 4: Replace the video above with your own YouTube video:
a. Go to the YouTube video you want to add.
b. Under the video, click Share .
c. Click Embed.
d. From the box that appears, copy only the VideoID in the HTML code below (arrow):
yt-video
e. Replace the new VideoID in the code above (so SWv3ungRSBY) with the new VideoID (don’t remove the ? in the code!).
So the code must be behind the text …/embed/ and before ?rel=0…
In preview your YouTube video starts automatically. If not you’ve copy/paste the wrong code. Try again.

Step 5: By default all controls are hidden, and the video starts automatically.
• The “autoplay” function allows for a video to immediately start when a page loads: the value 1 enables this. Replace it with 0 when you prefer to start the video manually.
• The “controls” function allows you to hide (the value 1 enables hide) or show the video controls. To show the controls, replace it with 0 .
• The “showinfo” code shows and hides (the value 1 enables hide) the YouTube header bar. To hide the info bar, replace it with 0 .
• The “modestbranding” code shows and hides (the value 1 enables hide) the YouTube logo. To show the logo, replace it with 0 .
• Finally, in order to show related videos from the end of the video replace 0 in rel=0 in the code above with 1 .

VIMEO VIDEO (with a Stacks or a not-Stacks page):
With a not-stacks page (Blog, Styled Text, Contact, Sitemap, etc) you can add a vimeo video in the ExtraContent4 too.
Step 1. Go to the Theme Variations > RW7 Banner Height - Display ExtraContent4 and select the option Hide Banner • Display ExtraContent4.

Step 2. Paste this as Plain Text in the Sidebar or Content of a page:

<div id="myExtraContent4"><div class="video-container"><iframe src="http://player.vimeo.com/video/136920442?autoplay=1&loop=1&" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe></div></div>

Or paste only this code in a ExtraContent stack with EC4 selected:

<div class="video-container"><iframe src="http://player.vimeo.com/video/136920442?autoplay=1&loop=1&" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe></div>

Step 3. Select the complete code and go to RapidWeaver > Format > Ignore Formatting. That pinkish hue means that portion has been marked as “Ignore formatting”.
in Preview a YouTube video shows up.
Now replace the VIMEO ID (in this example 136920442) with your own. So the code must be behind the text …/video/ and before ?autoplay=1…
In preview your YouTube video starts automatically. If not you’ve copy/paste the wrong code. Try again.
Step 4: By default all controls are hidden, and the video starts automatically.
• The “autoplay” function allows for a video to immediately start when a page loads: the value 1 enables this. Replace it with 0 when you prefer to start the video manually.
• The “loop” function allows to play the video again when it reaches the end. Defaults to 0. With the value 1 it plays again after rechtig the end.

Some videos have black bars at the top and bottom. You can remover them by changing the Aspect Ratio of the video. Paste this in the Custom CSS and change 43% until you don’t see the bars anymore:

.video-container { padding-bottom: 43%; }

(this css does not work with the Freestyle2 stack)

EXTRA: when you prefer a less taller video on your desktop, paste this in the Custom CSS (-120px is an example, adjust it until you’e satisfied about the height):

@media screen and (min-width:768px) {
#myExtraContent6,#breadcrumbcontainer { top: -120px;}
#content-wrapper { margin-top: -120px;}}


Videos won't AutoPlay on iPad and iPhone.


• 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="myExtraContent4"><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="myExtraContent4"><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="myExtraContent4"><img src="http://www.domain.com/images/image1.jpg" ></div>

Try this working example:

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



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 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. More CSS
You can put all css-codes below in the Custom CSS:
Line-Height Content and Sidebar
Increase or decrease the line-height (default 1.5):

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


Font-Weight Title
With this in the Custom CSS you’ll get thicker characters of the Title:

#title h1 {font-weight: bold;}

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 text and the thumbnails wrap in a built-in Photo Album Page:

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

Hide text-shadow only in ExtraContent1
With this in the Custom CSS you can hide the text-shadow in the EC1 when you’e added a textshadow to the Title and Slogan in the Miscellaneous section of the theme styles:

#myExtraContent1 {text-shadow:none;}


8b. CSS for Fixed Menu
Fixed Menu (so the menu is always visible when scrolling down):
First select in the Theme Styles > Main Desktop Menu Background > Transparent Black or More Transparent Black.
Now paste this in the Custom CSS:

#myslidemenu {position: fixed;}

.mean-container .mean-bar {
position:fixed;
background-color: rgba(0, 0, 0, 0.60);
min-height:40px;}

@media screen and (max-width:768px) {
#title {margin-top: 100px !important;}}


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

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 at the bottom of your banner image. Choose the font-size and colors in the Theme Variations.

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

Paste this in the Custos CSS to hide the border round the Search text or icon:

fieldset input[type="submit"], fieldset input[type="submit"]:hover {
border-style:none;padding-left:5px;}


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


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

<script language="JavaScript">

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

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

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

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

</script>


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

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

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

11. Date (US and European) script
Example

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

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


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


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

This is the code when you prefer a European Date:

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

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


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

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

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

12. 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 on the banner image.

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


13. Using the Hide 'n' Show stack
A. With the Hide 'n' Show stack (not included in the theme) your visitor can show for example the Title with a delay. 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 #title (with RW7 Banner enabled) or #title2 (with ExtraContent4 enabled).

hnsb

In preview you see a fade effect of the Title (and Slogan when enabled). There are many options with this stack.

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.



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