Modifying an Existing Theme in Drupal 6: Part 2

Adapting the CSS

We’ve set up Tao as a subtheme of the Zen theme. As a result, the Tao theme relies upon a number of stylesheets, both in the Tao directory and in the parent theme’s directory. The good news is that we do not need to concern ourselves with hacking away at all these various stylesheets, we can instead place all our changes in the tao.css file, located in the Tao theme directory. Drupal will give precedence to the styles defined in the theme’s .css file, in the event of any conflicting definitions.

Precedence and inheritance

Where one style definition is in an imported stylesheet and another in the immediate stylesheet, the rule in the immediate stylesheet (the one that is importing the other stylesheet) takes precedence.

Where repetitive definitions are in the same stylesheet, the one furthest from the top of the stylesheet takes precedence in the case of conflicts; where repetitive definitions are in the same stylesheet, nonconflicting attributes will be inherited.

Setting the page dimensions

For this exercise, the goal is to create a fixed width theme optimized for display settings of 1024 x 768. Accordingly, one of the most basic changes we need to make is to the page dimensions. If you look at the page.tpl.php file, you will notice that the entire page area is wrapped with a div with the id=page. Open up the tao.css file and alter it as follows. To help avoid precedence problems, place all your style definitions at the end of the stylesheet.

Let’s modify the selector #page.

#page {
 width: 980px;
 margin: 0 auto;
 border-left: 4px solid #666633;
 border-right: 4px solid #666633;
 background-color: #fff;
}

In this case, I set page width to 980 pixels, a convenient size that works consistently across systems, and applied the margin attribute to center the page. I have also applied the border-left and border-right styles and set the background color.

We also need to add a little space between the frame and the content area as well to keep the presentation readable and clean. The selector #content-area helps us here as a convenient container:

#content-area {
 padding: 0 20px;
}

Formatting the new regions

Let’s begin by using CSS to position and format the two new regions, page top and banner.

When we placed the code for the two new regions in our page.tpl.php file, we wrapped them both with divs. Page top was wrapped with the div page-top, so let’s create that in our tao.css file:

#page-top {
 margin: 0;
 background-color: #676734;
 width: 980px;
 height: 25px;
 text-align: right;
}

The region banner was wrapped with a div of the same name, so let’s now define that selector as well:

#banner {
 background-color: #fff;
 width: 980px;
 height: 90px;
 text-align: center;
}

Setting fonts and colors

Some of the simplest CSS work is also some of the most important—setting font styles and the colors of the elements.

Let’s start by setting the default fonts for the site. I’m going to use body tag as follows:

body {
 background: #000;
 min-width: 800px;
 margin: 0;
 padding: 0;
 font: 13px Arial,Helvetica,sans-serif;
 color: #111;
 line-height:1.4em;
}

Now, let’s add various other styles to cover more specialized text, like links and titles:

a, a:link, a:visited {
 color: #666633;
 text-decoration: none;
}
a:hover, a:focus {
 text-decoration: underline;
}
h1.title, h1.title a, h1.title a:hover{
 font-family: Verdana, Arial, Helvetica, sans-serif;
 font-weight: normal;
 color: #666633;
 font-size: 200%;
 margin: 0;
 line-height: normal;
}
h1, h1 a, h1 a:hover {
 font-size: 140%;
 color: #444;
 font-family: Verdana, Arial, Helvetica, sans-serif;
 margin: 0.5em 0;
}
h2, h2 a, h2 a:hover, .block h3, .block h3 a {
font-size: 122%;
 color: #444;
 font-family: Verdana, Arial, Helvetica, sans-serif;
 margin: 0.5em 0;
}
h3 {
 font-size: 107%;
font-weight: bold;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
h4, h5, h6 {
font-weight: bold;
 font-family: Verdana, Arial, Helvetica, sans-serif;
}
#logo-title {
 margin: 10px 0 0 0;
 position: relative;
 background-color: #eaebcd;
 height: 60px;
 border-top: 1px solid #676734;
 padding-top: 10px;
 padding-bottom: 10px;
 border-bottom: 1px solid #676734;
}
#site-name a, #site-name a:hover {
 font-family: Verdana, Arial, Verdana, Sans-serif;
 font-weight: normal;
 color: #000;
 font-size: 176%;
 margin-left: 20px;
 padding: 0;
}
#site-slogan {
 color: #676734;
 margin: 0;
 font-size: 90%;
 margin-left: 20px;
 margin-top: 10px;
}
.breadcrumb {
padding-top: 0;
 padding-bottom: 10px;
padding-left: 20px;
}
#content-header .title {
 padding-left: 20px;
}

After you have made the changes, above, remember to go back and comment out any competing definitions that may cause inheritance problems.