Diamond Theme: Important Notes
Some important information about the Diamond Theme
The Header Images
As you can see in the Header Images section of the theme variations, you will get the five default diamond headers and also five slots to add your own images. All images will be resized automatically to fill the whole page header. To get your own images in the page header there are two steps you need to take:
1. Notes on creating your images:
1. Choose a dimension that fits well as a header image (e.g. 800x200pixels).
2. Your images have to be in jpeg format
2. Adding the images: I suggest to use the included Diamond Image Header Utility (DIA) to add the images to the theme. This Application is described in another secion of this manual.
Now you can choose your custom images via the page inspector
Notes
• All images will be loaded when the pages loads. So try to minimize the file size as much you can. Large file sizes should not be a problem today. Also all images are (pre)loaded on the first site.
• Your custom images are scaled to fit the whole header, so there will be no background color problems if your image has not the proper size. But it is important not to choose a picture with small dimensions, so there won't be any "distortion".
The Page Styles
In the diamond theme you can choose between two page styles: Default and Splash. The splash layout is mostly used for the very first site your visitors will load (e.g. index.html). This opener screen consists of the site titles, the header image and some text you can write into the page content field in „Edit“ mode. Please note that this layout should not be used for a lot of text. A nice welcoming message and some notes about what your visitors will find on your site is the best. Sure you can add a link to the default site, so the user can go to your site by clicking on it (e.g. Enter my site).
The Navbar Variations
1) Under Navbar Placement you can select if you want to have the navbar rendered at the top in cascade mode or in the sidebar. Note that in the image you will see both variations, but in real only one of the navbars will be shown.
2) If you use Top Cascade in the Navbar Placement section, you have to define how many levels your navbar will have to render the correct height.
Sidebar Boxes
With the diamond theme it is really easy to build boxes in the sidebar. You only need to use a h1 header element for the title, followed by a p-Element. Here is an example:
<h1>This is a box title</h1><p>Here is the box content</p>
When you close the p-element, the box is ended. To use line breaks inside boxes you use the <br /> element, if you are using the sidebar in HTML mode. Mention that you need to add the p tag directly after the closing h1 tag, if you use the sidebar in styled text mode.
The colors of the boxes are automatically adjusted to match the overall background color of the sidebar
The Site Logo
If you want to include a site logo it should have the following dimensions, when using the navbar placement at the top:
height: 90 pixels, width: 90 pixels.
In that case your logo will be correctly centered.
Known Bugs and Fixes
Content Border in IE/Win
A strange bug which once again only appears in IE/Win. When you choose to not display the content border, the content background color also will not show - so the main content will get the same background color as the body background color. This is not nice, escpecially if you have choosen „white“ as your body background and „black“ for the content background color. In that case IE users would see a white font on a white background. I fixed the problem by making the content border in IE/Win transparent. At the moment I can‘t find another fix.
Floating left/right and clearing
When you float an image to the left or right (by applying „Align Image Left/Right from the Format menu) and clear this float by adding a style definiton of „clear: left/right/both“ in the main content the following content will be displaced below the sidebar. If you don‘t understand what I am talking about, you don‘t have to read further. As clearing can only be done in RapidWeaver by html code, only advanced users will use this. But if it should happen to you - when you really are a html-coder - that the floating/clearing is a problem I just want you to note that the only possibility to get around that problem is by
a) floating content to the opposite as the sidebar position (e.g. float an image right when the sidebar is on the left) and use a „clear: right“ afterward
b) don‘t use clearing definitions in the first section where also content of the sidebar is displayed.