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 I

In the Colors & Images page, you learned three simple properties that allowed you to set the text color, the background color, and the background image. This page is about how to select which parts of the page you want to target with your colors and images.

To help see the sections we’re targeting, I will sometimes include the property: "border:10px solid red". This will surround the section being targeted with a solid red border. You won’t want to include it in your themes, however. It is simply to make the section being targeted ‘pop out’ so it’s obvious.

The Content Window

The main part of the page, after you skip past the header, is what I call the ‘content window.’ It has the meaty part of the webpage, that section between the top menubar and the bottom menubar. Atlas Quest labels this area as #content.

You’ll want to set the text color and background color for this section, and perhaps include an optional background images as well. Keep these things in mind while selecting colors and images:

• Select a dark text color on a light background color. A strong contrast is absolutely necessary just for people to read the text, but many people also have trouble reading light text on a dark background.
• If you include a background image, always include a background color to match it. The background color will show until the image has loaded, and if the image has transparent areas, the background color will show through. Use the most dominant color of the background image as the background color to reduce the visual shock when the background color is replaced by the background image.
• Background images, if you use them at all, should have a very low contrast throughout the pattern. A busy pattern with lots of light and dark areas is very difficult for people to text on.
• If you don’t use a background image, you should explicitly set it to ‘none’. The default backgrounds on Atlas Quest will sometimes use them, and unless you turn it off, it will ‘bleed through’ into your theme.
• Keep background images as small as possible so they load quickly—especially for folks on slow Internet connections.

Take a look at what I used for the ocean theme:

The background image is fairly small and is designed to repeat both vertically and horizontally to fill up the content window completely, so it loads quickly. I selected a background color that matches the main color in the image, so when the image does load, it’ll look more like the fish just appeared rather than the entire page refreshing. The background color and image are both light with a dark text applied to it so most people will have little trouble being able to read it.

Before we continue, let’s take a look at the exact CSS used for the ocean theme:

First, note that I combined the background color and background image into a single line. It’s quicker and easier than listing them separately, and I’ll use this shorthand method for the rest of the tutorial.

Second, there’s a line about ‘padding,’ whatever that is. This tells the browser that everything we put in the content window should have a certain amount of empty space between the sides of the container and the stuff it’s containing. In this case, we are telling the browser to leave 1em of space at the top of #content, 20 pixels of space on each side of #content, and no space at all at the bottom of the container. We don’t want the text of our page pushed right up to the edge of the browser—it looks disconcerting, so this padding helps add the space needed for the page to ‘look right.’ The gap at the bottom of #content doesn’t matter so much—we’ll be adding pictures to the bottom that will space things out instead.

A pixel is each dot you see on your monitor. The absolute smallest dot possible your monitor can make is one pixel. An em is, roughly speaking, the distance the letter m makes with the current font at the current size. As the text size increases, so does the length of an em. On Atlas Quest, you can set your preferred text size in your Usability Preferences, and if you switch sizes, you’ll notice the gap at the top of the content area will grow or shrink depending on the font size. The gap on the left and right side will stay the same—20 pixels—regardless of your preferred font size.

Corner Pictures

NOTE: This section is no longer applicable—this part of the tutorial needs to be updated, but it’s kept here for now to serve as more examples of CSS. Just know that corner pictures no longer work like this section describes.

Most themes also include small pictures in one or more of the corners of the content window. The ones in the upper two corners must be very small so as not to displace the real content too far down the page and load quickly. The bottom two corners can be a bit larger—they only displace the footer of the page, and it’s less noticeable if they load slowly—most pages on Atlas Quest have enough content where they won’t even be visible without scrolling down the page first.

Each corner is labeled as #contentCornerXY, where XY is either UL (upper-left), UR (upper-right), LL (lower-left) or LR (lower-right).

In this example, we set the width and height to 177 and 63 pixels respectively. You’ll need to find the size of whatever image you plan to use, expressed in pixels. The background color is transparent, so the color of the current theme will be displayed until the image is loaded by the browser.

Depending on the theme or the image being used, you may not want the corner image to show up squished directly into the corner, and we can control the position of the corner through the properties top, bottom, left, and right. In this case, I wanted the corner image to show up approximate one inch from the left side of the page. The left property, in this case, tells the browser to move #contentCornerLL so it is 1 inch away from the left side of the ‘containing block.’

The term ‘containing block’ needs some explanation. Pages are structured so elements can be nested within other elements. In this case, #contentCornerLL is nested inside of #content. So the property left:1in tells the browser to move #contentCornerLL one inch away from the left side of #content. Visually, it just looks better when the image isn’t crammed against the left side of the page.

Some images, however, are actually better when they’re crammed into the side of the page. Take the dragon from the Columbus Day theme, for instance:

In this case, we want it to look like just part of the dragon is showing itself, so we need the image pressed directly against the right side of the page, which we did with: right:-1em. You’re probably thinking, negative 1 ems? What’s up with that? The content window has a built-in padding of 1 em so the content itself doesn’t cram against the sides of the page. The top, bottom, left, and right properties don’t account for the extra padding, however, so we need to tell the browser to position the image -1 em from the right edge of #content.

