Working with Themes in Drupal

Drupal is a great CMS to use to set up and maintain the "nuts and bolts" of your website, but what about the "eye candy"? Like most web designers, you may be interested in creating a site that not only works well, but also looks great and therefore attracts and retains lots of visitors.

The easiest way to work with the visual aspects of your site in Drupal is to use themes. You can think of a theme as a set of different files that specify how a site is going to look and operate. These files may include HTML, CSS, JavaScript, PHP, and various types of image files. In other words, a theme is a kind of "skin" on top of the real nuts and bolts of your website. A theme doesn't change the way your site is set up -- it just modifies its look and feel. This makes it easy to change between different themes whenever you get the urge!

Using Default Themes

The easiest way to start working with themes is to apply a default theme that comes packaged with Drupal. To get to this list of themes, navigate to Administer >> Site Building >> Themes. Each of the small handful of themes packaged with Drupal is listed along with a description and a thumbnail that gives you a glimpse of the general look of the theme. We're going to go ahead and pick the Minnelli theme (Garland is usually selected by default). To do so, just check the enabled box and the default radio button next to Minnelli. Save your configuration.

If you take a look at the theme page and your test site, you'll see that the theme has already changed. How exciting!

Configuring Themes

To the right of the Minnelli theme, there is a link called Configure. Go ahead and click on that now. You'll get a large array of options you can use to completely customize the look and feel of the Minnelli theme. Feel free to play with these options and see what they do.

Under Global Settings, there are a lot of basic options that will set up themes so that only the type of content you want is displayed. Go ahead and select or deselect "Toggle display" options according to the content you are going to want to have on your site. Then, select "display post information on" for each type of content that will be user-submitted so that info about the submitter will appear each time one of these types of content is posted.

Note that so far, if you've only played with Global Settings, you haven't actually customized Minnelli -- you've set options for all enabled themes. What does this mean? It means that Minnelli (and any other theme you're using) should work the way you've set it in Global options, but occasionally, a specific theme will override global settings because for whatever reason, it wants to do its own thing. That means that you should click on the Minnelli theme tab and make sure the same settings you picked under the global options are also set under Minnelli. In general, unless you're okay with theme overriding, you should always try to make sure that the toggle display sections for Global Options and theme options are identical. Go ahead and change Minnelli's toggle display section so that it is the same as your global settings now.

Another fact to keep in mind is that if there is any component of the site that you're going to want to place in a non-standard location, you should just deselect it under Toggle Display, and then place it by hand in Blocks mode.

You'll also notice that there are a number of other fun things to customize in the Minnelli theme. Each change you make will be displayed in the "preview" pane. Go ahead and play with the colors until you're satisfied with them. There are a few more settings to play with as well. You can pick a custom logo or upload one, and you can also pick or upload a "favicon" (a shortcut item that will show up in people's browsers). When you're happy with your site and you've made it nice and pretty, save the configuration.

I want more themes!

If you want more "eye candy" than provided by Drupal's core themes, don't worry -- there are hundreds available online. All you need to do is to navigate to http://drupal.org/project/Themes, pick the themes you want, download them to your hard drive, unpack them, and then paste them into drupalsitesallthemes (or FTP it to the correct location). If you haven't installed themes before, you will probably need to create the themes folder in drupalsitesall before you do this. Then, proceed as you did with Minnelli to enable your new theme, set it as default if desired, and then customize it to your heart's content!