Drupal 7 Advanced Training
Illustration by John Hersey

Drupal 7 Advanced Training

with Tom Geller

Video: Introducing base themes: Fusion and extensibility

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.
Expand all | Collapse all
  1. 4m 51s
    1. Welcome
      1m 7s
    2. Planning your Drupal career
      3m 44s
  2. 25m 46s
    1. Comparing development and production environments
      6m 22s
    2. Configuring your settings.php file
      7m 10s
    3. Running multiple sites from one Drupal installation
      7m 32s
    4. Troubleshooting common issues
      4m 42s
  3. 51m 20s
    1. Understanding your Drupal site's place on the web
      2m 44s
    2. Selecting a web host
      7m 20s
    3. Using Unix's command-line interface
      8m 23s
    4. Working with your web host's access restrictions
      4m 51s
    5. Using cPanel and other graphical web host interfaces
      3m 40s
    6. Transferring files to and from your web host
      5m 49s
    7. Moving databases using phpMyAdmin
      6m 34s
    8. Moving databases using Unix commands
      6m 8s
    9. Modifying server configuration files
      5m 51s
  4. 27m 11s
    1. Learning from case studies
      3m 13s
    2. Planning your site
      4m 18s
    3. Populating your site with Devel Generate
      3m 43s
    4. Managing URL paths
      3m 20s
    5. Restricting access to downloadable files
      5m 55s
    6. Reusing site components with the Features module
      6m 42s
  5. 21m 54s
    1. Understanding and installing Drush
      5m 23s
    2. Installing Drupal using Drush
      7m 24s
    3. Building a site using Drush
      9m 7s
  6. 32m 0s
    1. Backing up with the Backup and Migrate module
      8m 17s
    2. Moderating comment spam
      6m 47s
    3. Migrating from Drupal 6
      4m 28s
    4. Migrating to Drupal 7
      12m 28s
  7. 22m 24s
    1. Letting users log in through OpenID
      5m 10s
    2. Letting users log in through Facebook, Twitter, and other services
      9m 43s
    3. Republishing posts on Facebook and Twitter
      7m 31s
  8. 1h 5m
    1. Understanding Drupal's base themes
      5m 55s
    2. Introducing base themes: Zen and subtheming
      11m 35s
    3. Introducing base themes: Fusion and extensibility
      10m 44s
    4. Introducing base themes: AdaptiveTheme and responsive design
      7m 25s
    5. Introducing base themes: Omega and mobile devices
      7m 9s
    6. Using Firebug and other theming tools
      7m 20s
    7. Modifying themes with Sweaver
      6m 59s
    8. Modifying themes with Livethemer
      8m 45s
  9. 49m 36s
    1. Understanding the Rules module
      6m 49s
    2. Demonstrating how Rules works in Drupal Commerce
      3m 53s
    3. Creating practical rules
      6m 37s
    4. Improving rules
      9m 10s
    5. Defining conditions with the Context module
      7m 51s
    6. Varying layout with the Context and Delta modules
      5m 0s
    7. Varying layout with the Panels module
      10m 16s
  10. 52m 46s
    1. Enabling social features
      9m 46s
    2. Implementing a voting system
      9m 15s
    3. Rewarding good behavior with the Userpoints module
      5m 57s
    4. Setting up Organic Groups
      6m 28s
    5. Adding content to groups
      2m 21s
    6. Seeing group activity better with views and panels
      10m 13s
    7. Making groups private
      4m 54s
    8. Letting each group have its own permissions
      3m 52s
  11. 25m 32s
    1. Understanding packaged Drupal distributions
      2m 8s
    2. Getting a head start with Acquia Drupal
      7m 28s
    3. Creating online storefronts with Drupal Commerce
      6m 53s
    4. Creating government web sites with OpenPublic
      9m 3s
  12. 1h 30m
    1. Taking the assignment
      3m 26s
    2. Planning the project
      3m 43s
    3. Preparing the infrastructure
      8m 42s
    4. Starting the design
      7m 35s
    5. Filling in the content
      7m 29s
    6. Developing the layout
      10m 27s
    7. Finishing the layout
      7m 8s
    8. Refining the CSS
      6m 32s
    9. Setting up sections for regional offices
      4m 53s
    10. Configuring regional offices
      7m 18s
    11. Connecting to social media
      5m 9s
    12. Cleaning up
      12m 32s
    13. Securing the site
      5m 56s
  13. 37s
    1. Next steps
      37s

