Customizing Drupal 6 Interface

Exclusive offer: get 50% off this eBook here
Building Powerful and Robust Websites with Drupal 6

Building Powerful and Robust Websites with Drupal 6 — Save 50%

Build your own professional blog, forum, portal or community website with Drupal 6

$26.99    $13.50
by David Mercer | April 2009 | Content Management Drupal Open Source

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 article 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 article by David Mercer 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.

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.

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 flavourless 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.

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.

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).

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.

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.

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…

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.

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:

Building Powerful and Robust Websites with Drupal 6

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:

Building Powerful and Robust Websites with Drupal 6

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 article, 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.

Building Powerful and Robust Websites with Drupal 6 Build your own professional blog, forum, portal or community website with Drupal 6
Published: April 2008
eBook Price: $26.99
Book Price: $44.99
See more
Select your format and quantity:

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:

Building Powerful and Robust Websites with Drupal 6

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:

Building Powerful and Robust Websites with Drupal 6

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:

Building Powerful and Robust Websites with Drupal 6

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):

Building Powerful and Robust Websites with Drupal 6

Saving these changes causes the site to look like this:

Building Powerful and Robust Websites with Drupal 6

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.

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:

Building Powerful and Robust Websites with Drupal 6

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:

Building Powerful and Robust Websites with Drupal 6

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.

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):

Building Powerful and Robust Websites with Drupal 6

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.

Building Powerful and Robust Websites with Drupal 6 Build your own professional blog, forum, portal or community website with Drupal 6
Published: April 2008
eBook Price: $26.99
Book Price: $44.99
See more
Select your format and quantity:

Images

Images and background images can be tricky to work with because they are a fixed width, unlike web pages that can be resized. It can look quite awful if an image stops short of the page size or is in the wrong place, so we need to work out on how to make our images blend into the site; so that viewers working on different screens don't end up getting odd results.

As it so happens, the particular theme chosen demonstrates this point quite nicely because it can have either one or two sidebars and changes its width accordingly. If you know that you are going to always have one or the other, then you can go ahead and create images tailored for those dimensions if not, you will have to think about how to cater for the changes.

In the case of the demo site, I wanted a fairly hard-hitting, graphically-rich page title that sticks in the mind without being overly colorful or loud. In this case, the site's name/logo is actually part of the image, so I have done away with the standard site name and logo in the theme settings:

Building Powerful and Robust Websites with Drupal 6

In order to present this on the site, however, we need to do a bit of work. Adding this as the site's logo is a simple matter of uploading it in the theme's Configure page, as shown here:

Building Powerful and Robust Websites with Drupal 6

...and ensuring that the Logo option is enabled for this particular theme. As you have access to the file system, you could also copy the image directly to the files folder, and then reference it from the Path to custom logo text box directly above the Logo image settings box:

Building Powerful and Robust Websites with Drupal 6

You could also save the new logo image over the old original one, and it will display as expected, but lose the old one irretrievably.

If you are having problems with viewing this image, then it is most likely that the File system settings under Site configuration are at fault. Check these to ensure that files are being saved to the correct place, and that you are then attempting to access them from the same place.

With that done, we can now take a look at the site to see the effect this has had:

Building Powerful and Robust Websites with Drupal 6

It's worth remembering that life is made a lot easier by creating images on transparent backgrounds. This saves time and effort in the event you decide to change color schemes because the image will allow the background color to show through we'll see a demonstration of this with the site logo, in just a moment, when we change the basic color scheme for this demo.

Notice that this logo is not affected by whether or not the width of the page caters for one or two sidebars, because it simply blends in with the background color.

Images can also be used to change the look and feel of certain aspects of the site. Often, rounded images are used to break up the sharp, angular look and feel of standard websites, and we shall make use of a couple to delimit blocks in the left and right sidebars.

To display additional images within each block, there is some work that needs to be done to the template files before any changes will be visible. So, open up block.tpl. php and modify it as follows:

<div class="block-top"></div> 
<div class="block block-<? print $block->module?>"
id="block-<?php print $block->module . "-" . $block->delta ?>">
<div class="block-center">
<?php if ($block->subject) { ?>
<h2 class="title"><span><?php print $block->subject ?></span></h2>
<?php } ?>
<div class="content"><?php print $block->content ?></div>
</div>
</div>
<div class="block-bottom"></div>

The bolded code here adds a new top and bottom section to each block, and wraps the content within another div tag. The top and bottom sections will house the rounded outline images that will divide up the content in the sidebars into clearly defined blocks. The images we will use are set height and width as shown here:

