Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
So far you've seen how the Zen-based theme is a flexible but simple starting point while the Fusion-based theme marries extreme grid and styling flexibility with custom development. The third base theme in our tour is optimized for something completely different. It's an example of what's called responsive design, which is easiest to understand by seeing an example. And the example I'll use is at bostonglobe.com. When we look at it on a widescreen like this, we see it in multiple columns. However, if we were to be looking at it on a smaller screen, for example, a portable device, you see that first it adapts how wide the columns are.
Then as we bring it in even further, it cuts down on the number of columns from three to two. As we go, you'll also notice that this graphic is dynamically resizing, you can see we make it larger and smaller. And finally, if we go all the way down to the way we'd see it on a portable device, it's one column and all of the menus have changed as well. Let's take another look at that. See it's actually quite sophisticated and you can do that in Drupal using AdaptiveTheme, Fusion, or Omega, which I'll show you. So let's go ahead and add some of those features.
Bring my window back out and close this, and then I'll go and grab AdaptiveTheme at drupal.org/project/adaptivetheme. As with the other starter themes you've seen, this one has quite a lot of documentation. It's really quite good that way. And like Fusion it's supported by a commercial company. I'll talk more about that company in a minute. But for now, we'll just download it and install it. We do so in the usual way and paste it in. I made that change. Scroll down.
As with Fusion, this one has a substheme, it's a core and a subtheme, and then there's also another one which is often used for administration. It takes the place of the 7 theme that comes in Drupal's core. If I enable and set the core as the default, and then go back to our home page, you see that it's very much like the other starter themes we've looked that. Just very, very basic layout styling. Now we'll create a subtheme the same way we did with Zen. I'll go through it quickly. If you have any problems with this step, watch that video.
So I'll just write it out. As usual, I'll add a local.css stylesheet. In this case, I'm simply going to copy with Ctrl+K and then paste it twice with Ctrl+U, and I can just change blocks.css to the local.css. As with other starter themes, this includes several options which are commented out. Down toward the bottom, you see the settings that allow this theme to change from a Standard bigscreen to a Tablet, when held in one direction, the Tablet held in the other direction, and smartphone layouts as well.
That's how it jumps from that three- column to two-column to one-column and does other such changes. But that's all we need to change, so I'll just write it out and save. Now when we go back to our browser, we can take a look at our themes, scroll down to the bottom and enable that one, which you might remember we called lynda Adaptive. And as we show our site, of course, nothing changes because we didn't change any of the styling yet. Now that we're done, we can go in and edit that local.css file as usual.
Just as a demonstration, I'll add a background color to the body. Then I go back to my site and reload. So far we've done what you've seen with every other starter theme, but here with AdaptiveTheme, the magic is in the settings. So let's go up there by clicking Appearance, and Settings next to our theme. In the vertical tabs over here, you see that you can change the layout depending on whether it's a Standard Layout that is a big screen, on a Tablet, and here you see it has an interesting arrangement for things that takes into account the size of that screen, or a Smartphone.
Basically, these are just increasingly small versions of the same site. As with Fusion, there are additional settings for Breadcrumbs and Search Results and so on, and you can explore these on your own. So so far, there's nothing really that different between this theme and the other starter themes we looked at. But there's something extra cool about AdaptiveTheme. Like Fusion, there are several attractive and ready-made subthemes available to it. What's really unusual about it is that it has subthemes for those subthemes. I'll show you how that works. Let's go back to our AdaptiveTheme page here.
This is the project page at drupal.org/ project/adaptivetheme. and go down and it named some of the other free themes available. Let's take a look at Corolla. I'm going to install this and it'll show you how the subtheme to a subtheme works. Scroll down, copy the link, and install it as usual, and paste it in. Scroll down. You'll notice in the notes here that it's now a subtheme of AdaptiveTheme and you must use AdaptiveTheme in order to use Corolla.
And just so that we can see what that looks like, let's go home and there it is. So far, nothing is different between this and any other theme. However, if we go back into our Terminal and take a look at what that actually means, let's see where we are. Go up a bit and go down into that corolla folder. When we nano corolla.info, we see as you'd expect, the base theme is adaptivetheme. However, it's a first-class citizen in the sense that you can then make a subtheme of it and just adapt a little bit of what Corolla gives you.
Now it's pretty complicated the way that it does this because the interaction between AdaptiveTheme and Corolla is quite complex. So if you want to do such a sub- theming job, there's a special tool for that called Footheme. You can find it at drupal.org/project/footheme. So to recap, AdaptiveTheme is a base theme and you can use it just like any other base theme and build from scratch on top of it. Then there are additional themes such as Corolla and Sky, which act as subthemes to AdaptiveTheme. Then you could further subtheme Corolla or Sky or Picture Reloaded by adding the Footheme and that'll copy over all the special features that you get from both AdaptiveTheme and Corolla.
That's a good way to go if you find that there are some things that you like about Corolla or the other versions of AdaptiveTheme subthemes but you want to make some small changes. I really like AdaptiveTheme. For my purposes, it occupies a great middle ground between Zen's simplicity and Fusion's hard-core geekiness, even though at first the whole idea of doing two levels of subtheming can be a little bit confusing. As with Fusion, the creators of AdaptiveTheme offer commercial support, and if you want to find out more about that go to adaptivethemes.com.
Incidentally, the creator of AdaptiveTheme also leads the design initiative for Drupal 8. So although that'll be a group effort, I imagine that his influence will lead to some of AdaptiveTheme's concepts becoming part of Drupal 8.
Get unlimited access to all courses for just $25/month.Become a member
61 Video lessons · 99263 Viewers
56 Video lessons · 112535 Viewers
71 Video lessons · 81341 Viewers
131 Video lessons · 39056 Viewers
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.