Previous || Beginning of Primer || Next

In this session, we focus on the header division and explore in depth what we can do with the different kinds of elements it contains. We cover a lot here, but you can take it section by section.

You may remember from Under the Hood of the E2 Zen Theme that the header is one of the four top-level parts into which most E2 pages are divided. Start by thinking of an E2 page as a box that contains those divisions as four boxes within it. Each of the three division boxes also may contain other boxes, and so on. This is called the CSS box model.

The Header Division

The header division contains three parts, the search form division, an announcements division and a first-level heading that is identified with id='e2logo'.

In Nuts and Bolts: Understanding CSS Statements, we positioned the header at the top of the page (top: 0;), set it to extend all the way across the width of the page with no margins (left: 0; and right: 0;), and made the background color red (background-color: red;).

Now let's do more. First, change the position: absolute; to position: fixed; and submit the change. Now scroll the page and see what happens. The header should now stay visible at the top of the browser window even as you scroll down. I'm going to keep it this way, but you can change it back if you want.

Borders

You can put a border around any box. Let's play with the border first by inserting the following property and values into the header declaration.

border: solid medium white;

Note something cool here. You can declare more than one property value at a time. With the above, we specified a border that is solid in style, medium in width, and black in color. Try to make your border dashed, thick and green, or some nicer combination of your own choosing. Make sure you put a space between the value words (no commas or anything). Also, don't forget the colon after the property and the semicolon at the end.

The border style can be any of none, hidden, dotted, dashed, solid, double, groove, ridge, inset, outset or inherit. Try them out. You can also set the border separately for each side.

border-bottom: thick dotted blue; etc.

The different border properties can be set individually as well.

border-width: 15px; etc.

Margins and Padding

The padding property let's you can control the amount of space between the content of the box and the outside of the box (where the border would be if it had a border). You can separately control the amount of space between the outside of the box and the boxes around it with the margin property. Try inserting the following into your header declaration:

margin: 20px; or margin: 10%;
padding: 20 px; or padding 1em;

In the same way as for the border property, the following individual side declarations also work.

margin-top: 5px;
padding-bottom: 10px;
etc.

Thick borders and wide margins or padding may push your header content down into the content below it. That can be fixed by adjusting the position or the margin or padding of the division that comes just below the header division.

Backgrounds

In our first example, we set the background color of the header to red, but we can also use a picture for the background by simply specifying the URL of the image. Try this:

background-image: url(http://projectsanctuary.com/SPACE/images/01-star-best.gif);

Everything we've done so far in this session can be applied to any CSS 'box' element. Now let's look at the parts that are contained in the header box. We'll start with the logo text.

The Everything2 Logo

Add the following new declaration and then submit it.

#e2logo {
font-size: 100%;}

That will probably make your logo text too small. Try 200%. You get the idea, so make it a size you like. You have so many choices for styling fonts that it is really hard to present them all in one place, so I'll just list some individual properties and some main values for each.

font-family: times; 

(also try other font names, like Arial, Courier, etc.)

font-family: serif; 

(also sans-serif, cursive, monospace or fantasy)

font-style: normal;

(also italic or oblique)

font-variant: normal;

(also small-caps)

font-weight: normal; 

(also bold, bolder, lighter, or 100, 200, 300, ... 900)

font-stretch: normal; 

(also wider, narrower, ultra-condensed, extra-condensed, condensed, semi-condensed, semi-expanded, expanded, extra-expanded and ultra expanded)

font-size: xx-small; 

(also x-small, small, medium, large, x-large, xx-large, larger, smaller) You can also specify font size in units of em or pixels, or as a percent of the medium size.)

You can also use the 'font' property to specify several font property values at once, but the format and value choices are messy, so please consult a good CSS reference table. By now you should be able to understand such a table without too much study. For now, I'm going to go with:

#e2logo {
position: absolute; 
top: 10;
left: 0.6em; 
margin: 0; 
width: 30px;
font-size: 50px;
font-variant: small-caps;
font-weight: 100; 
font-family: monospace;
}

We're not quite done with the logo text yet. The text is a link so we can look at some special properties of text links. Consider the following.

#e2logo a:link {color: white; text-decoration: none;}
#e2logo a:visited {color: white; text-decoration: none;}
#e2logo a:hover {color: gray; text-decoration: none;}

These declarations use the pseudo-classes 'a:link', 'a:visited' and 'a:hover', which let you set properties for hyperlinks. Try them. They should make the 'Everything2" text white if it's not been clicked yet, white if it has been clicked, and gray when you move the cursor over it. The text-decoration: none part removes the underline from the link. When you put these pseudo-classes after the #e2logo specifier like above, the declarations will only apply to links within the elements that have 'id=e2logo'.

There is one more box within the header division, and that's the search form. Let's work on that now.

The Search Form

The search form division contains three elements that you can position or style. First, the entire box that is the search form division is specified by

#searchform {
}

You can add the same kinds of properties for positioning and borders we have already used. I'm going to use the following.

width: 400px;
border: solid thin red;
padding: 4px;
margin-right: .5em;
float: right;

The float positioning property pushes the search form box toward the right side of the header until something else stops it. In this case, nothing stops it. There are two parts inside the search form division that we can manipulate individually. The first is the input part.

#searchform input {
}

For this I'm going to use:

float: left;
margin-top:4px

The other part is the checkbox label text.

#searchform label {
}

I'm going to use the following properties and values.

width: 130px;
color: white; (This makes the text visible against a dark background)
margin-right: 2px;
font-family: sans-serif:
font-size: 75%;
font-weight: bolder;
text-align: left;
float: right;
clear: right;

If you want to understand these choices, try changing them one at a time to see the effect. Note the clear property. Try omitting that to see what it does.

That's what can be done with the header and it's contents. By now you've learned most of the basics. If you can identify the elements in the HTML of the rest of the page, you should be able to apply everything we've done so far to those as well.

Now is a good time to stop and think of overall design for placement, colors, text styles and sizes and so on so that you have a vision to work towards. A good utility site for color scheme design is Kuler by Adobe. You can create and try out color combinations and convert color codes there.

There's still a lot to learn though. In the next session we'll identify the remaining box elements and consider overall design cohesion and style with some intermediate tricks thrown in.

Previous || Beginning of Primer || Next