Building Powerful and Robust Websites with Drupal 6Building Powerful and Robust Websites with Drupal 6

We now need to use the stylesheet to tell the browser to display these images in the top and bottom div tags, so open up the style.css file and add the following in:

.sidebar a:hover,
.sidebar a:focus {
border-bottom: 1px solid #999;
}
.block-top{
background: url('blocktop.png') no-repeat bottom center;
height: 15px;
padding: 5px;
}
.block-bottom{
background: url('blockbottom.png') no-repeat top center;
height: 15px;
}
.block-center{
border-left: 0px;
}
/*
* Footer
*/
#footer {
color: #999;
border-top: 1px solid #ccc;
background: #fff url(bg1.png) bottom left repeat-x;
}

In this case, I have named the images blocktop.png and blockbottom.png, and stipulated that the image should not be repeated. Further, they should be displayed in the center of the div, either at the bottom or the top of the region, depending on whether or not we are in the block-bottom or block-top area.

Add all theme-related images to the actual theme folder don't simply upload them to the standard files folder.

With these changes saved (and the images saved to the relevant theme folder), we can now look at what effect these have had on the site:

Building Powerful and Robust Websites with Drupal 6

Now, each block has its own top and bottom bracket that helps separate and define its content. You can continue adding borders by modifying the block_center class in the style.css stylesheet, but I think it looks quite nice as it is. Before we move on, you may have noticed that the borders for the sidebars have been removed here. Can you guess how this was achieved?

There are a number of sidebar settings in the stylesheet and removing the border is a case of changing the 1px width to 0px, as shown here:

.sidebar {
background: #fff;
}
#sidebar-right {
border-left: 0px solid #ccc;
}
#sidebar-left {
border-right: 0px solid #ccc;
}

We aren't quite finished with images yet, because they can be used in any number of different areas of the site. For now though, we will move on to discuss other parts of the theme, using images where appropriate. You should spend some time practicing not only adding images, but actually designing them properly in order to give your site a professional look-and-feel.

Remember, above all, the site needs to be intuitive and easy to use, so don't get too carried away making wild graphics that are going to slow everything down or make it confusing. People should be visiting your site for its content, anyway.

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:

Building Powerful and Robust Websites with Drupal 6

Looking at the site, we now have:

Building Powerful and Robust Websites with Drupal 6

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 article to get a good idea of what is possible.

Page Modifications

It's entirely possible that the actual layout of the page is not to your liking. In this case, there are two options open to you when it comes to effecting change the stylesheets or the template files. The stylesheet can be used for a limited number of changes; for example, broadening (or narrowing if required) the sidebars to a fixed width in pixels, by altering the appropriate block in the layout.css stylesheet:

.one-sidebar #wrapper {
width: 780px;
}
.two-sidebars #wrapper {
width: 970px;
}
#header #logo, #branding, #main, .sidebar {
float: left;
}
#search, #header-additional {
float: right;
}
#menu, #content, #footer {
clear: both;
}
#main {
width: 500px;
padding: 2em 35px 1.5em 35px;
}
.sidebar {
width: 200px;
}

Of crucial importance here, is that one remembers to alter the width of the page overall to cater for the increased width of the sidebars (either that or decrease the content section). If this is not done, it could have undesired consequences for the layout of the site.

With two sidebars, the site is now nearly 1000px in width, and traditionally, a site should be designed at 800px in width. It is my opinion (and some will disagree) that this is becoming less important as more and more people purchase better quality monitors with higher resolutions, so I would be quite happy with a screen of this width.

But what if you needed some more drastic alterations to the site? If it is a more complex structural change you require, then it's time to go to the .tpl.php files the actual file will depend on the type of change you need to make.

Let's say, for example, that you wanted to add an extra row to each page in order to insert some advertising in the hope that some revenue can be generated from the site. In order to do this, we need to look at the page.tpl.php file, because this is where the layout of each page is controlled. Depending on how adventurous you are, you could add some conditional PHP code in order to display the column with its advertising only at specific times. For our purposes, it is enough to simply add the new row.

Let's say we want the new row to appear above the content but below the heading perhaps this could also be used for quick alerts or announcements or even scrolling news. If this is the case, we need to find the spot in the code where the main content is added and insert a new region immediately above. Look for this snippet of code in the page.tpl.php file:

</div>
<div id="content">
<?php if ($left != ''){ ?>
<div id="sidebar-left" class="sidebar">
<?php print $left; ?>
</div>
<?php } ?>
<div id="main">
<?php if ($breadcrumb && !$is_front){ ?>
<div id="breadcrumb"><?php print $breadcrumb ?></div>
<?php } ?>

