Customizing Drupal 6 Themes

From ThemesWiki

Jump to: navigation, search
Drupal 6
Official Page
Project Documentation
Download
Source Book
Building Powerful and Robust Websites with Drupal 6
Building Powerful and Robust Websites with Drupal 6
ISBN 978-1-847192-97-4
Publisher Packt Publishing
Author(s) David Mercer


Contents

[edit] Drupal's Interface

Working on a site's interface to make it distinctive and attractive not only requires some technical know-how when it comes to Drupal, but as with any design-like task, it also needs some creativity. Your site, at the moment, is fully functional and doesn't look awful it's a bit plain, but it will get the job done. With a bit of effort, creating something entirely new is not out of the question, and Drupal comes with a host of features to make our lives easier.

If, like me, you enjoy working on the more creative aspects of a website, then this is really the tutorial you have been waiting for. It's time to design, plan, and implement the visual environment in which users will be immersed. Creating a pleasing atmosphere in which to interact will certainly do a lot in terms of ensuring users are happy.

This tutorial will discuss the following:

  • Planning a web-based interface
  • CSS
  • Themes

There is quite a lot involved in coming up with an entirely fresh, pleasing, and distinct look for a site. There are lots of fiddly little bits to play around with, so you should be prepared to spend some time on this section after all, a site's look and feel is really the face you present to the community, and in turn, the face of the community presents to the outside world.

Take some time to look at what is already out there. Many issues that you will encounter while designing a site have already been successfully dealt with by others, and not only by Drupal users of course. Also, don't be scared to treat your design as an ongoing process while it is never good to drastically change sites on a weekly basis, regular tweaking or upgrading of the interface can keep it modern and looking shiny new.

[edit] Planning a Web-Based Interface

The tenet form follows function is widely applied in many spheres of human knowledge. It is a well understood concept that states the way something is built or made must reflect the purpose it was made for. This is an exceptionally sensible thought, and applying it to the design of your site will provide a yardstick to measure how well you have designed it.

That's not to say one site should look like every other site that performs the same function. In fact, if anything, you want to make it as distinctive as possible, without stepping over the bounds of what the target user will consider good taste or common sense. Customized website design & logo design Beauty Products Spy Pen Camera

How do you do that?

The trick is to relate what you have or do as a website with a specific target audience. Providing content that has appeal to both sexes of all ages across all nationalities, races, or religions implies that you should go with something that everyone can use. If anything, this might be a slightly flavorless site because you wouldn't want to marginalize any group of users by explicitly making the site bias towards another group. Luckily though, to some extent your target audience will be slightly easier to define than this, so you can generally make some concessions for a particular type of user and asigurari auto.

[edit] Visual Design

There's no beating about the bush on this issue. Make the site appear as visually simple as possible without hiding any critical or useful information. By this, I mean don't be afraid to leave a fairly large list of items on a page if all the items on that list are useful, and will be (or are) used frequently. Hiding an important thing from users no matter how easy it appears to be to find it on other pages will frustrate them, and your popularity might suffer.

How a site looks can also have a big impact on how users understand it to work. For example, if several different fonts apply to different links, then it is entirely likely that users will not think of clicking on one type of link or another because of the different font styles. Think about this yourself for a moment, and visualize whether or not you would spend time hovering the pointer over each and every type of different content in the hope that it was a link.

This can be summed up as:

Make sure your site is visually consistent, and that there are no style discrepancies from one page to the next.

By the same token, reading a page of text where the links are given in the same font and style as the writing would effectively hide that functionality.

There are quite a few so-called rules of visual design, which can be applied to your site. Some that might apply to you are: the rule of thirds, which states that things divided up into thirds either vertically or horizontally are more visually appealing than other designs; or the visual center rule, which states that the visual center of the page (where the eye is most attracted to) is just above and to the right of the actual center of the page.

You may wish to visit the website A List Apart at http://www.alistapart.com/ that has plenty of useful articles on design for the Web, or try searching on Google for more information.

[edit] Language

