Viewers: in countries Watching now:
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.
The previous video was ostensibly about using the Zen starter theme, but really it focused on how to create a subtheme. You will do that again for the second most popular base theme, Fusion, but from there you'll find a lot of differences between the two. Fusion is especially notable in that it's intended for use together with a module called Fusion Accelerator, which adds quite a lot of options that you can change without having to write custom code. In earlier versions it used something similar called Skinner. So be sure to read the documentation if you're using an older version, but even without that module, Fusion is pretty amazing.
We will start, as usual, by visiting the Fusion project page at drupal.org/project/fusion. Another thing that's unusual about Fusion is that it's sponsored by a commercial company, whereas a lot of the other themes are built by either hobbyists or people making a consulting living on their own. In this case, however, the folks who make Fusion, also do these Advanced Fusion themes, which are based on Fusions. So you need to know how to use Fusion in order to use their themes, or I should say in order to really adapt their themes to their fullest extent.
Something to note about the Fusion theme is that there are actually two different ways to create subthemes and there is a link down here in the Installation section: which one should I use? Basically, it falls into fusion_ starter and fusion_starter_lite. Fusion-starter is the more sophisticated of the two and that's the one that we're going to use. They both are basing themselves on fusion_core by the way. That's the base theme in this case. For more information, you can continue to follow those links and see more documentation on the Fusion site you just saw, but let's get going.
As usual, we go down and copy our URL and then install it on our site. I'm already in the proper directory that's on my lynda site, sites/all/themes. Then as usual, I'll use wget to grab the theme, uncompress it, and delete the archive. Before we make any changes, we can see what the core looks like by going back to our site, clicking Appearance, and then setting it as the default.
Actually, the one we're going to copy is Fusion Starter, so I will make that the default. If we go back to our front page, you can see what that looks like. Let's take a very quick look at the settings that come with the Fusion core theme. We click Appearance again and then click Settings. As you can see, there are a lot more settings in this theme than in most themes, and these are divided into these vertical tabs. There are ways to change the grid. So at 16 or 12 column, you change whether they're fluid or fixed. Again, you don't have to change the .info file as you did in the Zen theme.
You can change where the sidebars are, all kinds of things about the typography, whether there's a breadcrumb, and exactly what shows up when you search, that is, in the results page. We won't go into details about these here though. Now remember how I mentioned the Fusion Accelerator module, you will also notice that it's here in a link from the Grid Settings tab. We are going to hold off on installing it, because I want you to see Fusion in its simplest form first. As I did with Zen, I'll first create a subtheme. I will do this quickly.
If you need any help, see the Zen video. There are some small changes which I'll point out and as always your best source for information is the Themes documentation starting with the README.txt file that comes with it. So I will go back to my terminal, go down into the Fusion folder, and see what we have. Let's take a look at that README file. Here you have instructions on how to create a subtheme, including some of the peculiarities.
Again, I'll walk you through all of this, but this is a good place to go if you have any problems. As with Zen, I will copy this fusion_ starter folder, this is the subtheme up one level so that it's at the equal level with fusion_core, and I will call that lyndafusion. Remember when you do a Copy command, you have to do it recursively if you're starting with a folder; otherwise, it will try to copy just the folder without the contents and it will fail.
Then I am going to go into that folder. I go up one level and then back down again into lyndafusion. Let's see what we have. Unlike the Zen theme, there is actually very little here. There is not even any template files. That's because as with Zen, it's inheriting all that stuff from its base theme. Only things that override get put into the subtheme. As before, we have to rename this fusion_starter.info to be the name of our theme, and let's take a look at that file.
As before, we changed the name and description, and note that the base theme is that Fusion core that we already have. Then there is one other thing we have to do that's unusual to fusion, we have to change the name of this stylesheet, instead of being fusion-starters-style.css, it should be lyndafusion-style.css, or of course, you will use whatever name you would have for your theme. There is nothing else we have to change here, but I just want to point out how much documentation there is, as well as how much stuff there is in here.
Quite a bit of this has to do with it being a responsive theme, which I'll talk about a little bit more later, but for now, I'll just save that and then I will go into that CSS folder to change the name of that file that I referenced. That's actually all that we have to do. This subtheme inherits most of its features from the base theme. which is Fusion core. Now we can add a local CSS file as you saw with the Zen theme and get the styling. But with Fusion, you're better off starting with that single unified CSS file.
I will show you why, by looking inside that file. Unlike most themes which split the styles into multiple files, this one keeps it all in one, but it leaves a lot of the styles blank. The good thing though is that if you look at this, you get to know exactly what the names of the CSS are. So you don't have to go poking around quite as much with Firebug or some other CSS tool. It's just all right there in front of you. It's a lot easier to edit in my opinion than a lot of themes that keep things sort of obscure. It helps also that we have all of this wonderful documentation in the CSS file itself.
Anyway, a lot of these themes control happens outside of these files. It's in those Settings and the Fusion Accelerator module. I already showed you a few of those here and I leave it to you to explore. But now let's add the Fusion Accelerator module. It does so much that I won't actually create any changes, but just very quickly run through the concepts. To get it, go to drupal.org/ project/fusion_accelerator. Then I will go down and install it as usual. I will simply copy and paste those. And paste it in.
I made that change and Enable it. Scroll down. I will just Enable all of the modules that are available to me. The one that's not a specific to Internet Explorer for Version 6 to 8, which requires little extra handling. We are not going to worry about that. Just go down and Save configuration. Then I will configure it. Scroll down. As usual you can find the Configure link next one of the modules.
Now we reach one of the features that's unusual to Fusion. It is Skins. Skins are predefined collections of styling directives. They are created mostly through programming. The point of Fusion Accelerator is to make access to those skins easy via the web interface after they've been created. So here we have a list of Applied skins, and of course we don't have any. There is also Grid Tools, which it uses to extend the list of layouts. It requires editing the .info file as well. I recommend that you take a look at the documentation for that.
You might remember earlier we saw that you could choose a 16-column or 12-column grid. Well, if you wanted a 9-column grid that's fluid or something like that, you could create that here. There's a Skin library that includes some typical skinning options that you might use, and then ways to set Page and Region rules. This isn't the same as the Rules module, which you will see elsewhere in the series. What should be clear from this video is just how deep these base themes can get, especially when extended through the use of a module. I didn't even get into the Fusion subthemes that are available for free on drupal.org.
If I go to Drupal.org/project/fusion, and then scroll down to Fusion themes that are available, you can see there are a huge number of them in addition to the Premium themes that the folks who make Fusion offer. If for example, you started using Acquia Marina, which is quite a popular theme, by the way, you will have access to all of these extensions. You will be able to skinning and different grid formats and so forth. Now before finishing this video, I am just going to turn off that Fusion Accelerator module, because I found that it tends to get in the way if you're not actually using one of the Fusion themes.
Go down, turn off the modules, and of course, we'll have to come back and do the same for Apply Skins. I made that change, then scroll to the bottom and save. One thing that I didn't discuss is that Fusion is a responsive theme. That's a theme that adapts to make your web site readable on a variety of devices, such as mobile phones, and as you know that's becoming more and more important as an increasing percentage of the population accesses the web through such devices.
We will talk about that little bit more in the videos about Adaptive Themes and Omega. Fusion is an interesting case of a commercial company; in this case one called TopNotchThemes that's building a business through interacting with the Drupal community with these free tools. Everything you saw here is free and open-source software, yet the documentation is on their own site, rather than drupal.org, and the company sells their own themes based on Fusion. Now there's always discussion about such commercial and open-source interactions, but this one I have to say has worked out quite nicely for everyone.
The community gets good tools and support, while TopNotchThemes gets an audience that understands its complex products.
There are currently no FAQs about Drupal 7 Advanced Training.
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.