Tutorials

Create Sub Navigation

Sub pages are pretty straight forward, just click down and drag your intended sub page onto the page you want to have it displayed.

Photo Album Opacity

If you like the opacity to change on mouse-over paste the following code inside the Page Inspector > Header > Custom CSS box:

.thumbnail-frame img{
opacity:1;
-webkit-transition-property: opacity;
-webkit-transition-duration: 0.5s;
-webkit-transition-timing-function: ease-out;
-moz-transition-property: opacity;
-moz-transition-duration: 0.5s;
-moz-transition-timing-function: ease-out;}
.thumbnail-frame img:hover{
opacity:.85;}

Create CSS3 Accordions

We added a little bit of CSS3 love to this accordion. Want some too? Paste the following code inside the Page Inspector > Header > Custom CSS box:

h3.acToggle{ -moz-border-radius: 5px; -webkit-border-radius: 5px; -webkit-transition-property: background-color; -webkit-transition-duration: 0.5s; -webkit-transition-timing-function: ease-out; -moz-transition-property: background-color; -moz-transition-duration: 0.5s; -moz-transition-timing-function: ease-out;}

Use Google Font Directory

Google is hosting open-source fonts which can be used with your website*. Visit the font directory to see all available fonts.
Here is the code used to load Yanone Kaffeesatz (headings). Paste the following code inside the Page Inspector > Header > Custom Header box:

<link href='http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz' rel='stylesheet' type='text/css'>
<style type='text/css'>#header a, #navtitle, #contentarea h1, .blog-entry-title, #content .blog-entry-title a.blog-permalink, .album-title, .movie-page-title, #sidebar h1, .photo-background p.photo-title {font-family: 'Yanone Kaffeesatz', arial, serif;}</style>

Another example, loading the Droid Serif font:

<link href='http://fonts.googleapis.com/css?family=Droid+Serif' rel='stylesheet' type='text/css'>
<style type='text/css'>#header a, #navtitle, #contentarea h1, .blog-entry-title, #content .blog-entry-title a.blog-permalink, .album-title, .movie-page-title, #sidebar h1, .photo-background p.photo-title {font-family: 'Droid Serif', arial, serif;}</style>

* Fonts may not render inside Rapidweaver and can not be loaded if you are offline

Add Extra Content

The Stratum theme comes without Extra Content. In this tutorial we will explain how to add it yourself.

Open the Theme Drawer in Rapidweaver. Right-click the Theme Preview and select Duplicate Theme from the pop-up menu. Give it a clear name like Stratum Extra for example.

Again, right-click on the Theme Preview and select Reveal Theme Contents in Finder... A new Finder window will be opened and you will see a couple of files and folders. Now download the ExtraContent javascript file and drop it inside the css folder.
Open the index.html file and add these two lines inside the head (between <head> & </head>):

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/
jquery/1.4.2/jquery.min.js'></script>
<script type='text/javascript' src='%pathto(css/extracontent.min.js)%'>
</script>

For each Extra Content area you want, add the following line of code, somewhere in the body between (between <body> & </body>):

<div id='extraContainer1'></div>

If you want to have the Extra Content area below the navigation you need to put the previous line of code directly below the line which includes %toolbar%.
Save the index.html file. Now you have successfully added ExtraContent.

Add the following line of code either in the content area or sidebar and replace the User content goes here with your own content:

<div id='myExtraContent1'><!-- User content goes here --></div>

Now preview in Rapidweaver. Your content should now be visible. Maybe you can't see it because we have not yet made any styling.

Drop the following lines of code inside the Page Inspector > Header > Custom CSS field:

#extraContainer1{
 color: #fff;
 background-color: transparent;
 padding: 10px;
 margin: 0;
}

If you want to change the styling I recommend using CSSEdit. More information about ExtraContent can be found at the official website.