Download Report

Thanks for purchasing the RapidWeaver theme PRESTIGIOUS.
This theme is made for RapidWeaver 4 and 5
Demosite: http://www.henkvrieselaar.nl/Themes/prestigious
Contents of this Manual
1. How to install a theme?
2. How to add your own header images to this theme?
3. How to add a slideshow to the Header (ExtraContent1 area)?
4. How to add a slideshow to the ExtraContent2 area?
5. How to add ExtraContent?
6. How to add your own background pattern to this theme?
7. How to add a pattern to an ExtraContent container?
8. The LOGO.
9. How to add your own Transparent Header Effect?
10. Content Padding
11. How to change the width of the input fields of the Contact Form?
12. How to change the border width of the Contact Form Input Fields?
13. Add a BannerZest flash Header
14. SubMenu Position below HeaderImage
15. SubMenu Position and Internet Explorer 6
16. Transparent Background and Adding a Supersizer Background stack.
17. SearchBox in the ExtraContent area.
18. TextTime in the ExtraContent area
19. Date (US and European) in the ExtraContent area
20. Mail-A-Friend in the ExtraContent area
21. Use the prettyPhoto stack in a Photo Album Page.
22. Other codes for the Sidebarheader.
1. How to install a theme?
1. Double-click the theme (filename will end with '.rwtheme'). RapidWeaver will launch and copy the theme into the RapidWeaver application support folder.
1a. It's also possible to drag this theme into the folder ~ / Libary / Application Support /RapidWeaver.
2. Quit RapidWeaver.
The next time you launch RapidWeaver, the new theme will appear in the themes drawer.
3. If you are upgrading from a previous version of this theme, be sure to first delete the original theme. To do so, right-click (or crtl-click) on the theme in RapidWeaver's theme
drawer and select 'Delete' from the popup menu. Please note: Upgrading this theme will remove any modifications you made to the theme previously. So, please be sure to backup
your data if necessary.
2. How to add your own header images to this theme?
This Rapidweaver theme contains 5 different (JPG) images. Not satisfied with them? Want to add your own? Easy! Design your own jpg-image (width: 960px, height: 150px). When
you use only smaller widths for your website, only that width is necessary (for example 650px, 700px, 750px, 800px, 850px, 960px).
Note: save your images for the web (in Photoshop > File > Save for Web & Devices).
How to do this?
Option A.
• Step 1: Your JPG-image must be 960px wide (or smaller: see above) by 150px tall (default). Save your image files as RGB jpg files with a resolution of 72dpi, but change the name
of your images to image06.jpg, image07.jpg, image08.jpg, ... until image15.jpg.
• Step 2: Open the theme's contents folder (select theme in theme panel in Rapidweaver, right click (or press "ctrl" key and then click your mouse), and select "Reveal Theme
Contents in Finder"). Drag your image into the folder 'header_images' located in the theme's contents folder (images > header_images). DO NOT place them in the folder 'bg'!
• Step 3: Click on the radiobutton Custom Header Image 1, 2, 3, etc. in Page Inspector > Styles> Header Image.
Preview your page and you will see your own image(s) in position. That's all.
When you need more JPG images for your website and you don't use the 5 headerimages in this theme, you can also use the radiobuttons Image 1, 2, 3, 4 or 5 too.
Again save your images as image01.jpg, image.jpg, image.jpg, image4.jpg or image05.jpg and follow the steps above.
How to use the other images in the downloadfile?
This is a link to the folder with 65 header-images: http://www.henkvrieselaar.com/images/Prestigious_header_images.zip
The downloadfile contains another 65 beautiful header images (960px x 15ppx). They have the name 1.jpg, 2.jpg, 3.jpg,... until 65.jpg. Change the name of an image in image06.jpg,
image07.jpg, image08.jpg, ... until image15.jpg and drag one or more into the folder 'header_images' located in the theme's contents folder (images > header_images). DO NOT
place them in the folder bg!
Click on the radiobutton Custom Header Image 1, 2, 3, etc. in Theme Variations > Header Image.
Preview your page and you will see your own image(s) in position.
Option B (with Rapidweaver 4).
• Step 1: Your JPG-image must be 960px wide (or smaller: see above) by 150px tall. Save your image files as RGB jpg files with a resolution of 72dpi. Any name is possible but don't
use spaces.
• Step 2: Drag your image into the Assets window (page-Inspector > Header > CSS), see image below:
In this example I've added image_A.jpg to the Assets.
• Step 3: Now paste this in the Custom CSS of RapidWeaver with Sidebar Left (RW > Page-Inspector > Header > CSS):
#pageHeader {
background: url(assets/image_A.jpg) no-repeat left top;
background-position: 190px;
}
Paste this in the Custom CSS of RapidWeaver with Sidebar Hide or Right (RW > Page-Inspector > Header > CSS):
#pageHeader {
background: url(assets/image_A.jpg) no-repeat left top;
}
Option C (with Rapidweaver 5).
• Step 1: Your JPG-image must be exactly 960px wide (or smaller: see above) by 250px, 190px tall or 140px tall (depending the selected header height). Save your image files as
RGB jpg files with a resolution of 72dpi. Save your image files as RGB jpg files with a resolution of 72dpi. Any name is possible but don't use spaces.
• Step 2: Add your image to the Resources.
• Step 3: Now paste this in the Custom CSS of RapidWeaver with Sidebar Left (RW > Page-Inspector > Header > CSS):
#pageHeader {
background: url(%resource(image_A.jpg)%) no-repeat left top;
background-position: 190px;
}
Paste this in the Custom CSS of RapidWeaver with Sidebar Right or Hide (RW > Page-Inspector > Header > CSS):
#pageHeader {
background: url(%resource(image_A.jpg)%) no-repeat left top;
}
3. How to add a slideshow to the Header (ExtraContent1 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 must be at least 150px tall. The width is up to you, but the maximum width is 960px (see chapter 2).
I've added the ExtraContent1 container to show your slideshow in the header.
How to add a slideshow?
1. Install the symNivo, symCanvas, symSwirl or Weaverpix image plugin and add a symNivo, symSwirl symCanvas or Weaverpix page to your project.
Weaverpix: http://www.barchard.net/projects/weaverpix/
symNivo: http://symfonip.com/products/symnivo.php
symCanvasSlider: http://symfonip.com/products/symcanvas.php
symSwirl: http://symfonip.com/products/swirl.php
There are more image slider plugins (and I think there will be new ones in the future too). They will work all, but I haven't tested them.
When you add a slideshow page to your RapidWeaver project, you are presented with an empty page for adding photos. See the manuals of these plugins how to add your photos to
the main window, etc. You can add as many photos as you like. With symNivo and symCanvas you have a limited width (about 1000px), with Weaverpix and symSwirl you can add
wider photos.
Go to Preferences and choose a width and height. And select an effect. With Weaverpix select "Overlap Images" too when you select the Ken Burns or Fade effect. With symCanvas
and symSwirl the margin-top (Settings > Style and Colours) must be 0px and you can disable the boxshadow.
Some slideshow plugins don't work with some pages, such as Accordion, Collage2, etc. With Weaverpix enable the button Settings > Advanced > Miscellaneous > Load Mootools
using Google's servers.
2. OK, now Go to the Advanced Window and (very important!) enable the ExtraContent button and choose Extra Content 1,
In Preview you'll see your slideshow in the EC1 area in the header.
3. Once you've made a nice image slider page you can import this in any other RapidWeaver page. You can do this with the plugin Pluskit.
Install the plugin PLUSKIT http://www.loghound.com/pluskit/index.html. It provides a powerful importing function (@import(())).
Example: the menu name of your slideshow plugin page is for example: Holiday in France
Now paste this in any other page (in the Content or Sidebar area) where you would like to import this Weaverpix, symCanvas or symnivo page: @import((Holiday in France))
In preview you'll see your webpage with the slideshow of your photos in the background.
But there's another way to import a slideshow with Pluskit (this can be useful when there are more scripts in a theme which could conflict with the method described above):
Important: don't choose an Extra Content Area but choose None (see red arrow in image below in for example the symNivo, symCanvas and symSwirl settings) or disable the
ExtraContent button (in Weaverpix).
Now paste this in the Sidebar or in the Content area of the page where you would like to import your slideshow:
<div id="myExtraContent1">@import((the name of your slideshow page))</div>
Select this code and go to RW > Format > Clear Formatting.
At least: when you add several Symnivo, symCanvas or Weaverpix pages and you import them in other pages it could be nicer to hide these pages from the menu, but that's all up to
you. Go to the Page-Inspector and disable the radio button 'Show in menu':
4. The slideshow starts with the selected image in the Theme Styles > Header Image. When you would like to start with a background color select Theme Styles > Header Image >
Colour and choose a color in "Colours".
4. How to add a slideshow to the ExtraContent2 area?
Follow the steps above (chapter 3), but choose ExtraContent 2 in stead of ExtraContent 1 in the settings of the image slider plugin.
Enable the ExtraContent2 area in the Theme Styles.
Now paste this in the Custom CSS with a header height of 250px:
#myExtraContent2 {
padding: 0;
width: 235px;
height: 205px;
}
You have to decrease the height when you've selected a smaller height. And increase or decrease the width in the code above when you've selected a wider or smaller
ExtraContent2 container. Just try it and see what happens.
5. How to add ExtraContent?
This theme has up to 5 ExtraContent containers:
EC1 can be used for an image or a slideshow with one of the image slider plugins.
With EC2 you can put text on the header image / slideshow.
EC3 is at the bottom of the Content, above the footer.
EC4 is below the footer. You can use EC3 and EC4 for text, images, snippets, social networks icons or whatever.
You can hide the background color and the border with this in the Custom CSS:
#myExtraContent4 {
background-color: transparent;
border: none;}
EC5 is at the top left of the container. Best for searchbox or some Date and Time snippets, etc. But you can also add text and/or images to this area. The width and height is up to
you: when there are many menu-items the width will be small. When the Title and Slogan are on the Header Image the height can be tall. See image below:
It's very important that the content in the EC5 container doesn't overlap the TopMenu. Some browsers will make the text a bit wider, so please check this.
See the ExtraContent manual in the folder ExtraContent Snippets how to use and style ExtraContent.
6. How to add your own background pattern to this theme?
The themes contain 10 different (JPG) patterns. You can select them in the Theme Styles > Body Background. Not satisfied with them? Never mind: design your own gif or jpgpattern or find one on the internet (see links below).
How to do this?
A.
• Step 1: Download a pattern or design yourself. When it's a .jpg file, change the name to pattern.jpg. When it's a .gif file, change the name in pattern.gif. There is only one
available slot for a custom jpg background pattern and one custom gif background pattern.
• Step 2: Open the theme's contents folder (select theme in theme panel in Rapidweaver, right click (or press "ctrl" key and then click your mouse), and select "Reveal Theme
Contents in Finder". Drag your new pattern into the theme's contents folder (images > bg). DO NOT place it in the folder header_images!
• Step 3: Click on the radiobutton Show Custom Pattern (JPG image) or Show Custom Pattern (GIF image) in Styles > Body Background.
Preview your page and you' ll see your own background pattern. That's all.
When you need more patterns for your website and you don't use the 10 patterns in this theme, you can use the radiobuttons Pattern 1, 2, 3, until Pattern 10 too.
Save your new patterns as pattern1.jpg, pattern2.jpg, pattern3.jpg ... until pattern10.jpg and follow the steps above.
B.
But there's another way:
You can follow the steps in Option B and Option C above (chapter 2) too. So add your pattern to the Assets (RW4) or the Resources (RW5) and add this to the Custom CSS:
• With Rapidweaver 4:
body {
background: url(assets/my_pattern.jpg) repeat left top;
}
• With Rapidweaver 5:
body {
background: url(%resource(my_pattern.jpg)%) repeat left top;
}
More patterns:
http://www.squidfingers.com/patterns/
http://www.kollermedia.at/pattern4u/dotted/
http://www.k10k.net/pixelpatterns/
http://bgpatterns.com/
7. How to add a pattern to an ExtraContent container?
There are some patterns in the downloadfile but you can also search for a nice pattern on the internet.
How to do this? Well, it's Rapidweaver so that's very simple. You can follow the steps below for only the ExtraContent 3 and 4 areas!
a. Paste this in the sidebar when you would like to have an pattern in the EC4 area (on the header):
<div id="myExtraContent4"></div>
With this code you've enabled the EC4 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 pattern, for example pattern1.jpg (with RW4) into the Assets window (Page-Inspector > Header > Assets) or (with RW5) to the Resources..
c. Paste this in the Custom CSS (Page-Inspector > Header > CSS):
#myExtraContent4 {
background: url(assets/pattern.jpg) repeat left top;
}
or (with RW5):
#myExtraContent4 {
background: url(%resource(pattern.jpg)%) repeat left top;
}
Replace 3 with 4 when you want the pattern in another ExtraContent area.
The name of your image in the Assets/Resources and in the Custom CSS must be exactly the same.
An image is possible too. Replace repeat with no-repeat in de codes above.
8. The LOGO.
The Logo and the Title have a link with the index.html page of your website. Whatever base url is inserted in 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.
Default the logo is on the left part of the header.
With the "default" position the Top Menu could overlap the Logo when there are too many menu-items.
You can change the vertical position of the Logo with this CSS in the Custom CSS (Page-Inspector > Header > CSS):
#pageHeader img {
top: 60px;
}
60px is just an example. Try any number.
You can also put the Logo on the upper left side of the HeaderImage with Sidebar Right or Hide.
Paste this code in the Custom CSS of RapidWeaver:
#pageHeader img {
top: 175px;
}
You can also put the Logo on the upper left side of the HeaderImage with SidebarLeft.
Paste this code in the Custom CSS of RapidWeaver:
#pageHeader img {
top: 175px;
margin-left: 195px;
}
This option works fine with header-images and some slideshow plugins (not with all slideshow plugins!)
When you prefer another position, for example more to the right, increase the margin-left. Just 'play' with the numbers behind 'top' and 'margin-left' and see what happens. With this
code you can position your logo anywhere on a RapidWeaver page (again: some image slider plugins cannot handle this).
You can also add your logo to an ExtraContent container!
This is the Custom CSS area of RapidWeaver:
Preview your Page.
Sometimes it could be nice to hide the logo on some pages. Paste this code in the Custom CSS of RapidWeaver:
#pageHeader img {
display: none;
}
9. How to add your own Transparent Header Effect?
The themes contain 11 different transparent header effects. You can select one in the Theme Styles. You can design your own effect with a png image (not a jpg or gif image). The
header-effect images are transparent png-images (960px x 150px). Open in Photoshop (or another image editor) a new transparent file with the name 'effect': Photoshop > FIle > New
(see image below).
Click on OK. Now an empty transparent image appears. Design your own effect with an image, dots, curls, blocks, circles, text, etc. Enable in Photoshop > Window > Layers. You'll
see the popup window below. Give the upper layer a transparancy, for example 50%. You can always change the transparancy later when you're not happy with the result.
You can add as many layers as you like to create all kinds of effects.
When you're satisfied save the file: Photoshop > File > Save for Web & Devices (so it doesn't flatten the image!). Choose this:
Now you're ready. Drag the new image effect.png into the folder 'bg' located in the theme's contents folder (images > bg). DO NOT place it in the folder header_images!
Click on the radiobutton - Custom Effect - in Theme Variations > Header Effect.
Preview your page and you' ll see your own effect. That's all.
10.
Content Padding
By default there's no padding left and right of the Content.
Paste this in the Custom CSS with when you would like a padding of for example 30px (any number is possible):
#contentContainer #content {
padding-right: 30px;
padding-left: 30px;
}
11. How to change the width of the input fields of the Contact Form?
The input fields have a default width of about 310px.
When you would like it wider or smaller paste this code in the Custom CSS of RapidWeaver:
.form-input-field {
width: 400px;
}
400px is just an example.
12. How to change the border width of the Contact Form Input Fields?
When you would like to have a 1px border to the imputfield of the Contactform and/or add a colour to the border paste this code in the Custom CSS of RapidWeaver::
.form-input-field {
border-style: solid;
border-width: 1px;
border-color: #FF0000;
}
The color #FF0000 is the HTMl color for red. More colorcodes http://www.w3schools.com/Html/html_colors.asp
The background color of the inputfields can be chained in the Theme Styles > Layout Colors.
13. Add a BannerZest flash Header
Please read the BannerZest Readme in the downloadfile > README files.
14. SubMenu Position below HeaderImage
When set under the Header, if you have a "third" level page, example: Top Nav-Page 1 / SubMenu-Page 2 / SubMenu Sub-Page 3, it doesn't show. Only when the SubMenu is in the
SideBar.
15. SubMenu Position and Internet Explorer 6
When a RW-page has no submenu and you have chosen the option SubMenu Position > In Sidebar in the Theme Variations there might be a minor gap between the Header and the
Sidebar, only with Internet Explorer 6. See image below:
To ensure this gap does not occur in any browser, choose the option SubMenu Position > Choose this option when a Page has no SubMenu.
Internet Explorer 6 is outdated, so it's not needed to enable this option at all!
16. Transparent Background and Adding a Supersizer Background stack.
You can use the bgStretcher stack or the SuperSizer Background Cloud stack for a full page dynamic background image or even a slide show.
The bgStretcher stack is developed by RWExtras: http://www.rwextras.com/stretcher/bgstretcher.html
The SuperSizer Background Cloud stack is developed by symFonip: http://symfonip.com/products/supersizer.php
With both stacks you can create striking home page or splash page using an oversized static image or add a dramatic slideshow to cover your whole background. When you use this
stack the body background will be filled with your image.
You can also choose a transparent background when you want a pattern as background (Theme Styles > Body Background).
How to do this?
1. Follow the instructions how to use the background image stack.
2. Select in the Theme Styles > Container Background one of the options within the pink block below:
When you would like to hide the borders too select "Hide Container and ExtraContent 3 and 4 Borders too.
3. You can hide the header image or slideshow. To do this select in Theme Styles > Header Image or Background one of the 'Hide' options below (in the pink block).
17. SearchBox in the ExtraContent area.
1. Add a RapidSearch Page to your project: http://www.joshlockhart.com/index.php/store/product/rapidsearch/
Follow the instructions in this page (add a Title and URL, etc.).
2. Let's add the searchbox to the ExtraContent 5 area. Now the searchbox shows up at the upper left side of the container. Paste the code below as plain text in the sidebar:
<div id="myExtraContent5">

