1. 0. CSS Menu
2. 1. Colors & Images
3. 2. Cascading
4. 3. Layout I
5. 4. Layout II
6. 5. Layout III
7. 6. Custom Options

Creating an Atlas Quest Theme

Page Layout: Part II

In part I of the page layout, we discussed how to style the content section of Atlas Quest. This time, we'll take a look out the layout for the headers and footers at the top and bottom of almost every page on Atlas Quest.

Body Element

When creating a theme, start by styling the body element. It's like creating a painting. You apply the base layers first, then paint subsequent layers on top of it. body will always be the base layer, and it stretches from the very top of the page to the very bottom of the page. The background color and style you give to the body will be the most dominant color of your theme.

To visually see the extent of the body element, let's apply a thick, red border around it:

Now let's style it like you would while creating a new theme. Continuing with the ocean theme from Part I, here's the CSS used for the body:

There's nothing new about this. We set the background color and image. Most themes do not use a background image here, but a few such as this one does. If you do use a background image, you'll want to use a low-contrast image so any text displayed on top of it is still easily readable. Unlike the content section, however, it is generally okay to use a bright text on a dark background. The amount of text used in this section is limited to just a few links, and most people don't find it difficult to read a few words on a dark background. It's when there are sentences and paragraphs involved that you'll start hearing complaints about bright text on a dark background being difficult to read.

You'll notice that I didn't set the text color at all. We'll target the text color depending on what part of the header and footer the text is used in, so we'll set that later for the individual sections.

#headerBar Element

First, let's put a thick, red border around the #headerBar element to make it clear exactly what we are styling. For most themes, it's the area that composes of the graphic stretching across the top of the page with the words "Atlas Quest" applied on top.

It's the next layer of paint we apply to our theme, and we want to make sure it looks good against the body's background.

There's a lot more going on with this section. We set the text color, background color, and background image like we normally do, but there's a lot more styling going on. Most themes use a black, 2-pixel-wide border at the top and bottom of this section. It just looks nicer. border-width:2px 0 specifies that the border should be two pixels wide on the top and bottom of the element and 0 pixels wide (i.e. no border at all) on the left and right sides. Adjust the border thickness or color to suit your theme. If you look through the themes on Atlas Quest, you'll find Friday the 13th has a maroon border, while the moon landing theme has no top border, and the art gallery theme has no border at all. (In fact, the art gallery themes have a transparent background with no image so the wood paneling that makes up the body shows through, giving the impression that the #headerBar element isn't there at all. It is there, but effectively invisible.)

Margin and height need a little more explanation. Margin is how much space should be left around the outside of the specified element. It's similar to padding, except that padding is how much space should be left inside the edges of the element. A visual might help make the things more clear. Below, is an element inside of another element. By default, the only styles applied are background colors and borders so you can easily see exactly what the dimensions of each element are. We'll add margins and padding to see how it changes things.

Before we change anything, notice how cramped the text looks. By default, there are no margins and padding in effect. Now, let's add some padding with: .testElement2 { padding:1em; }

I've applied 1em of padding to all four sides of .testElement2, and you can see how that element expanded, giving a little space around the text. Let's specify a margin now, instead of the padding: .testElement2 { margin:1em; }

The text within testElement2 once again is looking very claustrophobic—as well it should since no padding was specified—but the element itself now has a small space completely around the outside of the element. Adding both a margin and padding: .testElement2 { margin:1em; padding 1em; }

Nice, the best of both worlds. The text in .testElement2 isn't so claustrophobic, and the element itself is set off from the containing blocks as well. The text in .testElement1 is still pushed against the sides of the containing block, however. Let's fix by adding: .testElement1 { padding:1em; }

The most interesting thing to note here is that the padding for .testElement1 and the margin for .testElement2 don't overlap, so the border for the inner box ends up 2em away from the border of the outer box.

So, to make a long story short, padding is how much space should be left just inside the element's border while margin is how much space should be left outside of it. When creating themes, depending on exactly what images you use and the effect you're looking to create, you may need to adjust the paddings and margins. The #headerBar element in particular tends to need tweaking.

Our ocean theme specifies: margin:5px 0 10px. This tells the browser to leave 5 pixels of space above the #headerBar element, no space on the sides, and 10 pixels below the element.

Many properties can be applied to one or more of the sides of the element including padding, margins, and borders. Each of those properties can have a value made up from anywhere between 1 to 4 numbers with a unit of measurement. For example:

