Understanding Drupal's base themes

Graphical presentation in Drupal takes place mostly through its themes, which are collections of CSS, PHP, image, and other files together with configuration settings stored in your Drupal sites database. They're all held together with a Drupal specific file, the so-called info file. I took apart a standard theme in the Understanding Drupal Themes video that's part of Drupal Gardens Essential Training. That course goes on to show how to use Drupal Gardens ThemeBuilder to create custom designs. In this video, we are going to look at themes with an eye toward modifying base themes.

These are themes designed to be flexible starting points but that don't have substantial styling themselves. But first, let's recap the basics. You enable a theme in Drupal 7 by clicking the Appearance button and then clicking Set default next to the theme you want. So if I were to choose Seven, I click Set default, close out this overlay, and there my theme is changed. I'll change it back to Bartik. There is an enormous selection of downloadable themes available online. You get it at drupal.org/project/themes and of course whenever you search for a theme you first must Filter by compatibility.

There, almost 300 themes for Drupal 7. Now let's talk about what's actually in a theme. First, let's look at what's in Bartik, which is Drupal 7's default theme. I have Drupal downloaded to my desktop and here its folder is opened up. You'll find the themes in the themes folder right here, and there is bartik. Now I should mention, although we're going to look at the themes that are in this folder, you should never ever change them here, or in fact change anything that's outside of your sites folder. If I go back up two levels that's this folder here. Inside the sites folder you'll see there's all, default, and so on and inside there is the themes folder, where you'll actually change your themes.

But let's get back to the ones that come with core Drupal. There are two ways to build your own themes based on another theme that already exists: one way is to duplicate it, and I showed you how to do that in the video building themes the traditional way in Drupal 7 Essential Training, or you could extend the existing theme with something called a subtheme. A subtheme inherits all of the instructions of the original theme but then adds more on top of it. This is how you will work with base themes throughout this course. Anyway, let's take a quick walk through the files that comprise this Bartik theme.

The most important one as I mentioned before is this .info file and I will open that in a text editor. At the top, of course, you have the name, description, some other basic information about the theme, and then you have a list of style sheets -- these are references to CSS files which describe how your theme looks. Below that you usually have a listing of all the block regions that show up in the theme, and again, if we go back to our site and click Structure and Blocks and then we click Demonstrate block regions, we see all of those regions that are described in the .info file.

There may be other parts of the .info file but those are the basics. But let's go back to our desktop, so we can see the other parts of the theme. There is also this color folder. This is not in every theme. It only shows up in those themes that are re-colorable, and we can see that by going back again to our site and going up to Appearance, then click Settings under Bartik, which is a re-colorable theme. And it's all this stuff at the top, the way that you can change the color of the header and the text and so forth. For such themes you'll usually find this color folder.

Then there are CSS files, which in this case are gathered in a folder, although they don't have to be. As you could imagine this contains instructions on how your site should look, the colors, the layout, the typography, and so forth. Now if we go back to our info file, you see that references several of these style sheets. These match up with the ones that are in that css folder. Continuing on, we have an images folder which is exactly what you think; it contains images that are common to that theme, and some loose images outside of that folder.

Again, they don't have to appear inside a folder and traditionally the logo and screenshot are at the base level of the theme, but again this is all defined in the themes programming. Finally, we come down to the templates folder at the bottom. These define functionality and to some extent layout. They override and amend the basic template.php, which you see right here. And in fact, if you're a programmer you can add your own templates, so that for example, there's a completely different layout on a specific node or for specific content types and so forth.

Well that takes us to the end of our tour of Bartik, which is really only the beginning of understanding. To deepen it try taking similar tours of the other themes included in Drupal 7. I will do that by going up a level here and taking a look at seven. Here's an example of a theme that throws everything except for the images in the top level, but because you spend some time with Bartik you can sort out what's what. For example, here's a template file which ends in tpl.php, a CSS file, and so forth. You can do the same thing with contributed themes, which as I mentioned you find on drupal.org/project/themes.

There you'll find an enormous variety of how things are handled within the theme, whether they're put in folders, how many CSS files there are, and so forth. There may be additional features as well. We're going to focus on the base themes and most of the top-rated ones on drupal.org are in fact base themes. Zen is a base theme, Fusion, Adaptive Theme, and then as we continue down, Omega; these are the four that we will look at in this course. If you want to find out more about starter themes, go to drupal.org, then click Documentation and down to Theming Guide, scroll down, then to Contributed themes in the sidebar, down to Types of Contributed Themes, and then down to Starter Themes.

We will look at some of the most popular ones in the next few videos.