Now this is a truly interesting part of a site's design, and the art of writing for the Web is a lot more subtle than just saying what you mean. The reason for this is that you are no longer writing simply for human consumption, but also for consumption by machines. Because machines can only follow a certain number of rules when interpreting a page, the concessions on the language used must be made by the writers (if they want their sites to feature highly on search engines) Pepper Spray Seo Services Social Media News. Also check out these health insurance and auto insurance sites.

Before making your site's text highly optimized for searching, there are a few more fundamental things that are important to consider. First off, make sure your language is clear and concise. This is the most important; rather sacrifice racy, stylized copy for more mundane text if the mundane text is going to elucidate important points better. People have very short attention spans when it comes to reading Web copy so keep things to the point.

Apart from the actual content of your language, the visual and structural appearance of the copy is also important. Use bold or larger fonts to emphasize headings or important points, and ensure that text is spaced out nicely to make the page easier on the eye, and therefore easier to read and understand.

[edit] Images

Working with images for the Web is very much an art. I don't mean this in the sense that generally one should be quite artistic in order to make nice pictures. I mean that actually managing and dealing with image files is itself an art. There is a lot of work to be done for the aspiring website owner with respect to attaining a pleasing and meaningful visual environment. This is because the Web is an environment that is most reliant on visual images to have an effect on users because sight and sound are the only two senses that are targeted by the Internet (for now).

In order to have the freedom to manipulate images, you really need to use a reasonably powerful image editor. Gimp, http://www.gimp.org/, is an example of a good image-editing environment, but anything that allows you to save files in a variety of different formats and provides resizing capabilities should be sufficient.

If you have to take digital photographs yourself, then ensure you make the photos as uniform as possible, with a background that doesn't distract from the object in question editing the images to remove the background altogether is probably best. There are several areas of concern when working with images, all of which need to be closely scrutinized in order to produce an integrated and pleasing visual environment:

One of the biggest problems with images is that they take up a lot more space and bandwidth than text or code. For this reason, having an effective method for dealing with large images is required simply squashing large images into thumbnails will slow everything down because the server still has to download the entire large file to the user's machine.

One common mistake people make when dealing with images is not working on them early on in the process to make them as uniform in size and type as possible. If all the images are of one size and of the same dimension, then you are going to have things a lot easier than most. In fact, this should really be your aim before doing anything involving the site make sure your images are all as uniform as a given situation allows.

Deciding what type of image you actually want to use from the variety available can also be a bit of an issue because some image types take up more space than others, and some may not even be rendered properly in a browser. By and large, there are really only three image types that are most commonly used GIF, PNG, and JPG.

The intended use of an image can also be a big factor when deciding how to create, size, and format the file. For example, icons and logos should really be saved as PNG or GIF files, whereas photos and large or complex images should be saved in the JPG format due to how efficiently JPG handles complex images.

Let's take a quick look at those here.

GIF, or Graphics Interchange Format, is known for its compression and the fact that it can store and display multiple images. The major drawback to GIF is that images can only display up to 256 distinct colors. For photographic-quality images, this is a significant obstacle. However, you should use GIFs for:

  • Images with a transparent background
  • Animated graphics
  • Smaller, less complex images requiring no more than 256 colors

PNG, or Portable Network Graphics, is actually designed as a replacement for GIF files. In general, it can achieve greater file compression, give a wider range of color depth, and quite a bit more. PNG, unlike GIF files, does not support animations. You can use PNG files for anything that you would otherwise use GIFs for, with the exception of animations.

IE6 will not render transparency in PNG images correctly, so be aware that this may affect what people think about your site having ugly shaded regions around images can make your site appear to be of poor quality when in fact it is an aspect of their dated browser that causes the problem.

Incidentally, there is also an MNG format that allows for animations you might want to check that out as an alternative to animated GIFs.

JPG, or JPEG (Joint Photographic Experts Group), should be used when presenting photo-realistic images. JPG can compress large images while retaining the overall photographic quality. JPG files can use any number of colors, and so it's a very convenient format for images that require a lot of color. JPG should be used for:

  • Photographs
  • Larger, complex images requiring more than 256 to display properly
  • Be aware that JPG uses lossy compression, which means that in order to handleimages efficiently, the compression process loses quality.