<form action="http://www.url-of-your-RapidSearch-page.com" method="get">
<fieldset>
<input type="text" name="query" value=""/>
<input type="submit" value="Search"/>
</fieldset>
</form>
</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 myExtraContent5 with myExtraContent 3, myExtraContent 4 or myExtraContent5 in the code above when you prefer it in another EC area.
Not in the ExtraContent 1 container!
3. When you would like to have another look of your searchbox, select the code below and paste this in the Custom CSS:
input[type="submit"] {background-color: transparent;border-style: none;cursor: pointer;padding-left: 0px;}input[type="reset"] {background-color: transparent;border-style: none;cursor:
pointer;padding-left: 0px;}input[type="reset"]:hover {background-color: transparent;border-style: none;padding-left: 0px;}input[type="submit"]:hover {background-color:
transparent;border-style: none;padding-left: 0px;}.form-input-field,input[type="text"]{outline: none;background-color: transparent;border-style: solid;border-width: 1px; margin-left:
-5px;}.form-input-button {margin-top: 0;padding-top: 0;}
input[type="submit"],
[type="submit"] {
color: #cccccc;
}
.form-input-field,input[type="text"]{
color: #cccccc;
border-color: #cccccc;
}
Now the inputfield border and the text is gray (#cccccc).
You can change the colors: #FFFFFF is the HTML color for white and #000000 for black. Replace this with any other color.
All HTML-colors: http://www.computerhope.com/htmcolor.htm
4. The important part being the <form> action attribute. This implementation requires:
1.
2.
3.
4.
You have to set your Base URL in the Site Setup window.
Add a RapidSearch page at the top of the RapidSearch page hierarchy.
Set the foldername of the RapidSearch page to "search".
Set the filename of the RapidSearch page to "index.html" or "index.php".
18. 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!
<div id="myExtraContent2"><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) {

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

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 myExtraContent2 with myExtraContent 3, myExtraContent 4 or myExtraContent 5 in the code above when you prefer it in another EC area. You can also paste it in the EC3
container, but it will be aligned left now.
It's very important that the content in the EC5 container doesn't overlap the TopMenu. Some browsers will make the text a bit wider, so please check this.
19. 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="myExtraContent1">
<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

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 myExtraContent2 with myExtraContent 3, myExtraContent 4 or myExtraContent 5 etc in the code above when you prefer it in another EC area.
It's very important that the content in the EC5 container doesn't overlap the TopMenu. Some browsers will make the text a bit wider, so please check this.
This is the code when you prefer a European Date:
<div id="myExtraContent2">
<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

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 myExtraContent2 with myExtraContent 3, myExtraContent 4 or myExtraContent 5 in the code above when you prefer it in another EC area. You can also paste it in the EC3
container, but it will be aligned left now.
It's very important that the content in the EC5 container doesn't overlap the TopMenu. Some browsers will make the text a bit wider, so please check this.
20. 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="myExtraContent1">

Click <A href="javascript:mailpage()">here</A> to email this page to a friend
<script language="javascript">
function mailpage()
{

mail_str = "mailto:?subject=Check out " + document.title;

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 myExtraContent2 with myExtraContent 3, myExtraContent 4 or myExtraContent 5 in the code above when you prefer it in another EC area. You can also paste it in the EC3
container, but it will be aligned left now.
It's very important that the content in the EC5 container doesn't overlap the TopMenu. Some browsers will make the text a bit wider, so please check this.
21. Use the prettyPhoto stack in a Photo Album Page.
If you want to use the prettyPhoto Stack in a Photo Album page, you'll need to do this:
1) Add a Pluskit page.
2) Create a stacks page with only the prettyPhoto stack.
3) Create a Photo Album page and add @import((name of prettyPhoto page created in step 2)) in the Sidebar. You can hide the Sidebar if you need to
4) Add the following code in Page Inspector>Header>JavaScript:
jQuery(document).ready(function(){
jQuery('.thumbnail-frame').each(function(){
jQuery('a',this).attr({
'href' : jQuery('a img',this).attr('src').replace(/thumb/i,'full'),
'rel' : 'prettyPhoto[gal]',
'title' : jQuery('.thumbnail-caption',this).text()
});});});
That should do it.
It's not needed to use the prettyPhoto stack. There is another way:
http://www.joshlockhart.com/tutorials/photo-album-to-prettyphoto-2
22. Other codes for the Sidebarheader.
Line Break
http://www.w3schools.com/TAGS/tag_br.asp
Inserting a single line break with the <br/> tag
You can insert as may <br/> tags as you like.
FontSize and FontColor
http://www.w3schools.com/TAGS/tag_font.asp
http://www.w3schools.com/TAGS/tag_font_style.asp
The <font> tag specifies the fantasize, fontstyle and fontcolor. Example:
<font size="3">Text</font> Text
<font color="#FF0000">Text</font>Text
<b>Text</b>Text
<i>Text</i>Text
More about colorcodes: http://www.w3schools.com/Html/html_colors.asp
Image in the SideBar Header
Add your image(s) with PageInspector > Page Assets.
Paste this code in the SideBar Header:
<IMG src="assets/image.jpg"></A>
Or use an external image (image on your server or somewhere on the internet:
<IMG src="http://www.website.com/image.jpg" height="100" width="200">
Link to Website
Paste this code in the SideBar Header:
<A href="http://www.mywebsite.com">My Website</A>
How to use an Image as Link
Add your image(s) with PageInspector > Page Assets.
Paste this code in the SideBar Header:
<A href="http://www.yourwebsite.com/"><IMG src="assets/image.jpg"></A>
Or use an external image (image on your server or somewhere on the internet:
<A href="http://www.yourwebsite.com/"><IMG src="http://www.website.com/image.jpg"></A>
Link to EmailAddress
Paste this code in the SideBar Header:
<A href="mailto:[email protected]">Contact Me</A>
<A href="mailto:[email protected]">Steve Jobs</A>
------------------------------------------------------------------------------------------------------------------------------------------PRESTIGIOUS may not be resold or redistributed without the express written permission of Henk Vrieselaar:
http://www.henkvrieselaar.com/rapidweaver/contact/
May 2011 - Please post your comments and questions on the RapidWeaver Forum.
Jonathan Head (NimbleHost) has created a new website with free RapidWeaver CSS tutorial videos, available to users around the globe, at no charge. Please watch these videos
before sending me questions.