Some important Information about the Drawer Theme
The Photo Album
There is not much to tell you about using the reinvented photo album page, as it works just out of the box. But note that it isn’t possible to use it the standard way (so a separate page with the image will open). I think it is much nicer the way it works now using mediaboxAdvanced.
The best way to see what I mean is by trying it out:
- Create a photo album page
- Switch to Preview Mode
- Click on any image
The Menu Morph
The Drawer Theme includes the possibility to morph between the active/normal state of a menu item. Some people likes it, some don’t. So, I added the possibility to enable/disable the menu morph in the style variations.
Split Navigation
The Drawer Theme uses Split Navigation for the layout. This means that all top navigation items will be put in the top bar and all subpages in the sidebar menu. Note that at the moment only 3 navbar levels are supported.
Add Extra Content to Header/Footer Section
I tried to make it as easy as possible to add your own content to the header or footer area. Here are the needed instructions:
1. The first thing you should do is installing the included snippets by simply double-clicking them (extension "rwsnippet"). Restart RapidWeaver afterward and you should find the snippets in the Snippets window.
2. You probably need to know how much room you have for your content. Especially when using extra content in the header you need to set the right header height in the style variations. If you plan to import fixed width content (e.g. using blocks, a flash movie, image, …) you should adjust the sizes. If you are using content with fluid width (e.g. with the Stacks Plugin by yourhead or by adding content inline) you don’t have to worry much about the dimensions.
3. Create your content according to the dimensions you have chosen. It doesn’t matter how you create your content. The easiest way probably is using another page for the content (e.g. a blocks/stacks page), laying out the content there.
4. The next step will be to import your custom header to the target page. I really recommend you use the PlusKit plugin for this, as it makes this step very easy:
Add the following code anywhere on the page you wan’t to import your header:
<div id="addToHeader">@import((PageHeader))</div>
The String in brackets (PageHeader) is the name of the page header page you have. It’s the best to copy/paste it so you won’t make any mistake here. Note that it’s the name displayed in the page drawer at the right and not the folder or file name in the page inspector.
Mark the code above and select Format->Ignore Formatting from the menu bar
Now, preview the page and if you haven’t made any mistake, the header should be imported on the page
If you don’t use the PlusKit Plugin, you have to manually insert the HTML code:
- Enter the Source View Preview of the header page
- Select all code between the opening and closing div with the ID "content" and copy it
- Switch to the target page and insert the copied code into the opening and closing div of the "addToHeader" section. Here’s an example:
<div id="addToHeader"><p>This text will be shown in the Header</p></div>
Mark all code and select Format->Ignore Formatting from the menu bar
Now, preview the page and if you haven’t made any mistake, the header should be imported on the page
Adding content to the footer works the same as for the header (just replace the string of the div id "addToHeader" with "addToFooter")
DBM
Richardet Design
Studio Share
In the Drawer theme, how do you link the logo field to a site’s home page (i.e. clicking on the logo in your browser returns the visitor to the home page)? Does this require using Java or html? I’m a total newbie so explicit instructions would be much appreciated. Thanks!
You need to use javascript. Add the following code to the javascript field in the page inspector:
function goHome() {$$('#logo img').addEvent('click', function() {
location.href='/';
});
$$('#logo img').addEvent('mouseover', function(e) {
new Event(e).stop();
$$('#logo img').setStyle('cursor', 'pointer');
});
$$('#logo img').addEvent('mouseout', function(e) {
new Event(e).stop();
$$('#logo img').setStyle('cursor', 'default');
});
}
window.addEvent('domready', function(e) {
goHome();
});
And to make the cursor change to pointer, you should add the following code to the css field in the page inspector:
#logo img {
position: relative;
z-index: 500;
}
Of course, if you want the user to be directed to anywhere else than the site root, you need to change the URL string in the javascript code.
Great, thank you!!!
I like ability to add items so easily to the header or footer of pages using the enclosed snippets. I’m using the footer for a series of quotes – it would be even better if I could rotate them or randomise them. I’m sure there’s a script that would do it but I always worry about overloading the pages with script – any ideas Chris ?
Alastair