Start your free trial now, and begin learning software, business and creative skills—anytime, anywhere—with video instruction from recognized industry experts.

Start Your Free Trial Now
please wait ...
Watch the Online Video Course Drupal 7 Advanced Training
7h 50m Intermediate May 17, 2012

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.

Topics include:
  • Moving a site from the development environment to production
  • Hosting a Drupal site
  • Moving databases with phpMyAdmin and Unix commands
  • Making site administration more efficient with Drush
  • Backing up site data
  • Moderating comments
  • Migrating from previous versions of Drupal
  • Working with themes
  • Creating variable layouts
  • Enabling social features
  • Creating an online store with Drupal Commerce
Subjects:
Developer Web
Software:
Drupal
Author:
Tom Geller

Introducing base themes: Fusion and extensibility

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.

 
Share a link to this course

What are exercise files?

Exercise files are the same files the author uses in the course. Save time by downloading the author's files instead of setting up your own files, and learn by following along with the instructor.

Can I take this course without the exercise files?

Yes! If you decide you would like the exercise files later, you can upgrade to a premium account any time.

Become a member Download sample files See plans and pricing

Please wait... please wait ...
Upgrade to get access to exercise files.

Exercise files video

How to use exercise files.

Learn by watching, listening, and doing, Exercise files are the same files the author uses in the course, so you can download them and follow along Premium memberships include access to all exercise files in the library.


Exercise files

Exercise files video

How to use exercise files.

For additional information on downloading and using exercise files, watch our instructional video or read the instructions in the FAQ .

This course includes free exercise files, so you can practice while you watch the course. To access all the exercise files in our library, become a Premium Member.

* Estimated file size

Are you sure you want to mark all the videos in this course as unwatched?

This will not affect your course history, your reports, or your certificates of completion for this course.


Mark all as unwatched Cancel

Congratulations

You have completed Drupal 7 Advanced Training.

Return to your organization's learning portal to continue training, or close this page.


OK
Become a member to add this course to a playlist

Join today and get unlimited access to the entire library of video courses—and create as many playlists as you like.

Get started

Already a member ?

Exercise files

Learn by watching, listening, and doing! Exercise files are the same files the author uses in the course, so you can download them and follow along. Exercise files are available with all Premium memberships. Learn more

Get started

Already a Premium member?

Exercise files video

How to use exercise files.

Ask a question

Thanks for contacting us.
You’ll hear from our Customer Service team within 24 hours.

Please enter the text shown below:

The classic layout automatically defaults to the latest Flash Player.

To choose a different player, hold the cursor over your name at the top right of any lynda.com page and choose Site preferences from the dropdown menu.

Continue to classic layout Stay on new layout
Exercise files

Access exercise files from a button right under the course name.

Mark videos as unwatched

Remove icons showing you already watched videos if you want to start over.

Control your viewing experience

Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.

Interactive transcripts

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.

Learn more, save more. Upgrade today!

Get our Annual Premium Membership at our best savings yet.

Upgrade to our Annual Premium Membership today and get even more value from your lynda.com subscription:

“In a way, I feel like you are rooting for me. Like you are really invested in my experience, and want me to get as much out of these courses as possible this is the best place to start on your journey to learning new material.”— Nadine H.

Thanks for signing up.

We’ll send you a confirmation email shortly.


Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

   
submit Lightbox submit clicked
Terms and conditions of use

We've updated our terms and conditions (now called terms of service).Go
Review and accept our updated terms of service.