This section describes some important style variations only used in the Corners Theme
With the corners 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.
As you can see on the image the corner theme uses 4 images to be placed at the corners of the browser window and up to ten different header images. To exchange the included images with your own ones I recommend using the included image admin tool, which is also described in this manual.
Here are some important notes on the used images:
Notes for the header images
• Choose a dimension that fits well as a header image. The image should have the same width as the chosen width for content and a height that matches the chosen header height in the style variations
• Your header images have to be in jpeg format
Also the corner theme has the ability to place your own custom image in the corners of the browser window. As it is said before, they also are fixed positioned, which means they stay at the corners and will not scroll with the content.
Notes for the corner images
• Mention that it may see nice when the corner images overlay some part of the content, but this also means that the area below is not choosable and clickable anymore (e.g. hyper links). This may see“ a little bit strange to the users, as the area also can be empty or transparent. But also the transparent part of the image will overlay the content. Just keep this in mind when creating and using your own images.
• The corner images need to be in PNG format
• To offset a corner image you can use transparent borders/areas, as can be seen with the included butterfly images: the top and left/right margins are created by just using images with transparent areas on top and left/right.
General 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 page load.