Before we begin an in-depth look at themes that are responsible for just about everything when it comes to your site's look-and-feel, we will take a glance at CSS.

[edit] CSS

The pages in a Drupal site obtain their style-related information from associated stylesheets that are held in their respective theme folders. Using stylesheets gives designers excellent, fine-grained control over the appearance of web pages, and can produce some great effects. The appearance of pretty much every aspect of the site can be controlled from CSS within a theme, and all that is needed is a little knowledge of fonts, colors, and stylesheet syntax.

It will make life easier if you have a ready-made list of the type of things you should look at setting using the stylesheet. Here are the most common areas (defined by HTML elements) where stylesheets can be used to determine the look-and-feel of a site's:

  • Background
  • Text
  • Font
  • Color
  • Images
  • Border
  • Margin
  • Padding
  • Lists

Besides being able to change all these aspects of HTML, different effects can be applied depending on whether certain conditions, like a mouse hovering over the specified area, are met this will be demonstrated a little later on. You can also specify attributes for certain HTML tags that can then be used to apply styles to those specific tags instead of creating application-wide changes. For example, imagine one paragraph style with a class attribute set, like this: 

<p class="signature"></p>

You could reference this type of paragraph in a stylesheet explicitly by saying

something like: 

p.signature {

color: green; }

Analyzing this line highlights the structure of the standard style-sheet code block in the form of a:

  • Selector: in this case p.signature
  • Property: in this case color
  • Delimiter: always :
  • Value: in this case green

Note that all the property/value pairs are contained within curly braces, and each is ended with a semi-colon. It is possible to specify many properties for each selector, and indeed we are able to specify several selectors to have the same properties. For example, the following block is taken from the garland stylesheet, style.css, and is used to provide all the header text within the theme with a similar look-and-feel by giving them all the same properties: 

h1, h2, h3, h4, h5, h6 {

margin: 0;

padding: 0;

font-weight: normal;

font-family: Helvetica, Arial, sans-serif;

}

In this instance, multiple selectors have been specified in a comma delimited list, with each selector given four properties to control the margin, padding, font-weight, and font-family of the header tags.

It is important to realize that tags can be referenced using either the class attribute, or the id attribute, or both. For example, the following HTML: 

<p class="signature" id="unique-signature"></p>

...makes it possible for this tag to be referenced both as part of a class of tags all with the same property, or specifically by its unique id attribute. The distinction between the two is important because class gives broad sweeping powers to make changes to all tags within that class, and id gives fine-grained control over a tag with the unique id.

This introduction to CSS has been very brief, and there are plenty of excellent resources available. If you would like to learn more about CSS (and it is highly recommended), then visit:

We are ready to begin looking at

[edit] Themes

The use of themes makes Drupal exceptionally flexible when it comes to working with the site's interface. Because the functionality of the site is by and large decoupled from the presentation of the site, it is quite easy to chop and change the look, without having to worry about affecting the functionality. This is obviously a very useful feature because it frees you up to experiment knowing that if worst comes to worst, you can reset the default settings and start from scratch.

You can think of a theme as a template for your site that can be modified in order to achieve virtually any design criteria. Of course, different themes have wildly varying attributes; so it is important to find the theme that most closely resembles what you are looking for in order to reduce the amount of work needed to match it to your envisaged design.

Also, different themes are implemented differently. Some themes use fixed layouts with tables, while others use div tags and CSS you should play around with a variety of themes in order to familiarize yourself with a few different ways of creating a web page. We only have space to cover one here, but the lessons learned are easily transferred to other templates with a bit of time and practice.

Before we go ahead and look at an actual example, it is important to get an overview of how themes are put together in general.

[edit] Theme Anatomy

Some of you might have been wondering what on earth a theme engine is, and how both themes and theme engines relate to a Drupal site. The following two definitions should clear up a few things:

Theme: A file or set of files that defines and controls the features of Drupal's web pages (ranging from what functionality to include within a page, to how individual page elements will be presented) using PHP, HTML, CSS and images.

