Manual - Henk Vrieselaar

Transcription

Thanks for purchasing the RapidWeaver themes
HV XXL-r left and right (responsive)
Demosite: http://www.henkvrieselaar.com/Themes/xxlr/
Both themes are responsive* and there are 2 versions:
XXL-r right with the menu and sidebar at the right side of the content.
XXL-r left with the menu and sidebar at the left side of the content.
*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)/mobile device.
You can use different themes in one website. To do this go to RapidWeaver > Page Inspector and choose
another theme in the popup menu below "Page-Specific Theme". See image below:
1
Start Immediately with a Background Image
A small tutorial so you can see immediately what the XXL-r theme does:
STEP 1. Install the themes (see Chapter 1)
STEP 2. Open a Rapidweaver Page and select the XXL-r Right or Left theme in the Theme's Panel.
STEP 3. Paste this in the Custom Header (Page-Inspector > Header > Header), see blue arrow in image
below:
<img src="http://www.henkvrieselaar.com/images/blow/landsc/landscape2.jpg"
onerror="this.style.display='none'" class="bg">
In Preview you see an example of a background image from my server.
Read more about background-images, how to add your own from the Resources, the Assets or your server in
Chapter 5.
2
Contents of this Manual
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
Page
How to install a theme?
How to add ExtraContent area(s) in your RapidWeaver page?
The Logo and Title have a link with the index.html of your website.
Position of the Logo.
How to add a browser-wide background-image to your webpage
Add a pattern to the body (so outside the Content)
Add a pattern to the Container only.
Add only an image to the the ExtraContent7 area
Add a slideshow to the ExtraContent7 area
Replace the words MENU and/or SIDEBAR when in mobile mode
Height slideshow or image in the ExtraContent7 area.
Width Menu Strip
Background Color to responsive Sidebar
Container Opacity.
Menu and Sidebar text-align right (with XXL-r Left theme)
Different font to Title/Slogan, Blog Title, FileSharing Title and other titles.
How to change the fontsize and fontweight of the SidebarHeader?
SearchBox in the ExtraContent4 area
TextTime in the ExtraContent area
Date (US and European) in the ExtraContent area
Mail-A-Friend in the ExtraContent area
Using RapidCart
Sliding-effects of the Menu
Text-Shadow to Menu, Title and/or Slogan
Hide the Breadcrumb Container
Center the Title/Slogan/Footer
Underline Links
Transparent background to the inputfields of a Contact Page
Hide Content with the Hide 'n' Show stack
Hide Horizontal Line(s)
Social Media Icons
Codes for the Sidebarheader
EXTRA
Make your images fluid (responsive)
3
4
4
6
6
7
9
9
10
11
13
14
14
16
16
16
17
18
18
21
22
24
24
25
26
26
26
26
27
27
28
29
31
32
33
1. How to install a theme?
1.
Double-click on the theme (filename will end with '.rwtheme'). RapidWeaver will launch and copy the
theme into the ~ / Libary / Application Support /RapidWeaver folder.
1a. It's also possible to drag these themes directly into the folder ~ / Library / Application Support /
RapidWeaver.
With Lion: Apple has hidden the user’s Library folder to casual viewers, in an attempt to stop new Mac users screwing their machines
up. To access it, in the Finder go to the ‘Go’ menu and hold down the Option (Alt) key; the Library folder will appear as a choice.
2.
Quit RapidWeaver. The next time you launch RapidWeaver, the new theme will appear in the themes
drawer. The theme name in the theme drawer will be HV-r XXL Left or HV-r XXL Right. The reason for this is
that I am adding my initials, HV, to the front of the theme names so that all my themes will be conveniently
grouped together in your theme drawer and will be easier for you to find in the future.
2. How to add ExtraContent area(s) in your RapidWeaver page?
HV-XXL-r is enabled with a very special feature called ExtraContent. ExtraContent allows you to add more
content then RapidWeaver typically allows. It was developed by a small innovative group of RapidWeaver
theme developers looking to extend the abilities of RapidWeaver beyond the two content areas typically
allowed.
There are 4 ExtraContent snippets in the downloadfile.
These snippets need to be installed so that RapidWeaver can find and use them. Once you've downloaded the
snippets double-click on a Snippet to install it just like a Theme.
Quit RW and install the other snippets in the same way. Alternatively you can drag the Snippets to the folder ~
Library/Application Support/RapidWeaver/Snippets. Once installed you need to restart RapidWeaver for the
changes to take effect.
Then from the View Menu you can access the Snippets Window. From there you can simply 'Drag and Drop'
the code to the required area.
• Extra Notes about EC in this theme
This theme has up to 7 EC areas:
4
ExtraContent1: this area is below the Title and Slogan. You can use this area for text, a stack, a snippet, social
media icons or whatever.
ExtraContent2: this area is at the above the footer. You can use this area for text, a stack, a snippet, social
media icons or whatever.
ExtraContent3 is at below the Footer and you can use this for text, a stack, a snippet, social media icons or
whatever.
ExtraContent4 is above the menu. You can use this for for text, images, a searchbox (see chapter 18), for a
stack, a snippet, social media icons or whatever.
ExtraContent5 is below the menu. You can use this for text, a stack, a snippet, social media icons or whatever.
ExtraContent6 is a floating area at the right bottom side of the browser. You can use this area for a few words,
social media icons or a stack. I would prefer the Hide 'n' Show stack (with this stack you can hide the content
so only the slideshow or image will be visible) or social media icons.
ExtraContent7: this area is below the Title and Slogan and can only be used an image or a slideshow with the
same width as the container. Not for text! You have to select in the Theme Styles what you would like to add:
There are 5 different heights for a slideshow (see image above). When you enable the options for an image or
slideshow the ExtraContent1 will be disabled. When you prefer another slideshow height go to Chapter 12.
Any height is possible!
SHOW ALL EXTRACONTENT CONTAINERS
When you would see all EC containers of this theme paste this in the Sidebar or Content as plain text (and
now select the complete code and go to RapidWeaver > Format > Ignore Formatting. That pinkish hue means
that portion has been marked as “Ignore formatting”):
<div id="myExtraContent1">This is the ExtraContent 1 container. Lorem ipsum dolor sit amet, sapien platea
morbi dolor lacus nunc, nunc ullamcorper.</div>
<div id="myExtraContent6">This is the ExtraContent 6 container</div>
5
You can choose three different font-sizes in the Theme Styles > ExtraContent Font-Size (12px, 13px and
14px). When you prefer another font-size (any number is possible), for example to the ExtraContent5 area,
paste this in the Custom CSS:
#myExtraContent5 {font-size: 10px;}
Or center the ExtraContent:
#myExtraContent2 {text-align: center;}
Or a bold and large font in the ExtraContent:
#myExtraContent3 {
text-align: font-size: 16px;
font-weight: bold;}
3. The Logo and Title have a link with the index.html of your website.
The Logo and the Title have a link with the index.html page of your website. Whatever base url is inserted in
RapidWeaver > Site Setup > Website will be the link. You can enable the logo in the Site Setup. Just drag your
logo, (transparent png-logo's are allowed too), into the Site Logo area and enable the radio button below it.
4. Position of the Logo.
There are more options to place a logo on your website.
A. The first one is to drag your logo to the Site Setup > Logo area and enable the radio button below it.
By default the logo is above the Title and Slogan (see image below), this is the best place when you have a
large logo:
You can make the logo responsive
too, but only when it's above the Title.
With this in the Custom CSS:
#pageHeader img {max-width:
100%;height: auto;}
Or when your logo is very large try a
lower percentagen, for example 80%.
With the logo right (see image left
arrow) try for example this:
#pageHeader img {max-width:
50%;height: auto;}
Or whatever. Any % is possible, it
depends of the size of your logo, try it
yourself.
6
When you prefer your logo next to the Title and Slogan (see image above, bottom) go to Theme Styles > Hide
and Show and enable the button "Show Logo Right".
Sometimes it could be nice to hide the logo on some pages. In the Theme Styles > Hide and Show you can
select "Hide Logo".
B. You can also place an image in one of the ExtraContent areas, for example above the menu in the
ExtraContent4 area. Drag an ExtraContent snippet into the sidebar and drag your image between <div
id="myExtraContent4"> and </div>
Or drag your logo into an ExtraContent stack and select number 4 in the settings of the stack.
5. How to add a browser-wide background-image to your webpage
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 otherwise you will have a problem with the
theme loading all the time.
When you add a full page dynamic background image to this theme it expands when you increase the width
and/or height of the browserwindow. Only use JPG or PNG images. Best size is 1024 x 768px or maximum
1200 x 900 px and 72dpi. When you make your browser narrower you can see a minor distortion of your
image. When you don't like this use the bgstretcher stack.
When you use large images direct from your camera of for example 300dpi, loading will be very
slooooooooooooooooooooooooooooow...
Images can be located in the Page Assets (with RapidWeaver 4), in the Resources (with RapidWeaver 5) or
on a server (e.g. http://www.domain.com/images/img1.jpg).
I’ve added 4 Full Page Dynamic Background snippets
to the downloadfile, see image left.
These snippets need to be installed so that
RapidWeaver can find and use them. Once you've
downloaded the snippets double-click on a Snippet to
install it just like a Theme.
Quit RW and install the other snippets in the same way.
Alternatively you can drag the Snippets to the folder ~
Library/Application Support/RapidWeaver/Snippets.
Once installed you need to restart RapidWeaver for the
changes to take effect.
Then from the View Menu you can access the Snippets
Window.
From there you can simply 'Drag and Drop' the code to the Custom Header (Page-Inspector > Header >
Header).
7
• WHEN YOUR IMAGES ARE IN THE RESOURCES (RW5) OR IN THE ASSETS (RW4).
STEP 1:
Drag your image, for example your_image.jpg, into the Assets
window (Page-Inspector > Header > Assets) with RapidWeaver
4 or into the Resources with RapidWeaver 5.
STEP 2:
• With RapidWeaver 4 drag the Full Page Dynamic Background
RW4 snippet into the Custom Header (see image left). Replace
the name of the image in the code with the name of your own
image in the assets window.
• With RapidWeaver 5 drag the Full Page Dynamic Background
RW5 snippet into the Custom Header (see image left), Replace
the name of the image in the code with the name of your own
image in the resources.
When your images are in a folder (for example the folder
'images') in the Resources, paste this in the Custom Header:
<img src="%resource(images/your_image.jpg)%"
onerror="this.style.display='none'" class="bg">
Be sure that the image name in the Custom Header is exactly the same as in the one in the Assets or
Resources! Don't use spaces in the name of your image.
• WHEN YOUR IMAGES ARE ON A SERVER.
• When your image is on a server, drag the Full Page Dynamic Background Server snippet into the Custom
Header (see image above). Replace the link to the image in the code with the link to your own image.
I’ve added a working example: drag the Full Page Dynamic Background Example snippet into the Custom
Header. In preview your image shows up. Isn't that nice?
D. When you've added an image it would be nice to choose a Background-color in the Theme Styles >
Colours > Body Background that's rather similar to the primary color of your photo:
8
6. Add a pattern to the body (so outside the Content)
It's not needed to use a full size background image. Without an image you can choose any color to the
background But another option would be a pattern. How to do this?
With RapidWeaver 4: Drag your image, for example pattern1.jpg, into the Assets window (Page-Inspector >
Header > Assets).
With RapidWeaver 5: Drag your image, for example pattern1.jpg, into the Resopurces.
Now paste this in the Custom CSS (Page-Inspector > Header > CSS) with RapidWeaver 4:
body {background: url(assets/pattern1.jpg) repeat fixed left top;}
Paste this in the Custom CSS (Page-Inspector > Header > CSS) with RapidWeaver 5:
body {background: url(%resource(pattern1.jpg)%) repeat fixed left top;}
The name of your pattern in the Assets and in the Custom CSS must be exactly the same!
When you would like the pattern to the inputfields of a Contact page too paste this in the Custom CSS (after
adding a pattern to the Page Assets or the Resources of course):
With RapidWeaver 4:
body,.form-input-field {background: url(assets/pattern1.jpg) repeat fixed left top;}
Or with RapidWeaver 5:
body,.form-input-field {background: url(%resource(pattern1.jpg)%) repeat fixed left top;}
There is a folder with two background patterns in the downloadfile to start with.
More free patterns:
http://subtlepatterns.com/
http://www.squidfingers.com/patterns/
http://www.kollermedia.at/pattern4u/dotted/ and many other websites.
7. Add a pattern to the Container only.
With RapidWeaver 4: Drag your image, for example pattern1.jpg, into the Assets window (Page-Inspector >
Header > Assets).
With RapidWeaver 5: Drag your image, for example pattern1.jpg, into the Resopurces.
Now paste this in the Custom CSS (Page-Inspector > Header > CSS) with RapidWeaver 4:
#container {background: url(assets/pattern1.jpg) repeat fixed left top;}
And this with RapidWeaver 5:
#container {background: url(%resource(pattern1.jpg)%) repeat fixed left top;}
There is a folder with two background patterns in the downloadfile to start with.
9
8. Add only an image to the the ExtraContent7 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.
It's not needed to add a slideshow as background to the EC7 area (see chapter 10). Only an image is possible
too. There are 3 ways to do this. First of all select in the Theme Styles > ExtraContent7 one of these buttons
below (with an image or slideshow enabled the ExtraContent1 will be hidden):
Or choose another height when your image is taller or smaller (see chapter 11).
TUTORIAL 1
a. Paste this in the sidebar or in the Content as plain text:
<div id="myExtraContent7"></div>
With this code you've enabled the EC7 area. Select the complete code and go to RapidWeaver > Format >
Ignore Formatting. That pinkish hue means that portion has been marked as “Ignore formatting”.
b. Drag your image, for example your_image.jpg, into the Assets window (Page-Inspector > Header > Assets)
with RapidWeaver 4 or into the Resources with RapidWeaver 5.
c. Paste this in the Custom CSS (Page-Inspector > Header > CSS) with RapidWeaver 4:
#myExtraContent7 {background: url(assets/your_image.jpg) no-repeat left top;}
Paste this in the Custom CSS (Page-Inspector > Header > CSS) with RapidWeaver 5:
#myExtraContent7 {background: url(%resource(your_image.jpg)%) no-repeat left top;}
Now the top of your image will be displayed. Replace top with center or bottom to display another part.
TUTORIAL 2
a. Paste this in the sidebar or in the Content as plain text:
b. Drag your image between <div id="myExtraContent7"> and </div>
Or choose another height when your image is taller or smaller (see chapter 12).
The name of your image in the Assets and in the Custom CSS must be exactly the same.
10
TUTORIAL 3
a. Drag your image into an ExtraContent Stack, select number 7 in the side panel (settings) of the stack.
9. Add a slideshow to the ExtraContent7 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.
I've added the ExtraContent7 container to show your slideshow below the header with the same width as the
container, but you can also select for example EC1 or EC2. First of all select in the Theme Styles >
ExtraContent7 one of these buttons below (with an image or slideshow enabled the ExtraContent1 will be
hidden):
Or choose another height when your images are taller or smaller (see chapter 12).
How to add a slideshow?
1. Install the symNivo or Weaverpix image plugin and add a symNivo or Weaverpix page to your project.
Weaverpix: http://www.barchard.net/projects/weaverpix/
symNivo: http://symfonip.com/products/symnivo.php
These slide show plugins are not responsive. At the moment there are some responsive slide show stacks.
Superflex (RefinedSldr, etc.). You need the Stacks2 plugin for these and you can drag this stack into the free
ExtraContent stack and select nr 7. The text below is only for the Weaverpix and symNivo plugin.
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 you have a limited width (about 1000px), with Weaverpix you
can add wider photos.
2. Add your images to the plugin as described in the Manual of the plugin.
Go to the Preferences or General Settings in the plugin and choose a width and height until the slideshow has
the same width as the Content. And select an effect. With Weaverpix select "Overlap Images" too when you
select the Ken Burns or Fade effect.
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.
11
3. OK, now Go to the Advanced Window and (very important!) enable the ExtraContent button and choose
Extra Content 7.
In Preview you'll see your slideshow in the EC7 area below the header.
4. 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 Content area of the page where you would like to import your slideshow:
<div id="myExtraContent7">@import((the name of your slideshow page))</div>
Select this code and go to RW > Format > Clear Formatting.
How to add an image to the ExtraContent7 are: read chapter 8.
At least: when you add several Symnivo, SuperFlex Weaverpix pages it would be nicer to hide these pages
from the menu, but that's all up to you. Go to the Page-Inspector and disable the radiobutton 'Show in menu'
(see next page):
12
10. Replace the words MENU and/or SIDEBAR when in mobile mode
On an iPhone or other mobile device you'll see the words SIDEBAR
and MENU at the top of your page (see image left). Check it when you
make your page narrower.
When you prefer these words in your own language do this:
Right--click the theme in the theme drawer, select “Reveal theme
contents in finder...” and in the folder opening up go to the index.html
file and open it with preferable the free TextWrangler. The image
below shows a part of the code:
By default you see the name MENU and SIDEBAR between > and <
When you prefer another word (preferable short!), replace it with your own and save the file.
Don’t change anything else in this script!
When you don’t want caps (so not uppercase) replace the words above with for example Menu and Sidebar
and paste this in the Custom CSS:
#menu-icon,#menu-icon:hover,#menu-icon.active,#sb-icon {text-transform: none;}
This is not possible with the BEBAS font: it can only show capitals!
13
11. Height slideshow or image in the ExtraContent7 area.
You can select 5 different heights of the slideshow in the EC7 container: 150px, 200px, 250px, 300px and
350px.
When you prefer a different height, for example 230px do this:
A. Select one of the slideshow heights in the Theme Styles:
B. Paste this in the Custom CSS (Page-Inspector > Header > CSS):
#myExtraContent7 {height: 230px;}
#contentContainer {margin-top: 240px;}
The margin-top to the contentcontainer is always 10px more than the height of the EC1 container!
12. Width Menu Strip
Try to use short menu-items. When you need more text in your Page Title some words can move to the next
line. See image below:
So the word FRANCE is better than MY HOLIDAY IN FRANCE. When you don't mind this leave it as it is.
When you prefer the Menu Item in one line you have to increase the width of the vertical menu strip (there are
some Menu Font-Size options with a Wide Strip in the Theme Styles > MainMenu Font-Size!), make the fontsize of the menu smaller or choose a lowercase font-style.
When you have still too less space for your text you can make the menu wider. How to do this? Well, this is a
rather difficult to explain but I'll try it.
14
What css do I need? The css for the vertical menu strip is #strip, the css for the main menu is #navcontainer a
and for the submenus #navcontainer ul ul a.
• OPTION 1: we're going to make the strip wider (or smaller). Name a Page title MY HOLIDAY IN FRANCE.
Select for example 46px in the Theme Styles > MainMenu Font-Size and paste this in the Custom CSS with
XXL-r Right:
#strip {width:425px;}
@media screen and (max-width:1224px) {
#strip {width:370px;}}
#strip {width:100%;}}
As you can see the vertical strip is much wider and the text of the Page Title is inline. Increase or decrease the
width with the same number to make it wider or smaller.
I'm sorry, but with the XXL-r Left theme this isn't possible (well… it is but it's rather difficult to explain).
OPTION 2: make the font-size a bit smaller so the words fit within the vertical strip. Name a Page title MY
HOLIDAY IN FRANCE. Select for example 46px in the Theme Styles > MainMenu Font-Size and paste this in
the Custom CSS (so not the code in Option 1):
#navcontainer a {font-size: 36px;}
#navcontainer ul ul a {font-size: 26px;}
#navcontainer ul ul a {font-size: 26px;}}
15
This is possible with the XXL-r Right and XXL-r Left theme. As you can see the vertical strip has the same
width as before but the font-size of the Page Title is smaller and all words are inline. Increase or decrease the
font-size until you're satisfied.
You can also paste both codes (Option 1 and Option 2) in the Custom CSS and play a bit with the numbers.
This might look quite difficult, but give it a try :-)
13. Background Color to responsive Sidebar
By default the background of the responsive Sidebar (Sidebar, Menu, ExtraContent 4 and 5) is transparent.
When you paste this in the Custom CSS (Page-Inspector > Header > CSS) you'll get a background color:
#sidebarContainer #sidebar{margin-top: 0px !important;padding-top: 5px;}
#myExtraContent5 {padding-top: 8px !important;padding-bottom: 7px !important;}
#strip {background-color: #000000; }}
When you make the browser narrower you'll notice the effect. #000000 is the HTML color for black.
Any color is possible, see all HTML colorcodes here: http://www.computerhope.com/htmcolor.htm
14. Container Opacity.
In the Theme Styles > Vertical Content Strip Background you can select 6 different opacities to the background
of the Container. When you prefer another opacity select one of these radio buttons (see image above within
the pink fields) and paste this in the Custom CSS (Page-Inspector > Header > CSS):
#containerstrip {
filter: alpha(opacity=45);
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=45);
-moz-opacity: 0.45;
opacity: 0.45;}
45 is just an example. Try any number.
15. Menu and Sidebar text-align right (only with XXL-r Left theme)
By default menu in the HV-XXL-r Left theme is on the
left side of the content and aligned to the left.
When you prefer a right text-align enable this button
in the Theme Styles > Hide and Show (image left).
Now the sliding-effect from left to right is blocked. So
drag another XXL Menu snippet in the Custom
Header (see Chapter 23). This is an example: http://
www.henkvrieselaar.com/Themes/xxlr/stacks/stacks8/
16
16. Different font to Title/Slogan, Blog/FileSharing Title and other titles.
By default you can change the font of the Menu or the Body. When you like different fonts to the Title, Slogan,
Blog Title, Filesharing Title, Photo Title or Movie Title: just paste this (this example is with Comic Sans) in the
Custom CSS (Page-Inspector > Header > CSS):
#pageHeader h1,
#pageHeader h2,
.blog-entry-title,
#blog-categories,
.filesharing-item-title,
.album-title,
.photo-title,
.movie-page-title {
font-family: Comic Sans MS; }
The first two lines (#pageHeader h1 and #pageHeader h2) are the Title and Slogan.
When you would like to have a different font to only the Title just remove the other line(s), but be sure that after
the last line is no comma!
So for example:
#pageHeader h1 {font-family: Georgia, serif; }
Just try it.
Replace font-family: Comic Sans MS; with a line below for another font. More (Websafe*) fonts:
font-family: Comic Sans MS;
font-family: Geneva, Tahoma, sans-serif;
font-family: Georgia, serif;
font-family: "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
font-family: "Lucida Grande", Lucida, Verdana, sans-serif;
font-family: Optima, "Trebuchet MS";
font-family: 'Trebuchet MS', Helvetica, sans-serif;
font-family: Verdana, Geneva, sans-serif;
font-family: Arial;
font-family: "Arial Black";
font-family: "Arial Narrow";
font-family: Impact;
font-family: 'Bookman Old Style', serif;
font-family: "Century Gothic", Arial, Geneva, Verdana, sans-serif;
font-family: 'Palatino Linotype', 'Book Antiqua', Palatino, serif;
font-family: Tahoma, Geneva, sans-serif;
17
The font-family property is a prioritized list of font family names and/or generic family names for an element.
The browser will use the first value it recognizes.
Web-safe fonts are those fonts likely to be present on a wide range of computer systems, and are used by
web content authors to increase the chance that content will be displayed in their chosen font. If a visitor to a
website does not have the specified font, their browser will select an alternative. The a list of fonts above are
safe to use on your web pages as they are installed on both Macs and PCs.
17. How to change the fontsize and fontweight of the SidebarHeader?
By default the font-size of the sidebarheader is 16px.
Decrease the font-size with this css code in the Custom CSS (Page-Inspector > Header > CSS):
#sidebarContainer .sideHeader {font-size: 12px;}
More about the sidebarheader: see chapter 21.
18. SearchBox in the ExtraContent area
You can add a searchbox in the sidebar, content or in any ExtraContent area, but I would prefer EC4 or EC5.
How to do this?
1. Add a RapidSearch Page to your project: http://www.nimblehost.com/store/rapidsearch/
Read the Users Guide.
2. Paste the code below as plain text in the sidebar when you would like the search bar above the Menu:
<div id="myExtraContent4">

<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”.
-------------------------------------------------------------------------------If that code is not working, try this:
Make sure you name the RapidSearch page folder "search".
And then, paste this code as plain text in the sidebar:
18
<div id="myExtraContent4">

<form action="http://www.url-of-your-website.com/search" method="get">
<fieldset>
<input type="text" name="query" value=""/>
<input type="submit" value="Search"/>
</fieldset>
</form>
</div>
Do not add index.html or index.php because for some reasons RapidSearch won't work with the absolute url.
-------------------------------------------------------------------------------Replace myExtraContent4 with myExtraContent 1, myExtraContent 2, myExtraContent 3, myExtraContent 4,
myExtraContent 5 or myExtraContent 6 in the code above when you prefer it in another EC area. Preferable
not in EC7!
3.When you would like to have another, more "transparent"
look of your searchbox, go to the Theme Styles > Hide and
Show and select “Show Clean Searchbox Look”:
This is an example with and without the CSS code below:
Now you can choose the colors in the Theme Styles > Colours:
19
You can select this option with the Contact Form too: really very nice. But with a Formloom page there could
be some issues.
4. The important part being the <form> action attribute. This implementation requires:
1. You have to set your Base URL in the Site Setup window.
2. Add a RapidSearch page at the top of the RapidSearch page hierarchy.
3. Set the foldername of the RapidSearch page to "search".
4. Set the filename of the RapidSearch page to "index.html" or "index.php".
19. 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="myExtraContent4"><script language="JavaScript">
function number(x) {
if (x==1) return "one"; if (x==2) return "two"; if (x==3) return "three";
if (x==4) return "four"; if (x==5) return "five"; if (x==6) return "six";
20
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>
Replace myExtraContent4 with myExtraContent 1, myExtraContent 2, myExtraContent 3, myExtraContent 4,
not in EC7!
21
20. Date (US and European) in the ExtraContent area
Paste the code below as plain text in the Sidebar when you prefer a US Date:
<div id="myExtraContent4">
<script>
var mydate=new Date()
var year=mydate.getYear()
if (year < 1000)
year+=1900
var day=mydate.getDay()
var month=mydate.getMonth()
var daym=mydate.getDate()
if (daym<10)
daym="0"+daym

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>
The code explains which parts can be changed.
not in EC7!
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()
22
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>
The code explains which parts can be changed.
not in EC7!
21. 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):

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

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!
not in EC7!
22. Using RapidCart
With Rapidcart there are some issues with both themes. So you have to paste this in the Custom CSS (PageInspector > Header > CSS):
A. With the XXL-r Right theme (so the Menu at the right side):
#container,#containerstrip,#containerborder,#strip {left: 30px;}
#strip {top: 35px;}
#container,#containerstrip,#containerborder,#strip {left: 15px;}}
#container,#containerstrip,#containerborder,#strip {left: 0px;}
#strip {top: 0px;}}
B. With the XXL-r Left theme (with the Menu at the left side):
#container {padding-left:30px;}
#strip {top: 35px;}
#container {padding-left:15px;}}
#container {padding-left:0px;}
#strip {top: 0px;}}}
24
23. Sliding-effects of the Menu
By default the Menu slides from the left side of the browser to the right side of the Container. I’ve added 4
different snippets in the download-file:
XXLBottom to Top.rwsnippet, the XXLRight to Left.rwsnippet, theXXLStop.rwsnippet and the
XXLTop to Bottom.rwsnippet.
These snippets need to be installed so that RapidWeaver can find and use them. Once you've downloaded the snippets
double-click on a Snippet to install it just like a Theme.
Quit RW and install the other snippets in the same way. Alternatively you can drag the Snippets to the folder ~ Library/
Application Support/RapidWeaver/Snippets. Once installed you need to restart RapidWeaver for the changes to take
effect.
Then from the View Menu you can access the Snippets Window. From there you can simply 'Drag and Drop' the code to
the required area, in the Custom Header (Page-Inspector > Header > Header), see image left.
When you for example would like to hide the sliding-effect install the XXLStop.rwsnippet. With the XXLBottom
to Top.rwsnippet the movement of
the menu goes from the bottom to
the top.
And so on.
24. Text-Shadow to
Menu, Title and/or
Slogan
When you prefer a text-shadow to
the Title go to the Page-Inspector
> Theme Styles > Hide and
Show and select "Show Title TextShadow".
When you like more shadow to
the Title paste this in the Custom
CSS (Page-Inspector > Header >
CSS):
#pageHeader h1 {text-shadow:
2px 2px 6px rgba(0,0,0,0.35);}
or a hard shadow:
#pageHeader h1 {text-shadow: 5px 5px 0px rgba(0,0,0,0.20);}
25
Replace h1 in the codes above with h2 for the Slogan, for example:
#pageHeader h2 {text-shadow: 1px 1px 1px rgba(0,0,0,0.20);}
When you prefer a darker shadow increase the number 0.20. For example 0.65 or whatever.
And another hard shadow to the Menu:
#navcontainer {text-shadow: 5px 5px 0px rgba(0,0,0,0.06);}
Internet Explorer 7 and 8 don't support CSS3 text and box shadows!
25. Hide the Breadcrumb Container
When you have enabled the breadcrumb-container in the Site-Setup you can hide it one a page with this in the
Custom CSS:
#breadcrumbcontainer {display: none;}
26. Center the Title/Slogan/Footer
Center the Title/Slogan, Footer and Breadcrumb with this in the Custom CSS (Page-Inspector > Header >
CSS):
#pageHeader h1,
#pageHeader h2,
#footer,
#breadcrumbcontainer {text-align: center;}
27. Underline Links
By default the links in the Content are not underlined. You can select any color in the
Theme Styles > Colours. When you prefer underlined text decoration paste this in the Custom CSS (PageInspector > Header > CSS):
a:link {text-decoration: underline;}
28. Transparent background to the inputfields of a Contact Page
By default the background of the inputfields of a Contact Page is white (or any other color in the Colour
Palette).
When you paste this in the Custom CSS (Page-Inspector > Header > CSS) you'll see transparent input fields:
.form-input-field,input[type="text"]{background: transparent !important;}
.form-input-field:hover,input[type="text"]:hover{background: #000000 !important;}
When hovering the input fields get black. #000000 is the HTML color for black.
All HTML colorcodes: http://www.computerhope.com/htmcolor.htm
26
29. Hide Content with the Hide 'n' Show stack
With the Hide 'n' Show stack by Tsooj Media you can hide and show the content and the menu so your visitors
can have a better look to the background image or a background slideshow (made with the bgstretcher stack).
Drag this stack into a Stacks2 page and go to the Side panel of this stack (see image). Now select the
ExtraContent6 area and paste this in the input field behind "Content ID(s)":
#container, #borderstrip, #strip, #containerstrip, #containerborder, #strip2, #navcontainer
When you paste this (so without #navcontainer) only the Title, Slogan and Content text will be visible when you
click on "Hide Content":
#container, #borderstrip, #strip, #containerstrip, #containerborder, #strip2, #navcontainer
And with this you can hide the Title, Slogan and Footer too:
#pageHeader h1, #pageHeader h2, #footer, #borderstrip, #strip, #containerstrip, #containerborder, #strip2,
#navcontainer
And when you would like to hide the Background Image only paste this in the input field:
img.bg
When you would like to hide other ID's please contact me. Never put a comma behind the last ID!
27
30. Hide Horizontal Line(s)
When you make your browser narrower you'll see two horizontal lines below "Sidebar" and "Menu", see image
below:
When you don't have content in the Sidebar or in the EC4 or EC5 area and you don't like both lines you can
hide the bottom line (green arrow) paste this in the Custom CSS (Page-Inspector > Header > CSS):
#container{border-top:none;}
And when you would like to hide the top line (blue arrow) too paste this too:
#menu-icon,#sb-icon {border-bottom: none;}
31. Social Media Icons
There are different ways to put your social media icons in the content, sidebar or an ExtraContent area
With the built-in social media icon fonts:
1. Insert the following code (this example is a Twitter icon) in the Sidebar area within RapidWeaver:
<a class= "social" href= "#">L</a>
When you prefer it in the ExtraContent4 area insert this code between
<div id="myExtraContent4"> and </div>
so:
<div id="myExtraContent4"><a class= "social" href= "#">L</a></div>
28
2. Replace the # in this code with the page URL of your social icon. When you replace the # with
http://www.website.com" target="_blank” (so add only target="_blank”) the website opens in a new
window.
3. Replace the letter L with the corresponding symbol of the social icon of your choice using the chart on the
next page.
4. 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”.
5. For multiple social icons, repeat the above steps for each desired icon. So for example a Twitter, Facebook
and Skype icon:
<a class= "social" href= "#">L</a> <a class= "social" href= "#">F</a> <a class= "social" href= "#">H</a>
and within the ExtraContent4 area:
<div id="myExtraContent4"> <a class= "social" href= "#">L</a> <a class= "social" href= "#">F</a> <a class=
"social" href= "#">H</a> </div>
In Preview your icon(s) show up in the EC4 container. Choose another number when you want the icons in
another EC area.
6. In the Theme Styles > Colours you can choose a color and hover color:
7. Size of your icon.
When you would like another font-size (for example 30px) and/or more letter-spacing (for example 9px) paste
this in the Custom CSS (Page-Inspector > Header > CSS):
a.social {
font-size: 30px;
letter-spacing: 9px;}
The letter-spacing is by default 5px. The font-size is by default 40px. Any size is possible.
8. Each icon a different color.
When you would like to have a different color to each icon do replace this
<a class= "social" href= "#">L</a>
With this:
<a class= "social" href= "#"><div style="color: #ff0000;">L</div> </a>
As you can see I’ve added the red part before and after the L
#ff0000 is the HTML color for red. Any color is possible with another HTML-color, see this page with all color
codes. You can do this for each icon. A hover color is not possible now.
29
When you prefer other social media icon images (png, jpg or gif images), so “real” images:
B. Paste this in the sidebar or content as plain text (and now select the complete code and go to RapidWeaver
> Format > Ignore Formatting. That pinkish hue means that portion has been marked as “Ignore formatting”):
Now drag your icons between
<div id="myExtraContent4"> and </div>
In Preview your icons show up in the EC4 container. Choose another number when you want the icons in
another EC area.
C. Drag your icons in an ExtraContent stack and select EC4 in the side panel of the stack. In Preview your
icons show up in the EC4 container. Choose another number when you want the icons in another EC area.
D. Drag the Sprightly stack into an ExtraContent stack. With the Sprighly stack you can create stunning
rollovers from a single image. My demo site shows some examples.
Below is the chart with the corresponding symbol of the social icon of your choice:
32. 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, Fontstyle and FontColor
30
The <font> tag specifies the fontsize and fontcolor.
<font size="3">Text</font> Text
<font color="#FF0000">Text</font>Text *
<b>Text</b>Text (bold)
<i>Text</i>Text (italic)
* 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
<A href="http://www.mywebsite.com">My Website</A>
How to use an Image as Link
Add your image(s) with PageInspector > Page Assets.
<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
<A href="mailto:[email protected]">Contact Me</A>
<A href="mailto:[email protected]">Steve Jobs</A>
33. EXTRA
• HEIGHT HEADER
Some people like to have an option to control the vertical size of the pageHeader (Title/Slogan/Logo area),
which makes it easier to align your logo. To do this paste this in the Custom CSS:
#pageHeader {height: 125px;}
#pageHeader {height: 125px;}}
31
@media screen and (max-width: 480px) {
The heights of the pageHeader (in magenta) are examples! You can change them but check in Preview and
you make your browser smaller.
Depending on the width, the Title and/or Slogan might suddenly occupy more than one line, so this will change
your height requirement. A really narrow window will also move the logo graphic to the top, even if it is
normally displayed to the right.
So a custom height is needed for that particular range of window width. Basically I found that there is no
predictable scheme that would work. Figure it out by trial and error for each of five different window widths.
Since nobody will use exactly the same combination of Title font size, Slogan font size, and Logo graphic size,
everyone will face this task.
• HIDE “SIDEBAR” text and/or ExtraContent in mobile mode.
On your mobile the content in the sidebar will be above the other content. By default it’s closed. When you
click on the ‘SIDEBAR’ icon it appears and the content will be visible.
When you don’t have content in the sidebar please enable the button “Hide Sidebar in the Theme Styles >
Sidebar Font-Size • Hide Sidebar. Now the text “SIDEBAR” will not be visible in mobile mode.
When you have content in the sidebar and/or the ExtraContent6 and don’t want to show this in mobile
mode(for example when you have ads or not important content in it), you can hide it on your mobile with this in
the Custom CSS (only the EC6):
#myExtraContent6 {display:none;}}
Or the sidebar:
#sidebarContainer #sidebar,#sb-icon,
#sb-icon:hover,#sb-icon.active {display: none !important;}
#menu-icon {width: 100% !important;}}
Or only the ExtraContent6 in mobile mode:
#myExtraContent6 {display: none;}}
Or both:
#sidebarContainer #sidebar,#sb-icon,
#sb-icon:hover,#sb-icon.active {display: none !important;}
#menu-icon {width: 100% !important;}
#myExtraContent6 {display: none;}}
32
• DISPLAY or HIDE ‘MENU’, ‘SIDEBAR’ AND LINES
When you would like to hide the horizontal lines in mobile mode paste this in the Custom CSS:
When you would like to hide the sidebar text and horizontal lines in mobile mode paste this in the Custom
CSS:
#sb-icon {display: none;}
Please check these changes in preview when you make your browser smaller.
34. Make your images fluid (responsive)
Built-in is an option to make your images fluid (responsive), whether they are in the content or in the sidebar
(anywhere in your page). Very simple, read the next page.
33
• Option 1: Drag your image in the content or sidebar, double-click on it or go to RW > View > Show Media
Editor: now the Media Editor shows up. Only add the word flexible in the input field of the Alt Tag in the Media
Editor (image left) or in an image stack (image right):
To see it in
action, open the
content on a
desktop browser
and slowly make
the browser
narrower and
wider... Or have
a look on your
iPhone or iPad.
• Option 2: When your image is on the server (here's a nice tutorial about image warehousing for
RapidWeaver projects) simple paste this in the content or sidebar as plain text:
<img src="http://www.website.com/images/image1.jpg" alt="flexible">
So, with alt="flexible" behind the image link.
Test a working example in your website and have a look in preview:
<img src="http://www.henkvrieselaar.com/tulips/tulip3.jpg" alt="flexible">
------------------------------------------------------------------------------------------------------------------------------------------HV-XXL-r may not be resold or redistributed without the express written permission of Henk Vrieselaar:
http://www.henkvrieselaar.com/rapidweaver/contact/
October2012 - 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.
34

Manual - Henk Vrieselaar

Transcription

Similar documents

Final Fantasy VII Piano Collections

Published in Western Horseman - July, 2001

View our Events Brochure

www.moe.gov.om

Untitled - CooGiE`s Cafe Santa Monica

PERPUSTAKAAN SULTAN ABDUL SAMAD CUSTOMER

ShowStyle Briefcase Display

CSS for Page Layout

Paul Oakenfold One Sheet