Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
If you have looked through a number of Drupal sites you've probably noticed the amazing variety of appearance among them. But behind the scenes, they all conform to certain layout principles that are common to all of them. In this video, you'll gain knowledge about those principles that will help guide you as you plan your own site's design. To show some variety and similarities among themes, we are going to go to this site, themegarden.org. We start off here at the Garland theme; you recognize it because it's the theme that we have been using for our site. You'll notice a few things about this theme. For one, there is a column on the left, a column on the right, and a center content area. That's the typical setup for a Drupal site; however, there are some that have only two columns.
For example, the next one on this site called GlossyBlue. Here you have only the one right hand column. However, it still has all of the same content as you had in Garland. Let's go back to Garland and see how that works. In the left hand column you have Previous theme, in the right hand column you have Next theme, and Random theme. Again, let's go back to GlossyBlue; here all of the information has been smooshed into one column. Which is Next Theme, Previous Theme and then down here we have Random Theme. That's one difference you have among themes in Drupal. There are three other main differences; the first one is fluid width columns versus fixed width Columns. To demonstrate this, we'll go back to our site, the underwater realty site. We are going to Administer, and from there into Themes. Right now we have only one theme turned on, that's Garland; this is a fluid width theme. However, there is a similar one called Minnelli, which is fixed with theme.
We'll turn that on and make that the default to show you the difference. Save configuration and we're now in Minnelli. As we change the size of the window, you'll notice that the text in the middle does not change at all. This text here, it gets cut off, as you move the side of the window in. Now let's switch back to Garland. Go back to Administer and Themes. Change the default back to Garland and click on Save. Now as we move the window in and out that center part is fluid. That's what they mean by a fluid width column.
The second difference among the Drupal themes is whether it's configurable in terms of color. We are on Garland right now, and this is one of the few themes that is configurable by color. More and more themes are talking advantage of this feature; let's take a look at it. Click on Configure and click on the Garland theme. Aha! We see this color wheel here. If we want to change the color of the entire site, all we have to do is change the color set to something we like better. Let's say Belgian Chocolate. Ah! And we get a preview down here. Scroll all the way down to the bottom and click on Save Configuration. There, our whole site's look has changed, just by color. You can also change individual colors; for example, the link color, let's change that to something more red like. Scroll to the bottom again and Save and you see how the links have now changed to red.
We're going to go back to our blue lagoon default, and again scroll to the bottom, and Save. The final main difference among Drupal themes is whether they are table based or CSS based. You don't need to worry about this distinction generally. Fewer and fewer themes are table based, and the differences mostly have to do with maintenance and modification of the theme itself. If you are not going to make extensive changes to your theme, don't worry about it except to know that CSS-based or table-less themes are more in fashion these days and they tend to be somewhat more flexible and appear a little more consistently from browser-to-browser.
The distinction is a source of long debates, and we won't get into those debates here. We've seen some of the differences among Drupal themes; now let's talk about some of the things that are the same in all of them. For one, as we go back to our homepage the title remains at the top, generally speaking. If there is a slogan or a mission statement, it has a place somewhere up near the top. Here we have the slogan showing up pretty much at the same parity as the title. If we change our theme, however, to Blue Marine, we'll notice that it's put in a slightly different place and at a slightly different level.
See, it's smaller and underneath the title. We're going to switch back to Garland, just to keep everything clean. We're also going to uncheck these other themes, once again, just to keep our installation clean. And scroll to the bottom and click on Save Configuration and we're back at Garland. Finally, we should talk a bit about the layout of the page in general. To see this, we'll go to Administer and Blocks. In the blocks page, you can move things, for example, like the Administration Menu from the left column, to the right column, to the top, and so forth. The good thing about this block's page is it gives you a visual indicator of where the various areas of your theme are.
Here in Garland we have a header up here. We have a right and left sidebar, which are indicated here, and we have two other areas as we scroll down. The content area, which is the main area in here, and the footer, which is where we have our copyright notice and so forth. Not every theme will have exactly the same areas. However, most of them have those five areas, unless it's a two-column theme with just content in a right or left column. So you can see that, Drupal is not, perhaps, as flexible and straight ahead HTML although, of course, it is easier to maintain. It insists on certain zones in the page, but these zones are quite flexible. Even if you don't get deeply into the complex world of theme development, a brief understanding of how Drupal uses these theme to layout it's pages, will help you design a page that flows the way that you want.
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.
Your file was successfully uploaded.