Theme engine: Provides PHP-based functionality to create your own unique theme, which in turn, gives excellent control over the all aspects of a Drupal site. Drupal ships with the PHPTemplate engine that is utilized by most themes. Not all theme engines are pure PHP-based. For example, there is a Smarty theme engine available in Drupal for use by people who are familiar with Smarty templates.

Looking at how theme files are set up within Drupal hints at the overall process and structure of that theme. Bear in mind that there are several ways to create a working theme, and not all themes make use of template files, but in the case of the Drupal's default theme setup, we have the following:

The left-hand column shows the folders contained within the themes directory. There are a number of standard themes, accompanied by the engines folder that houses a phptemplate.engine file, to handle the integration of templates into Drupal's theming system.

Looking at the files present in the garland folder, notice that there are a number of PHPTemplate files suffixed by .tpl.php. These files make use of HTML and PHP code to modify Drupal's appearance the default versions of these files, which are the ones that would be used in the event a theme had not implemented its own, can be found in the relevant modules directory. For example, the default comment.tpl. php file is found in modules/comment, and the default page.tpl.php file is located, along with others, in the modules/system folder.

Each template file focuses on its specific page element or page, with the noted exception of template.php that is used to override non-standard theme functions i.e. not block, box, comment, node or page. The theme folder also houses the stylesheets along with images, and in the case of the default theme, colors. What's interesting is the addition of the mandatory .info file (.info files were present in Drupal 5 modules, but are only mandatory in themes for Drupal 6) that contains information about the theme to allow Drupal to find and set a host of different parameters.

Here are a few examples of the type of information that the .info file holds:

  • Name - A human readable theme name
  • Description - A description of the theme
  • Core - The major version of Drupal that the theme is compatible with
  • Regions - The block regions available to the theme
  • Features - Enables or disables features available in the theme for example, slogan or mission statement
  • Stylesheets - Stipulate which stylesheets are to be used by the theme
  • Scripts - Specify which scripts to include
  • PHP - Define a minimum version of PHP for which the theme will work

To see how .info files can be put to work, look closely at the Minnelli theme folder. Notice that this is in fact a sub-theme that contains only a few images and CSS files.

A sub-theme shares its parents' code, but modifies parts of it to produce a new look, new functionality or both.

Drupal allows us to create new sub-themes by creating a new folder within the parent theme (in this case, Garland), and providing, amongst other things, new CSS. This is not the only way to create a subtheme a subtheme does not have to be in a subdirectory of its parent theme, rather it can specify the base theme directive in its .info file, in order to extend the functionality of the specified base, or parent, theme.

As an exercise, access the Minnelli .info file and confirm that it has been used to specify the Minnelli stylesheet.

So far we have only looked at templated themes, but Drupal ships with a couple of CSS driven themes that do not rely on the PHPTemplate engine, or any other, at all. Look at the chameleon theme folder:

Notice that while it still has the mandatory .info file, a few images, and stylesheets, it contains no .tpl.php files. Instead of the template system, it uses the chameleon.theme file that implements its own versions of Drupal's themeable functions to determine the theme's layout. In this case, the Marvin theme is a nice example of how all themes can have sub-themes in the same way as the template-driven theme we saw earlier.

It should be noted that engine-less themes are not quite as easy to work with as engine-based themes, because any customization must be done in PHP rather than in template files.

In a nutshell, Drupal provides a range of default themeable functions that expose Drupal's underlying data, such as content and information about that content. Themes can pick and choose which snippets of rendered content they want to override the most popular method being through the use of PHP template files in conjunction with style sheets and a .info file. Themes and sub-themes are easily created and modified provided that you have some knowledge of CSS and HTML PHP helps if you want to do something more complicated.

That concludes our brief tour of how themes are put together in Drupal. Even if you are not yet ready to create your own theme, it should be clear that this system makes building a new theme fairly easy, provided one knows a bit about PHP. Here's the process:

  • Create a new themes folder in the sites/default directory and add your new theme directory in there call it whatever you want, except for a theme name that is already in use.
  • Copy the default template files (or files from any other theme you want to modify) across to the new theme directory, along with any other files that are applicable (such as CSS files).
  • Modify the layout (this is where your PHP and HTML skills come in handy) and add some flavor with your own stylesheet.
  • Rewrite the .info file to reflect the attributes and requirements of the new theme.

