Chapter 5

Customizing the
Drupal Look

D
rupal out of the box is pretty nice. It is certainly
ready for use as a personal blog or a basic com-
munity site. Chances are, though, that if you are
using Drupal, you want to do more: you want a design Drupal iUpHrU I vIrtHV tri ,«ADI1
NK»K rttnu THE
that represents your organization, you want functionality DRUPAL
specific to your community, you want to make your site
your own. To get there, you need to take the next step
and start leveraging the Drupal themes and modules that Dnjpal 6.0 re1eased_
have been contributed by the Drupal community.

The Drupal.org Web Site

Figure 12
The Drupal.org Web site.
Just as Drupal is extremely flexible and can serve many
purposes, the Drupal.org Web site demonstrates this
flexibility, serving many different functions. First, it is a
Drupal newcomers. In addition, much of the documentation
landing pad for information about Drupal. Second, it pro-
on the site is very version- and time-sensitive. When you read
vides documentation and support for using Drupal. Third,
documentation, he sure that it is relevant to the version that
it provides a Web interface for Drupal project manage-
you are using, and if it discusses an issue or bug, be sure that
ment and integration into the project's CVS (Concurrent
the issue has not been patched since the post was put up.
Versioning System, a management tool for collaborative
Navigating through the site, you will immediately he
development). Navigating through Drupal's documenta-
drawn to the various projects on DrupaLorg. Projects are
tion and downloading files for Drupal is a little different
their own node type and managed hy the Project mod-
than on many other open-source projects. Everything is
ule. There are several different kinds of projects: themes,
done right from the one site (see figure 12). theme engines, modules, installation profiles, and transla-
You will often find this very convenient, but you can tions. As you're setting up your site, the most important
also look at the DrupaLorg Web site as a case study in of these projects will be themes and modules.
putting too much into one site. What usually gets lost There are already folders in your Drupal site called
in the thousands of nodes is the documentation. There themes and modules. Do not, however, put your down-
is a lot of documentation on the site, but it is not always loaded files there. Those folders are for the core set of
easy to find. It is easy to search for specific pieces of infor- themes and modules that come with a default Drupai
mation (in addition to Drupal's search, use site:drupal installation. If you put your modules there, they will work,
.org in Google), hut many helpful guides have been cre- but when you need to upgrade, it is going to be a little
ated by Drupal veterans and subsequently overlooked by messy. Instead, create new a folder in your / s i t e s folder

o
called a l l . Then, make new folders in / a l l called mod- ScrMrifthot Nama EnabiKl (MMK
ules and themes. In each of the modules and themes
folders, you can add a folder called contrib. Put your ability:
downloaded Drupal modules and themes in the two con- sites/alE/tttetnes/abilily
r r
trib folders. For more information ahout this suggested
folder setup, read the readme.txt file in the / s i t e s

!••
folder.
andreasO2:
sile£/alI/th6mes/andreasO2
r r

Themes
Themes define the look and feel of the Web site. They biuemarino:
establish the layout of the page, the navigation, the font Ihem esTbl uflmaii na
r r
styles, and all other graphical display elements for your
site. Rememher that the theme-the format of the site-is
separated from the content in Drupal. This means that chamelMtn:
r r
themes/chamelaon
we can adjust the theme without having to modify any
content. The content will simply appear under the new
display rules of the changed theme.
dreamy:
If you have used blogging tools such as WordPress, s i tesJs\ L/themes/drsamy
r r
you will be familiar with the concept of themes. You may
also notice that Drupal's selection of themes is not close
to the quantity and quality of WordPress themes. The Figure 13
Drupal community recognizes that this is often an issue List of themes on the DrupaLorg Web site.
for users who are looking for a new CMS, and so groups
are working hard to bolster the contrihuted themes. The
flexible nature of Drupal, however, also makes it hard to
create the sort of generic themes that work on everyone's
sites. Choosing a Drupal theme is like choosing a suit Fixed Width versus Fluid Width
off the rack. You will see a lot of themes that look nice,
but will find that few of them still look as nice when you Most themes are either fixed width or fluid width. A fixed-
download them and try them on your site. In the end, width theme has a defined width ir) pixels, and all of the
chances are you are going to need to do some alterations content for the site is displayed within that predefined
to make them fit your site perfectly {see figure 13). space. Users with higher resolution displays see the same
To get started with a new theme, you will first need thing as users with lower resolution displays; the content
to go to the DrupaLorg Web site for themes. Most themes
does not expand to fill the display but stays at the fixed
have a screenshot, so you will quickly notice that beyond
colors and graphics, there is a wide variety of layout width. Generally, the extra space is filled up with pleasing
choices. Some themes only have one sidebar, while oth- colors and patterns, so the user hardly notices. Fixed-width
ers offer two or more sidehars. Since themes are tied so themes are very popular with blogs and other sites that
intrinsically to the layout of your blocks hy defining hlock are suited to a less complex, more streamlined interface.
regions, consider how many blocks you want to make
Fixed-width themes can also be easier to design, as the
availahle on your site.
designer does not need to worry about what happens to
the theme as it is presented in different resolutions. You
DrupaLorg themes page wili often find that the most attractive Drupal themes are
http://drupal.org/project/themes fixed width, as their designers were able to apply more
complexity to the theme without having to worry about the
While looking at possible themes, consider layout
and the flexihility that a theme will give you, as well as the variability of browser sizes (see figure 14a).
aesthetic value of the theme. It is much easier to change Fluid-width themes are more complex to design but often
images and colors to make a theme suit your needs than it
preferred by users, especially users with larger displays
is to change the layout, so select for layout first. Of course,
if you are more comfortable with dealing with HTML and and using higher resolutions. Fixed-width sites can often
a little PHP, it may he easier for you to tweak the layout. (cont.)

e
 After you download your theme, extract it, and put
feel outdated, or at least unnecessarily small, if they had it in your / s i t e s / a l l / t h e m e s / c o n t r i b folder, you just
been designed for older monitors. Fluid themes are often need to go to your Drupal Themes Admin page and turn
designed to mimic a fixed-width theme with colored on you new theme. If you are trying a new theme, you are
borders that surround ttie page, but are expandable at the probably still in the development phase of your project
same time. The fluidity in the name reflects the ability of and can just set it to be your site's default theme. You will
notice, though, that you also have the option to enable
the theme to expand as a window grows while maintaining
your theme without making it the site's default theme.
the appearance of being fixed width. This ailows users This allows users with the proper permission to change
with newer widescreen displays to see more of the site and the theme for themselves so that they see the same con-
minimize scrolling (see figure 14b) tent displayed in a different theme, lt also allows other
modules to use these other themes for specific pages or
With either fixed- or fluid-width themes, you wiil want sections of the site. For example the YA section of a pub-
lo decide what resolution displays you are committed to lic libraries Web site might use a different theme than the
supporting. Some fixed-width themes are fixed to 1080, main page. This lets a library establish more artistic zones
without compromising the need to follow Web conven-
which will cause your users with 800 x 600 lo need to scroll
tions on the main site.
left and right. Some fluid-width themes will compress
awkwardly when faced with a low-resolution display. Be
sure to test your new theme on several different resolution
settings as well as in different browsers.

Figure 14a
A fixed-width Drupal theme.

Figure 14b
A fluid-width Drupal theme.