Where are we?

The layout is good to go. Let’s deal with some font issues.

This lesson’s goals

By the end of this lesson, you should know how to make common font changes, with the help of Firebug.

We’ve got a few things to deal with. The site name is too small, the vertical gap between some things is too small, and the mouse over effects are not very attractive.

Onward!

Making the site name bigger

Here’s that we have.

Figure 1. Big subtitle

The subtitle is bigger than the title. Let’s make the title bigger.

Do this is two steps:

• Find the HTML and CSS that makes the thing we want to change.
• Change it.

Firebug makes the first one simple. Start Firebug, and click the Inspect button on the toolbar. Click an element on the page, and Firebug will show you the HTML and CSS that made that element.

Isn’t Firebug w00fy?

Firebug told me that the CSS for the title was at line 65 of styles.css. Here’s what’s there:

#logo a {
  text-decoration: none;
  text-transform: lowercase;
  font-style: italic;
  font-size: 18px;
  color: #5C722A;
}

Figure 2. 18px

In line 69, I’ll change the font size from 18px to 36px, and save. Now I have:

Figure 3. Larger title

W00f!

Gappity gap

Here’s part of the template:

Figure 4. Vertical gap too small

The vertical gap between the lines is too small.

Firebug pointed me to this code:

<div id="content">
  <h2>[PAGE TITLE]</h2>
  <h4>[PAGE SUBTITLE]</h4>
...
#content h2 {
  margin: 0;
  padding: 0;
  padding-top: 10px;
  color: #F5FFDC;
}
...
#content H4 {
  margin: 0;
  padding: 0px;
  font-size: 12px;
  color: #F5FFDC;
}

Figure 5. Code to fix

Here’s what I changed it to:

#content h2 {
  margin: 0 0 10px 0;  /* Changed */
  padding: 0;
  padding-top: 10px;
  color: #F5FFDC;
}
...
#content H4 {
  margin: 20px 0 5px 0; /* Changed */
  padding: 0px;
  font-size: 12px;
  color: #F5FFDC;
}

Figure 6. Changes

I added 10 pixels to bottom of the page title with:

margin: 0 0 10px 0;

Recall that the first number is the top margin. Then you go clockwise. The second number is the left margin, the third is the bottom margin, and the fourth is the left margin.

The subtitle margins became:

margin: 20px 0 5px 0;

Twenty to the top, and five to the bottom. This means that when two subsections are in a row, the content will look like this:

Figure 7. Spacing between sections

In this case, the subtitle is being used as a section heading.

Because there’s more space above the title than below it, it’s clear where a new section starts.

Here’s another problem:

Figure 8. Another vertical gap too small

The gap between the bottom of the title and the first link is too small. It would also look better if the links were pushed to the left a little.

Here’s what Firebug pointed me to:

<div id="sidebar">
  <h3>[SIDEBAR HEADING]</h3>
  <ul>
    <li><a href="#">Link 1</a></li>
    ...
  </ul>
  ...
</div>
...
#sidebar ul {
  list-style: none;
  margin-bottom: 10px;
  background: url(images/title_back.gif) repeat-x top;
}

Figure 9. Link list

All of the links are contained in the <ul> (lines 3 to 6). If I add space at the top and left of the <ul>, that would do it.

Check out line 12:

margin-bottom: 10px;

That’s adding space, but only at the bottom. What if I changed it to:

margin: 10px;

The margin would go on all sides. Let’s see what it looks like:

Figure 10. Margins all around

W00f! That’s it!

Well, almost. I’d like a vertical gap above the sidebar heading. Bring it away from the dark green a little.

Figure 11. Sidebar spacing problem

I open Firebug, click on the inspect button, and click on the sidebar heading. Firebug tells me that I need to look at the #sidebar H3 rule in styles.css, line 127:

Figure 12. Sidebar in Firebug

I added:

margin-top: 12px;

to the #sidebar H3 rule. I tried different values; 12px seems about right. Here’s the result:

Figure 13. Sidebar fixed

W00f! W00f! We’re getting it done!

Mouse over

Here’s the menu button effect. Move your mouse over the links below:

When the mouse hovers on a link, three things happen:

• The background changes from green to white.
• The text color changes from white to green.
• The text is underlined.

There’s a high contract between the white and green. Giles thinks the effect is jarring. He wants this:

When the mouse goes over the links, there is only one change:

• The background changes from green to lighter green.

It’s a less dramatic effect. He thinks it’s more suited to a poetry site.

Here’s the code that matters for this change:

<div id="menu">
  <ul>
    <li id="button1"><a href="#" title="">Home</a></li>
    ...
  </ul>
</div>
...
body {
  background: url(images/back_all.gif) repeat-x;
  ...
  color: #000000;
}
...
#menu a {
  ...
  text-decoration: none;
  color: #ffffff;
  ...
}

#menu a:hover {
  ...
  text-decoration: underline;
  color: #5C722A;
  ...
  background: #ffffff;
}

Figure 14. Old code for mouse effects

The menu items are all <a>s inside the container menu (line 3). Recall that a:hover (lines 21 to 27) sets the style the browser uses when the mouse is over the link. When the mouse is not over the link, the regular a style (lines 14 to 18).

The background of a is set by the body style. The image back_all.gif has green at the top, where the menu appears. So the background of the image is green.

When the mouse is not over the link, there is no underline on the link (line 16), and the text color of a is white (line 17).

When the mouse moves over the link, a:hover is activated. The text is underlined (line 23), and set to green (line 24). The background is changed to white (line 26).

How to get the look Giles wants? We’ll get rid of the underlining change (line 23) and the text color change (line 24). For the background color (line 26), we’ll switch to light green rather than while.

Here’s the new code for a:hover:

#menu a:hover {
  ...
  background: #98B74C;
}

Figure 15. Code changes

W00f!

You can try the current site.

Summary

We changed some text stuff in this lesson. Font size, vertical spacing, and mouse over effects created by a CSS a:hover rule.

What now?

The template is looking good. Any changes to the graphics?