If there is only one measurement, it is applied to all four sides. So that first example of padding:1em will add 1em of padding to all four sides of the element.

If there are two measurements, such as in our example of padding:1em 5px, the first measurement applied to the top and bottom sides while the second measurement applies to the left and right sides. In this case, the top and bottom of the element will have a padding of 1em while the left and right sides will have a padding of 5 pixels.

If there are three measurements, the first one applies to the top, the second one applies to the left and right sides, while the third applies to the bottom of the element. So using our example of padding:1em 10px 0 means that the top padding is 1em, the left and right paddings are 10 pixels, and the bottom padding is zero. If you use 0, it is not necessary to specify a unit of measurement. Zero pixels is the same as zero ems which is the same as zero centimeters which is the same as zero inches and.... you get the idea. Anything other than zero should have a unit of measure, however.

And finally, if four measurements are included, the first one applies to the top, the second one to the right side, the third one to the bottom, and the last one to the left side of the element. This gives you the complete control for specifying padding on all four sides individually.

In fact, anything with less than four measurements is simply a shorthand.

That's a long way to come, and unfortunately, you will need to make use of this information while creating your own themes. Fortunately, you don't need it very often. Most elements have pre-defined paddings and margins that work perfectly fine and never need to be adjusted. The one element you need to regularly specify a margin is #headerBar, while the padding is only used in a couple of limited locations as well.

Let's go back to our ocean theme header:

In this case, there's a margin of 5 pixels at the top of #headerBar and 10 pixels at the bottom of #headerBar and no margin on the left and right sides.

And finally, the last part of this element is height, in this case, 53 pixels. Most of the time, the height is determined automatically based on the contents of the element. Our background image is 63 pixels tall, however, and I wanted the entire height to show, not a pixel more, and not a pixel less. The height of the element, however, does not include the padding or margins on an element, which is why the height is marked as 53 pixels rather than 63 pixels. There's a 5-pixel padding on the element, on all four sides, by default. With a height of 53 pixels, plus a top padding with 5 pixels, plus a bottom padding with 5 pixels, we get the full 63 pixels of height.

The #headerBar element is the most complicated of the bunch. Breath easy. If you made it this far, the rest is easy!

#headerTitle Element

Next up, the #headerTitle. This element is the box in #headerBar that contains the words Atlas Quest. The background image used in the #headerBar element makes it difficult to read words that are on it, so this element is used to set up a background that's easy to read on.

In our ocean theme, we set the background color to white with no image. We also add a border since it looks better. (Not the thick, red border either!) The border is 2 pixels wide, solid, and a dark blue color. You can specify a text color here if you want, but I let the text color used in the #headerBar element 'bleed through' to this element.

See, I told you it was easy!

#headerSubtitle, #welcome, #footer, and #copyright Elements

I've combined these three sections because in all of my themes, they are always the same. You can specify different colors and backgrounds for each of these sections, but I've never found any particularly compelling reason to do so.

The #welcomeStats element is the nugget of information displayed in the upper-left corner of the page after you log in.

The #headerSubtitle makes up the section immediately before the #headerBar. This element will style the part that reads, "A Letterboxing Community" at the top of the page.

The #welcome element marks the area in the upper-right corner of the page that welcomes logged in members and gives those who are not logged in the opportunity to do so. The #footer is the area with links about the site, how to contact us, and terms and policies at the bottom of every page. The #copyright section is the copyright at the bottom of every page.

In all of them, I usually want the styles from the body element to show through, so no additional styling is necessary. Just be aware that you can style each section different from the others if it suits your purposes.

We are not done, however.

Now we need to set the link colors. These styles create the default link colors that will be used across the entire website—unless something more specific comes along to override these defaults such as the links we created for the #content section of the website in the previous lesson.

Almost always, you'll want a transparent background color with no background image so the color styles behind the link show throw—except for the hover links. Changing the background when the mouse cursor hovers over the link makes it visibly obvious that the link is ready for clicking.

Unlike the links in the #content section, here we do not distinguish between visited and unvisited links. You can use different colors, but I find different colors to be distracting more than helpful in this case.

A Full-Blown Example

Now let's look at a complete, real-life example of setting the headers and footers of the page, taken from the ocean theme:

1. 0. CSS Menu
2. 1. Colors & Images
3. 2. Cascading
4. 3. Layout I
5. 4. Layout II
6. 5. Layout III
7. 6. Custom Options