basic structure » sidebars » shadows

The luna Template Set

This objective of this tutorial is to give the reader a better understanding of the structure and layout of the luna template set. Before reading this tutorial, you should have a basic understanding of XHTML and CSS.

The menu at the top lists the various aspects of the template set that will be discussed. Note that this tutorial uses a single HTML page with multiple style sheets and javascript to achieve the paging effect, so your browser's back and forward buttons will not work. Instead use the menu at the top of the page and the next/previous section navigation at the bottom of the section.

The basic structure of the luna template set is shown below. div's are used to structure the document and each box shown is a single div. At the top of each div, the id and/or class associated with the div is listed.

Here are some notes about the various div's used:

Please remember that the following sections only describe how the CSS is implemented in the luna template set. With CSS there are always several different methods of achieving a certain layout, with each one having its own advantages and disadvantages.

Creating the Shadows

The corners of the shadow are created using .shadowtopleft, .shadowtopright, .shadowbottomleft, and .shadowbottomright containers. They are floated left and right (depending on which corner they need to go into) and have a corresponding background image, height and width set.

To fill in the area in between the left and right corners, a background image that repeats horizontally is set on .shadowtop and .shadowbottom. Similarly, to fill in the areas between the top and bottom, a vertically repeating background image is set on .shadowleft and .shadowright.

#wrapper
#contentheader
#ocwrapper .clear
#icwrapper .clear
#contentwrapper .shadowleft
.shadowtop
.shadowtopleft
.shadowtopright
.shadowright
#content
.shadowbottom
.shadowbottomleft
.shadowbottomright
#contentfooter