Understanding Drupal's base themes

Graphical presentation in Drupal takes place mostly through its themes, whichare collections of CSS, PHP, image, and other files together with configurationsettings 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'spart of Drupal Gardens Essential Training.That course goes on to show how to use Drupal Gardens ThemeBuilder tocreate 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 havesubstantial styling themselves.But first, let's recap the basics.You enable a theme in Drupal 7 by clicking the Appearance button and thenclicking Set default next to the theme you want.So if I were to choose Seven, I click Set default, close out this overlay, andthere my theme is changed.I'll change it back to Bartik.There is an enormous selection of downloadable themes available online. You getit at drupal.org/project/themes and of course whenever you search for a themeyou 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 inthis folder, you should never ever change them here, or in fact change anythingthat's outside of your sites folder.If I go back up two levels that's this folder here. Inside the sites folderyou'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 alreadyexists: one way is to duplicate it, and I showed you how to do that in the videobuilding themes the traditional way in Drupal 7 Essential Training, or you couldextend the existing theme with something called a subtheme.A subtheme inherits all of the instructions of the original theme but thenadds 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 openthat in a text editor.At the top, of course, you have the name, description, some other basicinformation about the theme, and then you have a list of style sheets -- these arereferences to CSS files which describe how your theme looks.Below that you usually have a listing of all the block regions that show up inthe theme, and again, if we go back to our site and click Structure and Blocksand then we click Demonstrate block regions, we see all of those regions thatare 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 arere-colorable, and we can see that by going back again to our site and going upto 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 theheader 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, althoughthey 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 ofthese 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; itcontains 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 andscreenshot are at the base level of the theme, but again this is all defined inthe 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 forexample, there's a completely different layout on a specific node or forspecific content types and so forth.

Well that takes us to the end of our tour of Bartik, which is really only thebeginning 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 inthe 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 findon drupal.org/project/themes.

There you'll find an enormous variety of how things are handled withinthe 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 ondrupal.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 clickDocumentation and down to Theming Guide, scroll down, then to Contributedthemes 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.

Resume Transcript Auto-Scroll

Author

Released

5/17/2012

This course teaches web site designers how to take their sites to the next level with a few advanced techniques and the free and open-source Drupal software. Author Tom Geller shows how to configure the most popular add-on modules; use *nix commands and an FTP program to manage a Drupal site on a web server; change its visual appearance using the latest graphical tools; automate and speed through common tasks with Drush; integrate with social media sites; and see how "supermodules" like Panels, Context, Rules, and Features open up new worlds of code-free development.

Drupal 7 Advanced Training was designed as a follow-up to Drupal 7 Essential Training and it also dovetails nicely with our other Drupal courses, such as Drupal 7 Reporting and Visualizing Data and Create Your First Online Store with Drupal Commerce.