Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member

Introducing base themes: AdaptiveTheme and responsive design

From: Drupal 7 Advanced Training

Video: Introducing base themes: AdaptiveTheme and responsive design

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.

Introducing base themes: AdaptiveTheme and responsive design

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.

Show transcript

This video is part of

Image for Drupal 7 Advanced Training
Drupal 7 Advanced Training

72 video lessons · 11555 viewers

Tom Geller
Author

 
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 10s
    1. Learning from case studies
      3m 13s
    2. Planning your site
      4m 18s
    3. Populating your site with Devel Generate
      3m 42s
    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 53s
    1. Understanding and installing Drush
      5m 23s
    2. Installing Drupal using Drush
      7m 24s
    3. Building a site using Drush
      9m 6s
  6. 31m 59s
    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 27s
  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 35s
    1. Understanding the Rules module
      6m 48s
    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 learning today

Get unlimited access to all courses for just $25/month.

Become a member
Sometimes @lynda teaches me how to use a program and sometimes Lynda.com changes my life forever. @JosefShutter
@lynda lynda.com is an absolute life saver when it comes to learning todays software. Definitely recommend it! #higherlearning @Michael_Caraway
@lynda The best thing online! Your database of courses is great! To the mark and very helpful. Thanks! @ru22more
Got to create something yesterday I never thought I could do. #thanks @lynda @Ngventurella
I really do love @lynda as a learning platform. Never stop learning and developing, it’s probably our greatest gift as a species! @soundslikedavid
@lynda just subscribed to lynda.com all I can say its brilliant join now trust me @ButchSamurai
@lynda is an awesome resource. The membership is priceless if you take advantage of it. @diabetic_techie
One of the best decision I made this year. Buy a 1yr subscription to @lynda @cybercaptive
guys lynda.com (@lynda) is the best. So far I’ve learned Java, principles of OO programming, and now learning about MS project @lucasmitchell
Signed back up to @lynda dot com. I’ve missed it!! Proper geeking out right now! #timetolearn #geek @JayGodbold
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.

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 ?

Become a member to like this course.

Join today and get unlimited access to the entire library of video courses.

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.