When it comes to positioning the corners on your theme, I’ve simplified the explanation a bit. It’s actually a lot more complicated, and you’ll find that setting the bottom properties on the two corners tend to interfere with each other. You might use bottom:1in for the lower-left corner, then find it raised both corners by one inch. It’s mostly a matter of trial and error to get everything settled exactly where you want it. Position the corners one a time, starting with the top-left corner, then the top-right corner, then the bottom-left corner, then the bottom-right corner, then backtrack as necessary to fix anything that needs it.

The placement can be specified in several possible ways. I’ve used inches and ems in my examples, but you can also use centimeters (cm), millimeters (mm), pixels (px), points (pt), and percentages (%). Centimeters and millimeters are self-explanatory. Pixels are the smallest individual point your monitor can generate. Points are a unit often used in the print business. Percentages are a percentage of the containing block, and one I often use in my own themes. For example, left:20% would move the image 20% off from the left side of the page. If someone resizes the window, the image will move accordingly.

If you do not use an image for one of the colors, set the width and height of the corner to zero. The corner is still there, but it is essentially invisible and takes up no space.

Headers

You’ll typically see the main header at the top of the content window on every single page on Atlas Quest. Depending on the page, there may be additional sub-headers or even sub-sub-headers. On this page, "Creating an Atlas Quest Theme" is the main header and "AQ Page Layout" is the sub-header. There are several sub-sub-headers on this page, including "Titles" that denotes this section.

Each header is labeled as h1, h2, or h3 depending on the level, and you can style the different types of headers.

I like to make the main headers (h1) underlined and provide a background color to sub-headers (h2). The sub-sub-headers I leave unadorned, but you can style them however you like.

The headers for the ocean theme look like:

First I apply styles to all three header types so they have the same color, background color, and background image. Some themes use padding in the headers, but the ocean theme does not so those are cleared out by setting the padding to zero.

Then I apply the properties that distinguish the types of headers from one another. The h1 element gets a 1-pixel-wide, navy-colored, solid line as for the bottom border, while the h2 element has a 1-pixel-wide, solid bottom border using the color #64b1e7.

That last selector for h2 sets the background color and image, overriding the background color and image we set for it in the first selector. That’s part of the ‘cascading’ nature of Cascading Style Sheets. I wanted the h2 element to have the same text color and padding as the h1 and h3 elements, so I set all three at once. The background color and image was also set for all three, but the last selector overwrites them for the h2 element (and only the h2 element).

Additionally, there are two more pieces of information included with the background image on the h2 element: repeat-y left. The repeat-y tells the browser to repeat the image over and over again, but only in the vertical direction. By default, background images repeat on both the x-axis and y-axis, which is what we always wanted before, so we never changed the default. This image, however, is designed to fade out into a different color that matches the background color, and we want that background color to show through when the image ends. So we tell the browser to only repeat the image along the y-axis. All acceptable values that can be used include: repeat (the default, which repeats on both the x and y-axis), repeat-x (repeats only on a x-axis), repeat-y (repeats only on the y-axis), and no-repeat (does not repeat at all).

To get exactly the effect I was looking for, I also wanted the repeating image pressed directly against the left side of the h2 element, which I did with the left value. You can set the horizontal position of the image with left, center, or right; and set the vertical position of the image with top, center, or bottom. In this case, it doesn’t matter where the image starts on the y-axis—it just repeats over and over again and looks the same no matter where it starts.

Links

Links are marked with an a element, but you can assign several different colors depending on the state of the link. You can assign two different styles depending on if the link has been visited or not, and an entirely third different set of styles if someone hovers their mouse cursor over the link. Let’s look at the example from the ocean theme:

The first part is the color to use for a regular, run-of-the-mill link that has never been visited. I’ve had issues with how browsers handle the a and a:link selectors, so I like to specify them both. In this case, I set the color to a very dark blue.

For links that someone has already visited, the selector is a:visited, and use a slightly lighter color than the version used for non-visited links. It’s usually a good idea to make the colors for visited and non-visited links slightly different since people expect it and helps people readily identify where they have already been on a website. Most people use a brighter version for a visited link than a non-visited link, but that’s not a rule writ in stone.

The last selector, a:hover, specifies the styles to apply when you hover a mouse cursor over the link. In this case, we change the text color of the link to yellow and the background color to maroon with no background image. Changing the background color is a very common way to identify when a link can be clicked, so you’ll see me use that often for hover links.

So why did I start all of the properties with #content? The background colors used in the content section of the window are very different from the colors used in the header and footer of the page, and the #content part tells the browser in which section to apply the link colors. In this case, we wanted the link colors to show only in the content section of the page. Without that extra identifying detail, the links styles would have been applied to the header and footer instead and not in the content area like we wanted.

Logos

One of the most defining pieces of every theme is the logo. Our themes always include a yellow chick named Marjorie or a globe that the chick carries on its shoulder. Your own themes need no such limitations. You can make the logos any size you want, although anything larger than about 200 x 200 pixels starts to look clunky and doesn’t fit into the website well.