Now, when it is time for you to begin doing a bit of theme development, bear in mind that there are many types of browser, and not all of them are created equal. What this means is that a page that is rendered nicely on one browser might look bad, or worse, not even function properly on another. For this reason, you should test your site using several different browsers!

The Drupal help site has this to say about browsers:

It is recommended you use the Firefox browser with developer toolbar and the 'view formatted source' extensions.

You can obtain a copy of the Firefox browser at http://www.mozilla.com/firefox/ if you wish to use something other than Internet Explorer. Firefox can also be extended with Firebug, which is an extremely useful tool for client-side web debugging.

For the purposes of this tutorial, we are going to limit ourselves to the selection of a base theme that we will modify to provide us with the demo site's new interface. This means that, for now, you don't have to concern yourself with the intricacies of PHP.

[edit] Choosing a Base Theme

As discussed, Drupal ships with a few default themes, and there are quite a few more available in the Downloads section of the Drupal site.

Some themes require the use of a theme engine other than PHPTemplate, in which case, you will need to also download and install it before attempting to use that theme.

Looking at how Drupal presents its core Themes page under Site building in Drupal, we can see the following: You might be wondering why it is possible to enable as many themes as are available, yet select only one as the default. The reason is that by enabling more than

one option, several options are available for users (assuming they have sufficient permissions) to select by editing their Theme configuration preferences on the Edit tab of the My account page as shown here: In this case, minnelli, garland, marvin , chameleon, and bluemarine have all been enabled, with garland selected as the default. Users can then select (by themselves) their preference for how they wish to view the site.

Be aware that some themes might not implement functionality that is important. Ensure you test each theme thoroughly before allowing users to select it. Enabling the pushbutton theme, and setting it as the default, causes the site, which has been presented in the standard garland theme up until now, to look something like this:

This is a fairly vast change from the previous look; however, you should be able to spot the fact that the generic layout hasn't changed much there are still three columns, there is a heading section containing the site name and logo, there is a navigation section and various boxes, and so forth. What has changed are the fonts, colors, and a few images notice in particular that there is now a background image in the heading section of this theme.

Take the time to view each and every theme that is available by default in order to get a feel for what is on offer.

That is not the end of the story, because the Drupal site also has a whole

bunch of themes for us to explore, so let's head on over to the themes page at http://drupal.org/project/themes and select the relevant version tab to bring up the themes that are available for your installation of Drupal.

You have already seen how to download and install other modules, and the process for installing themes is no different download and extract the contents of the desired theme to the themes folder in sites/default or sites/all. For example, the Barlow theme was downloaded and extracted, and provides us with a new option in the list of themes (some downloads will provide a number of sub-themes too):

Saving these changes causes the site to look like this:

There are now a bunch of default themes to choose from as well as a couple of contributed ones to look over. There are a few things to contend with, before moving to the next phase. As you might expect, we can configure the theme by clicking on the configure link on the themes page, so let's take a look at that here.

[edit] Configuring Themes

