Getting Started with Drupal Themes

Drupal, the CMS that runs this site, is a powerful and flexible open-source CMS. It's the bees knees, and it takes care of all the back end stuff so that we can just focus on making the site look nice, and adding the content to it (blog posts, products, images) to make it ours. No Dreamweaver or custom HTML, and being able to edit it from anywhere, this thing rocks (even if it's got a strange name).

Today, I'm going to post an intro to Themes for Drupal. Most of the info out there I've found about this topic is squarely targeted at web developers, and as such, it's over the head of regular folks who just want a nice site.

First, let's briefly talk about how Drupal works:
Drupal is a LAMP-based CMS system. All this means is that it's a live application that lives on a webserver, handling and serving up web pages. Every time someone looks at your site, Drupal creates a page on the fly and gives it to them, following whatever rules you set up.

Now, there are two sets of rules, so to speak. What's shown where, the chosen content of your site, are set within Drupal's admin page. Things like what to put in the sidebars, and what order you want things in, and what you want to use as a footer or the links up at the top of the page, or what pages you want to show up when someone first comes to the site.

However, all of this stuff is (mostly) separate from how it looks. This is the 'content', not the 'presentation'. A second set of rules control how things look, and these rules are within the Theme. Drupal just follows whatever rules the Theme tell it to in regards to color, font size, graphics, edges, borders, and even width and placement of things.

So, when someone looks at your website, Drupal creates a page with the desired content, and then themes it to match the desired presentation, and in the end you wind up with a nice web page that was made for you (and is managed for you, as well, so changes are really easy).

Now let's make a new Theme
These Drupal Themes can be simple to very complex, but to start with we're going to talk about editing a simple one. Two great examples of simple Drupal Themes that come with Drupal are the Melvin theme and the Bluemarine theme. Both of these themes just use what's called CSS to define the rules for how things are going to look (some Themes use more complex PHP scripts in combo with CSS, but we won't talk about those today) and we'll be using the Bluemarine one, for it's very simple.

Once you've got Drupal setup, all you need to do is create a new folder under /themes named for whatever you want to call your theme. We're going to call ours New_Theme. Then copy everything from the bluemarine  folder into your new one (or copy the bluemarine  folder and rename it). Then, log into your Drupal site, and go to Admin, and then go to Themes. You'll see your new theme listed there. Go ahead and activate it. You can also make it the default now if you don't care about other people seeing your changes live, but if you don't then simply leave whatever other theme you've got as the default alone and set for you personally to use the new theme under your user settings (this way you're the only one who sees it until it's done).

Note that this trick, of simply copying everything into a new folder, doesn't work with the more complex themes. We'll talk about that someday, but it works with bluemarine, and let's keep things simple for now.

Now let's edit our new Theme
OK now, go ahead and look in that New_Theme folder within the /theme folder on the server. You'll see a file called 'style.css' in there, open this one up for editing and ignore the rest. This single, simple CSS file controls most things about how the site will look when using this theme.

First off, let's change some colors. The very first entry, 'body', controls the main body of text on the site. As you can see there, all those items got a format like this:

blah {
    something: 0;
    something-else:5;
}

What's going on here is that CSS is structured so that first you call out what it is you want to set a rule for (in this case 'blah'), then you put a '{' to hold the rules, then you state whatever rules you want with a ';' between them (in our case, 'something' is equal to zero, and 'something else' is equal to five), and then you close it off at the end with another '}' to let it know you're done telling it rules for that thing. It's just nice to put each rule on it's own line, for it makes it an easier read.

So let's go to 'color' and 'background color' and let's change those numbers. Go ahead and set them however you want, looking at this color chart for the numbers. The 'color' will be the text, the background the background.

OK, when you're done changing the color, go ahead and either upload your changed 'style.css' into your theme folder, or if your directly editing it on the server, simply save it. Then just refresh your browser looking at your Drupal site, and you'll see the change you just made.

Every element on the site has a name, and these names are set by Drupal. If you're savvy, you can change them, but for now let's just play with the ones set up for us.

Next let's look at the 'h1' entry a little ways down. It's:

h1 {
     font-size: 1.3 em;
     font-weight: bold;
}

This means that anything tagged as h1 or 'heading one' in your page will use the standard font from above, but will also be larger and Bold. Rules inherent and override things from prior rules that talk about the same stuff, hence why they CSS is short for 'Cascading Style Sheets'. The changes one rule make cascade from another. This makes is really easy to make changes, for a change in one place can show up everywhere, instead of us having to go to each and every entry to change the site's font color.

Now, while all the rules you can use are listed here at this site, you should know that not all the rules are set here in this style.css file we've been playing with. Some are set by Drupal itself, and some day later we'll talk more about that. For now, just go through the given names of things, making changes, and learning what effects what, and you'll learn a lot, and be well on your way to making a basic theme for Drupal. Just by changing all the colors, and using a custom logo, we can get a log ways to having a nice looking and custom Drupal site.

And a final tip: a big timesaver and learning tool is to be able to make the changes to the .css files directly, so you can play with things and see the changes almost immediately. Bouncing from editor to browser refresh and back is a great way to quickly pick up what's going on here. What we do is use the home fileserver, an old G4, as an in-house test site. By using Fink, you can easily install MySQL and PHP onto your Mac, and OS X already has Apache built-in. Simply turn on personal web sharing in the Sharing control panel, drop the Drupal download into the /Library/WebServer/Documents/ folder, and set up a MySQL database for Drupal to use (which with the open source MySQL Admin tool isn't hard). Now you've got your own mini-Drupal running locally that you can tweak to your heart's content, and when you're ready, then you can upload the Theme to the server for everyone to see and enjoy.

Happy theming!