Raster Theme Important Notes

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 Raster Theme includes the possibility to morph between the active/normal state of a menu items. Some people likes it, some don’t. So, I added the possibility to enable/disable the menu morph in the style variations.

The Raster 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.

I tried to make it as easy as possible to add your own content to the header areas 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 and widths 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 left header:

<div id="addToLeftHeader">@import((PageHeader))</div>

According to this, the right header will be:

<div id="addToRightHeader">@import((PageHeader))</div>

And the footer:

<div id="addToFooter">@import((FooterPage))</div>

The String in brackets (PageHeader/FooterPage) 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 (example for the left header section):

- 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 "addToLeftHeader" section. Here’s an example:

<div id="addToLeftHeader"><p>This text will be shown in the Left Header Area</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 "addToLeftHeader" with "addToFooter")

The Raster Theme includes a very easy way to create tooltips on links in the content. The main purpose of tooltips is to give your visitors some clues about where they will be directed if they click on a link on the page. The tooltips implemented in the Raster theme are placed in a semitransparent layer which will be shown whenever you hover a link in the main content with the mouse [1]. They also follows the mouse pointer. The tooltips include the following two attributes you can give each link you create: the tooltip title is taken from a name attribute and a description taken from the title attribute of the link. The default of the Raster theme is to display tooltips but on some pages they don’t make much sense (e.g. photo album page), so there is an option to hide the tooltips in the style variations.

To create a tooltip you have to setup the link correctly:
[1] Select the link target and possibly write in the URL in the URL field
[2] Insert your content in the "Value" field of the title Attribute (note that you probably have to click on the small triangle next to "Custom Attributes" to expand the window). The text entered here can be simple text or HTML and CSS code (more on this below) and will be used for the Tooltip description
[3] Click on the Plus sign to add a second attribute to the list
[4] Double click on the new attribute’s name and change it to "name". Now, enter any title in the value field of the name attribute

Click the "Set Link" button to accept your changes.

As said above you can also use HTML/CSS code for the tooltips. So, here is an example I also used for the Tooltip above:

1) I added an image to be used in the tooltip to the page assets
2) I added the following code to the title attribute of the link:

Here is the Description of the Link Target. You can place any text here. Even <b style="font-size: 1.3em">HTML/CSS Code</b><br /><br /><img src="assets/handz_tool_image.gif" style="display: block; float: left; margin-right: 4px" />And so you even can use Images in the ToolTip! Of course you need to know some HTML/CSS to do this – a good reason to start learning

As you see I used inline styles to format my text and position the image. I don’t think the code above is hard to understand. The only thing you should be aware of is that you need to write the correct URL to the image source. If you haven’t renamed your pages in the page inspector (folder/file name) you simply prepend your image name with "assets/".

With the Raster Theme I started dropping IE6 support. But this doesn’t mean it doesn’t work – I only haven’t tested it. I also won’t further fix bugs for IE6.

The Raster Theme uses the latest mootools framework, which means it is prepared for future plugin releases. But this also means that some older Plugins which use former versions of the framework don’t work with this theme. I can’t test all Plugins but I know that the following ones have some problems:

- Collage 2 (Version 2.1 should already work but I haven’t tested it yet)
- Carousel

I am sure they will be upgraded soon (as Accordion already is). Until then, you could use an iFrame page to load that content into the page.