Clicking on the Configure tab at the top of the Themes page, brings up the global theme options that will influence each theme regardless of which one is being used useful if you always want certain features enabled (it's also easy enough to navigate between global and theme-specific settings using the tabs given at the top of the configure page).

We will concentrate on the global settings page here, as this is fairly representative of all the theme configuration pages so you won't have any problems working on each one individually. Remember that it is possible to override these settings by working on the Configure page of a specific theme.

Along with a selection of page elements to be hidden or displayed, Drupal provides the ability to specify which content types require post information to be shown. Now, we have already seen that there are certain types of pages for which we don't need to display this information for example, the About us page should be presented as is without informing users precisely who created it:

The reason for the settings, as shown in this screenshot, is that it is important to identify a blog posting with the person who posted it, and likewise for forum topics. However, when it comes to things like polls, pages, book pages, or stories, it is less important to do so often because these sorts of things will be handled by site administrators, anyway.

The following section allows you to either use the default logo supplied with the theme, or alternatively, specify a path to another logo or upload a new logo to the site:

In the case of the demo site, we will be making use of a background image to display the logo and name, so this option can be unchecked. If you have a site logo, or plan to have one, then upload it here.

The final section works with favicons (an icon that will be displayed in the site's address bar and in any bookmarks). Once again, what you use here is really up to you.

Icons can be a bit of a pain to create. Internet Explorer looks for icons in .ICO format, whereas FireFox will happily include .PNG files. There are a couple of online icon creation websites that can make or convert favicons http://www.html-kit.com/ favicon/ is one such example.

Ensure that whatever you set here is not unintentionally overridden in the individual theme's configure page.

Drupal provides a Reset to defaults button that will allow you to go back to the theme defaults in the event things go awry during testing, so don't be afraid to get your hands dirty to begin with.

[edit] Customizing Themes

Up until now, any settings or changes made have been fairly generic. Things are about to change as we begin to implement some more radical modifications that will require amendments to the stylesheet in order to get things just right. In the case of the demo site, I have chosen to work with the Barlow theme, as this most closely resembles the look that is envisaged.

If you haven't already, now is the time to find a fairly good code editor, as you will be looking at code files of one sort or another from here on out.

Opening up the barlow folder, notice that there are a few .tpl.php files, namely:

  • block.tpl.php
  • box.tpl.php
  • comment.tpl.php
  • comment-wrapper.tpl.php
  • node.tpl.php
  • page.tpl.php
  • template.php

...that are responsible for the layout of their namesakes. For example, a snippet of the code in page.tpl.php looks like this: 

<div id="main"> <?php if ($breadcrumb && !$is_front){ ?>

<div id="breadcrumb"><?php print $breadcrumb ?></div>

<?php } ?> <?php if ($messages != ""){ ?>

<div id="message"><?php print $messages ?></div> <?php } ?> <?php if ($mission != ""){ ?>

<div id="mission"><span><?php print $mission ?></span></div> <?php } ?> <?php if ($title != ""){ ?>

<h2 id="title"><?php print $title ?></h2> <?php } ?> <?php if ($help != ""){ ?>

<p id="help"><?php print $help ?></p> <?php } ?> <?php if ($tabs != ""){ ?>

<?php print $tabs ?> <?php } ?> <div class="content"> <?php print $before_content ?> 
<?php print $content ?> </div>

</div>

This file uses HTML to create page areas (within the <div> tags) to present content. It uses a series of PHP if statements to check whether or not, for example, to display things like the mission statement. The PHP code is embedded within HTML tags that have certain attributes associated with them like id="mission" or id="message". Don't worry about how these PHP variables are populated; we don't want to alter the way in which the site functions, we are simply looking at how it is laid out.

Notice that the class and id attributes are set for different sections of the HTML page. Recall that we can classify a class or id of content to be of a certain type, and then using the relevant selector, specify how it should be laid out within the stylesheet. This is a good example of using id to control a unique, individual section of the page (in this case, amongst others, the breadcrumb and mission statement), and class being used to control parts of the page that should appear uniformly, such as the content.

To prove this for yourself, open up the style.css file in the barlow theme and search for the snippet of code that reads: 

#header { background: #193547; border: 1px solid #aaa; border-bottom: none;

}

Change this to: 

#header { background: #FF0000; border: 1px solid #aaa; border-bottom: none;

}

