Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
One of the first things people ask when they create a web site is, how do I change the design? I gave you a little peek of Drupal Gardens' capabilities for this in the video about what Drupal Gardens is, but now it's time to dive in deep. The best way to understand how Drupal Gardens handles design is to first look at how Drupal does, because Drupal is the underlying software beneath Drupal Gardens. Drupal defines design through its themes. To look at its themes, we are going to switch away from Drupal Gardens and turn to core Drupal, which I've already downloaded and have running on my own computer.
Don't worry if it's a bit unfamiliar to start with; it'll all come clear in the end. So first we will switch over to core Drupal and then take a look at our themes by clicking on Appearance. The default theme in core Drupal is called Bartik, and this little screenshot should look familiar to you because it's what we saw just a minute ago when we were looking at the just-installed site. The other theme that comes enabled with Drupal is called Seven, which again should look familiar to you because this is the administrative overlay theme. You see this when you click anything up here in the toolbar; for example, the Modules link.
It's the thing that floats over Bartik, so we have Seven above and Bartik below. Core Drupal also includes two other themes that are disabled by default: Garland and Stark. We don't have to talk about these. In order to change from one theme to the other, you click the Set default link. So I'm going to change our default theme here from Bartik to Seven and then close our administrative overlay, and the screen will redraw. Now we see the entire site in that Seven theme. I'll switch it back by just going down and Set default next to Bartik, and there we are.
One big difference between Drupal Gardens and core Drupal, as you know, is that Drupal Gardens lives on Acquia servers. Whereas core Drupal, you download to your own computer; you play with it; you might upload it to another computer. But the thing is, you have control over the files. So let's take a look at what files actually make up a Drupal theme. We will close out this window and then open up the folder I have here: Drupal-7. This is the Drupal software itself. I scroll down and open up the Themes folder. This is where the themes that come with Drupal live.
They might also live in other folders, but these are the core themes. I'll open up Bartik, and we see it's contained a number of files. The most important one is this .info file, which has a number of instructions that tell Drupal where all the files are that define this Bartik theme. The CSS folder is also very important. Let's open up one of those files. When you open one of the CSS files, you see styling information in the CSS, or cascading style sheets, language. Again, you can learn more about CSS by watching courses on that topic on lynda.com.
We won't be going into great detail in it in this course, although it is good for you to learn it because we will need to have a little bit of CSS in order to change our themes in Drupal Gardens. In addition to the CSS files, there are additional files in the theme. For example, Templates lets you change the way that the page looks in different contexts. In this case, for example, comments are styled one way, while entire nodes are styled another way. The number of template files will vary from theme to theme. So just to summarize, most of the visual decisions in Drupal themes are defined by its CSS Files.
Once again, in Bartik that's in the css folder, but it doesn't have to be, by the way; it could be loose in this folder or in subfolders or so forth. All of that is defined in the .info folder, which tells the theme where to find all of these files. Logic, and to some extent layout, is defined by these template files. These are written in the PHP programming languages. Graphic elements are stored in separate files; in Bartik they in this folder called Images. And all of this is pulled together by that .info file.
In core Drupal, as you already saw, all of this is hidden from you; all you have to do is click Appearance, select your theme, and you're golden. Now let's take a look at how Drupal Gardens handles appearance. We'll switch over to Drupal Gardens and then click Appearance. Now, instead of getting that simple screen, we get a theme editor, what they call the Theme Builder. And here we can switch from theme to theme just like in core Drupal, or we can style individual elements very easily by simply clicking on Styles, selecting the thing we want to change, and then let's say we want to make that a bigger font, and there we go.
Now, there are lots of controls in Drupal Gardens' Theme Builder, and we will go over all of these in the next 15 videos or so. Just as importantly, you learn how to export the themes you create, so you can use them in any Drupal site, not just those hosted on Drupal Gardens. So you can start in Drupal Gardens, design your theme, design your site, then take it out and host it yourself anywhere you like. Drupal theming is a huge subject, and to be honest, it's too big for me personally. If you want to learn more about it, I recommend lynda.com's video series by Chris Charlton, which is called "Drupal: Creating and Editing Custom Themes." That series talks about how to create Drupal themes the traditional way.
What you learn in that course will also show you how to modify themes you create in Drupal Gardens, and it'll show you how to do things that aren't quite possible in this Theme Builder. The Theme Builder can do a lot but not quite as much as in the traditional way; and once you start using it, you'll find that it's really not that hard. Best of all, the theme builder creates real Drupal themes. They look great. They work well in Drupal Gardens, and they can be taken out and installed in core Drupal.
Get unlimited access to all courses for just $25/month.Become a member
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.