This div area is responsible for containing the main content of the site specifically, it houses the left and right sidebars as well as the main body of content. To insert a new row, we can do something like this:

</div>
<div id="content">
<div class="newcontent">
This is where the new content will appear!
</div>
<?php if ($left != ''){ ?>
<div id="sidebar-left" class="sidebar">
<?php print $left; ?>
</div>
<?php } ?>
<div id="main">
<?php if ($breadcrumb && !$is_front){ ?>
<div id="breadcrumb"><?php print $breadcrumb ?></div>
<?php } ?>

Taking a look at the site now shows the new message as expected:

Building Powerful and Robust Websites with Drupal 6

What you actually add within this new section of each page is entirely up to you. Before you do:

It is extremely important that whatever changes are made to a site are tested on more than one browser!

Testing your layout goes deeper than simply checking if everything is in the correct place. It is important that you ensure the CSS and HTML is valid and correct, and resources to achieve this are available online—try http://validator.w3.org/.

If any problems are reported, then it is up to you to ensure that the site complies as closely as possible, because errors can damage not only how people browse your web pages, but also how search engines index and rate the site.

Summary

From learning about what considerations must be taken into account when planning a website's look-and-feel, to making changes to the code, this article has provided a firm grounding in the fundamentals of working with Drupal interfaces.

One of the most important aspects of customizing a site's look is understanding how Drupal is set up, in order to leverage the power of themes. As we saw, themes provide a kind of template from which you can work to create your own unique site. This saves a lot of time and effort because we no longer need to work from scratch.

We also briefly touched on the possibility of generating themes from theme engines, and hopefully, you will soon feel confident enough to begin looking at this in more detail.

With respect to building your site's interface, experience is very important. There are three main technologies that you need to spend some time working with: HTML, CSS, and PHP. In this article, we looked at CSS in some detail before setting about modifying the stylesheet supplied with our chosen base theme. Whatever base theme you choose, the tasks that lie ahead will be similar in nature to the ones discussed in this article, and hopefully, you will find that CSS is a most powerful and useful tool in this regard.

The knowledge gained from working with images and HTML, as well as the application of the design considerations discussed, will help not only with your Drupal site, but with any other web-based application that you end up working with. Gaining an appreciation for the various different types of design, as well as having to work with images and code, will allow you to create more ambitious graphical user interfaces in the future.

About the Author :


David Mercer

David Mercer was born in August 1976 in Harare, Zimbabwe. Having always had a strong interest in science, David came into regular contact with computers at university where he graduated "cum laude" with majors in applied math and math.

His technical books are now sold worldwide and have been translated into French, German, Polish, Greek, Spanish and many more. His book on Drupal 6 was reviewed on Slashdot and went on to become a best seller. Mercer's books are recommended reading at higher learning institutes like MIT, and he has a write-up on Wikipedia.

David divides his time between consulting for companies and organizations in a wide variety of industries, helping them to develop and implement cutting edge systems. He also contributes to interesting web-based projects like design-a-webpage (http://www.design-a-webpage.com) that allows people to create beautiful, effective landing pages in minutes - absolutely no code or Web experience required.

He also maintains a blog, training and support site for his readers at http://www:siteprebuilder.com. Site prebuilder provides quizzes and exercises that accompany his books, and serves as his primary online presence and contact point.

When he isn't working (which isn't that often) he enjoys playing guitar (generally on stage and unrehearsed) and getting involved in outdoor activities ranging from touch rugby and golf to water skiing and snowboarding.

Books From Packt

 

Drupal 6 Social Networking
Drupal 6 Social Networking

Drupal 6 Themes
Drupal 6 Themes

Building Websites with Joomla! 1.5
Building Websites with Joomla! 1.5

Joomla! Web Security
Joomla! Web Security

WordPress Plugin Development (Beginner's Guide)
WordPress Plugin Development (Beginner's Guide)

MODx Web Development
MODx Web Development

Drupal 6 Site Builder Solutions
Drupal 6 Site Builder Solutions

Learning Drupal 6 Module Development
Learning Drupal 6 Module Development

 

No votes yet

Post new comment

CAPTCHA
This question is for testing whether you are a human visitor and to prevent automated spam submissions.
X
m
Z
g
w
6
Enter the code without spaces and pay attention to upper/lower case.
Code Download and Errata
Packt Anytime, Anywhere
Register Books
Print Upgrades
eBook Downloads
Video Support
Contact Us
Awards Voting Nominations Previous Winners
Judges Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software
Resources
Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software