Save these changes, and refresh the view of your Drupal site in your browser. The content should change so that your pages look something like this (in case it's not obvious in print, the header section has become red):

A single change to the header tag in the stylesheet has changed the background color of the site's header section throughout each and every page of the entire site. This is quite a powerful and useful property of stylesheets, and is precisely why everyone uses them so much. You can change this back to the original setting or leave it as is it makes no difference at the moment because it will no doubt change once you have decided on a color scheme.

Now that you know how to implement a change and view the effects of this change, you are ready to continue with modifying the stylesheet to reflect the site's intended look. In the sections that follow, we will discuss several different types of modifications, without grinding through each and every one in excruciating detail.

Once you have the hang of making changes in one area, it is easy to apply that knowledge somewhere else; so you should find the coverage here sufficient to get up and running with confidence.

One of the first tasks required for the demo site is to create and upload an image that will serve as the logo and title in the header section of the site.

[edit] Additional References

  • For instructions on Installing Drupal 6, click here
  • For instructions on Troubleshooting Drupal's set-up, click here
  • For instructions on Setting Up The Development Environment for Drupal 6, click here
  • For instructions on Building Drupal 5 Themes, click here
  • For Theming Drupal,click here
  • For instructions on Advanced Theming on Drupal Multimedia, click here
  • For instructions on Customizing Drupal Theme- CSS , click here
  • For instructions on Managing Drupal Theme- CSS , click 8gb ipod
  • For instructions on Creating and Customizing Drupal 6 Themes, click here
  • For instructions on Theming Drupal6, click here
  • For instructions on how to find the best blu ray ripper, click here
  • For instructions on Theming Drupal 5 Views Recipes, click here
  • For instructions on Setting up Drupal for web services, click here
  • For instructions on Selecting Drupal Theme - CSS , click yellowbox
  • For instructions on Installing Drupal Views Module , click here

[edit] Colors

With a few new images in place, the site is starting to look quite nice. However, it is still fairly similar to the base theme that we chose because the color scheme is much the same. The main background colors (the area around the actual content) are produced using an image for the top half of the page that fades from a dark to a lighter shade of blue and merges at the bottom of the image with the background color.

All of this is controlled from the body tag in the stylesheet: 

body {
color: black;
background: #3b617f url(bg.png) repeat-x;
}

From this, you can see that the image bg.png is repeated along the x-axis and that the background color is set to #3b617f. Let's provide a new image and background color to give the site a new look: 

body { color: black;
background: #fff url(bgnew.png) repeat-x;
}

bgnew.png, in this case, is a textured image that fades to white (or #fff) towards the bottom:

Looking at the site, we now have:

So far so good, but there is a lot more we can do with colors. All the text on the site can be controlled from the stylesheet, and you should think about what color, for example, hyperlinks are to be presented in. This theme bundles all the various types of hyperlinks along with some headings into the same group: 

a, a:link, a:active, a:visited,
 h1, h2, h3, h4, h5, h6 { color: #3b617f;
 }

If you wanted to give the heading styles their own color, you would simply remove them from the current list and set them separately: 

a, a:link, a:active, a:visited,
{
  color: #3b617f;
}

h1, h2, h3, h4, h5, h6  {
  color: #BF2323;
}

Now, headings that are not also hyperlinks are displayed in their own color. Headings that are hyperlinks are dealt with separately by the stylesheet, and are therefore, not displayed in the new color. Look for the section that reads: 

h1 a, h1 a:link, h1 a:visited, h1 a:hover, h1 a:active,
h2 a, h2 a:link, h2 a:visited, h2 a:hover, h2 a:active,
h3 a, h3 a:link, h3 a:visited, h3 a:hover, h3 a:active,
h4 a, h4 a:link, h4 a:visited, h4 a:hover, h4 a:active,
h5 a, h5 a:link, h5 a:visited, h5 a:hover, h5 a:active,
h6 a, h6 a:link, h6 a:visited, h6 a:hover, h6 a:active {
  color: #3b617f;
  border: none
}

...if you would like to modify these. You can now, in the same way, practice your hand at color coordinating the rest of the site by going through the stylesheet and making changes to taste. Remember, when making adjustments you really need to test changes quite regularly to ensure that there are no nasty surprises (like text being the same color as the background).

Before we look at the next item on the agenda, bear in mind that you can also control the alignment of text, its size and font, and much, much more. It really is worth looking over some of the CSS resources mentioned earlier on in this tutorial to get a good idea of what is possible.

[edit] Additional Resources

Retrieved from "http://www.themeswiki.com/Customizing_Drupal_6_Themes"
Personal tools