Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
As is appropriate, we'll end our tour of base themes with Omega, the last letter of the Greek alphabet. Like AdaptiveTheme, the Omega theme features responsive design. Take a look at the beginning of the AdaptiveTheme video to see what that is. Like Fusion, it benefits from modules created specifically for it. Like both of those themes and like Zen, Omega has terrific documentation. One of the things that makes Omega special is that it's designed; in the words of its creator, to be mobile first. The result is a collection of tools and settings that go way beyond responsive design in some really interesting ways in how it handles small devices such as cell phones.
As always, we'll start with the project page, which is at drupal.org/project/omega. You'll notice a couple of large links up here. One is for the Informational Micro-Site; I'll just open that in another tab, and the other is for the Handbook. Starting with the Micro-Site, this is a sort of marketing for Omega and it's very good and it's been very successful as well as you can see. Omega has gotten tremendous support from people within the Drupal community and you can read about that actually here on this page, which sites are using Omega.
The Omega Handbook, like the other documentation on drupal.org, has its table of contents here in the right column as you scroll down. And as you can see, it's quite a lot of stuff and each one of these ones with an arrow means that there's actually more to it than just that one page. But let's go ahead and install it. Go back to the project page, copy the URL, and install as usual, and paste it in, and there we go! By the way, if you're watching these videos in order, I removed some of those old themes before starting this one just to unclutter the Appearance page a bit.
As we scroll down, you'll notice we have both the Omega theme and one called Alpha. Generally speaking, you don't mess with the Alpha theme. We're going to instead enable and set the Omega theme as the default, and then go back home. You'll notice some strange things immediately. First of all, it shows where the block regions are right there on the page. Second of all, it shows the grid here; that's those pink things in the back. You can turn those on and off with these two checkboxes off to the right. Here I'll show you. Turn off the Grid and turn off the Blocks.
And then as you see, it's just like any other starter theme, very basic layout. I'll actually leave the Grid on as that's helpful for what we'll be doing. There's also this thing down here that says Resize Me. That's just to demonstrate how it's a responsive theme. As you bring it in, it gets rid of first one column, then the next, the menus at the top change, and so forth. If there were graphics on the page, those would also resize. From here, you could create subthemes pretty much the same way you did with the other base themes we looked at, but here's the fun bit.
There's a module that actually does that automatically for Omega. We'll find it at drupal.org/project/omega_tools. I'll go ahead and install it. We do so in the usual way, and paste it in. As you discover on the Modules page and you would've discovered also on the Project page, this also requires another module called Ctools.
So I'll go and get that module as well. It's at drupal.org/project/ctools, and I scroll down and install it as usual, and paste it in. Now when I scroll to the bottom of the page where that Omega Tools module is, I can enable it and it'll automatically turn on Ctools. Now comes the fun part. Let's create a subtheme, but this time we won't actually have to go back to the Terminal to do it.
Just go up to Appearance and down to our Omega core. You'll notice an unusual link here, Download. Here's how that works. You'll notice that it actually grabbed the theme itself and downloaded it to the Ddsktop. When we open it, we get exactly what we'd expect. That's part of the Omega Tools module although it's not the part that's specific to Omega. It also added that link to all of the other themes. Very handy though. But let's go back up to the top and you see another link here, Create new Omega subtheme.
I click that and I'll call it lynda Omega. I'll accept all of the defaults and as you see they're intelligent for using Omega. They put the created theme in the usual place, that is the all folder. It goes off with the base theme of Omega and it starts with the Starterkit. So I'll just say Save and continue. Once it's created, you can change some of the things inside the theme such as its Version, its Description. I'll just say This is based on the Omega, and Finish.
I should mention that your web host might not be set up to allow this to auto-install. In that case, it'll be downloaded to your local computer, and you'd install it in the normal way. We scroll down and there's our theme. I'll enable it and set default. And as you'd expect, since we haven't made any changes, it looks exactly like the Omega theme that it's based on. We could turn on and off the Blocks and so forth. It's exactly the same. Now that that's done, we can go on to edit the theme's CSS and play with its settings just as you've usually done with a starter theme.
Those settings are amazingly detailed and really show off how much Omega is built around mobile devices. I'll show you some of the settings that are in the theme itself rather than the CSS that you'd edit on the Terminal program on your web host. I click Appearance. By the way, if you want to change any of the information about the theme, its version, its description, and so on, you can do so by clicking this Edit link here. But let's go on. As with the other themes you've seen in this course, there are a lot of options here and it would take too much time to go into all of them.
But it does show that quite a lot is around mobile. As the author of this theme said, it's mobile first. So it has specific information about HTC Android, which is a mobile device. It talks about the viewport which is language that's used when you're talking about portable devices and so on. You defined Zones, which then change depending on what kind of device you're using to look at the site. And then there's other advanced tools down here. I'll leave it to you to explore those. Well, that covers the essentials of Omega and we haven't touched its documentation or even tried playing with its settings or CSS in any depth.
The creator of Omega also created a remarkable module called Delta, which lets you vary layouts depending on a variety of criteria. I've dedicated a video to Delta elsewhere in this course. If you've been watching these videos in order, you've now seen four base themes; each with its own mixture of simplicity and features. I'll be very interested to see which ideas win out both in the market of Drupal developers and ultimately, as are integrated into core Drupal. But in any case, getting used to all of these ideas benefits you right now as a site builder.
Get unlimited access to all courses for just $25/month.Become a member
82 Video lessons · 101476 Viewers
61 Video lessons · 88227 Viewers
71 Video lessons · 72109 Viewers
56 Video lessons · 103869 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.
Your file was successfully uploaded.