Drupal 7: Creating and Editing Custom Themes
Illustration by John Hersey

Creating a theme folder, theme structure, and a .info file and enabling a theme


From:

Drupal 7: Creating and Editing Custom Themes

with Chaz Chumley

Video: Creating a theme folder, theme structure, and a .info file and enabling a theme

Now that we have our content in place, it's time that we begin to create our theme folder and base structure along with the .info file and any of references to stylesheets that need to be applied to our theme. We will also review the Drupal HTML output and discuss what steps we need to take to get the Drupal output to match our static HTML. Let's begin by browsing to our editor and expanding these sites>all>themes folder and let's go ahead and create a new folder for our theme, so right-click and say New>Folder and give it a name of samoca.
Expand all | Collapse all
  1. 5m 58s
    1. Welcome
      1m 3s
    2. Using the exercise files
      2m 4s
    3. Viewing the finished project
      2m 51s
  2. 23m 21s
    1. Installing Drupal 7 (Mac or Windows)
      7m 23s
    2. Using a development environment
      3m 36s
    3. Installing contributed modules
      3m 43s
    4. Using the Administration Menu module
      3m 55s
    5. Using the Backup and Migrate module
      4m 44s
  3. 15m 36s
    1. Using the Devel and Theme Developer modules
      7m 23s
    2. Using Firefox, Firebug, and Web Developer extensions
      4m 56s
    3. Using the Block Class module
      3m 17s
  4. 9m 42s
    1. Exploring the Appearance interface
      3m 20s
    2. Choosing global and theme-specific settings
      2m 55s
    3. Installing prebuilt themes
      3m 27s
  5. 10m 40s
    1. Anatomy of a theme
      2m 57s
    2. Structure of a theme
      1m 52s
    3. Understanding templates and variables
      4m 11s
    4. Exploring the theme registry
      1m 40s
  6. 27m 23s
    1. Exploring the Bartik themes folder, file structure, and .info file
      5m 45s
    2. Exploring how CSS references work in Drupal
      10m 49s
    3. Exploring how script references work in Drupal
      5m 7s
    4. Exploring regions and how they are referenced in a theme
      5m 42s
  7. 11m 5s
    1. Using the Backup Migrate module to create content for a web site
      2m 33s
    2. Creating a theming roadmap
      3m 10s
    3. Creating a theme folder, theme structure, and a .info file and enabling a theme
      5m 22s
  8. 54m 5s
    1. Customizing HTML templates and variables
      5m 29s
    2. Customizing page templates and variables
      13m 43s
    3. Creating regions and rendering page variables
      11m 36s
    4. Customizing region templates and variables
      53s
    5. Customizing node templates and variables
      4m 49s
    6. Customizing block templates and variables
      12m 14s
    7. Customizing view templates and variables
      5m 21s
  9. 13m 36s
    1. Removing unnecessary modules
      2m 46s
    2. Optimizing the CSS and JavaScript
      2m 45s
    3. Enabling caching
      4m 43s
    4. Exploring the performance settings
      3m 22s
  10. 44m 19s
    1. Recreating HanselAndPetal content, files, and the .info file
      14m 0s
    2. Adding an HTML template and modifying page templates
      11m 25s
    3. Converting node templates and page variables
      10m 30s
    4. Converting block templates and page variables
      3m 41s
    5. Converting miscellaneous templates and cleaning up CSS
      4m 43s
  11. 1m 11s
    1. Goodbye
      1m 11s

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: Creating and Editing Custom Themes
3h 36m Intermediate Jan 12, 2012

Viewers: in countries Watching now:

Drupal 7: Creating and Editing Custom Themes shows the tools and techniques needed to build custom web sites with Drupal. Author Chaz Chumley introduces Drupal theme administration and takes a look at basic theming concepts, such as templates, regions, and variables. The course explores how Drupal default themes are configured and structured and how to install and edit a theme. The course also explores the tools a designer needs to create a Drupal 7 theme, using HTML, CSS, PHP, and Drupal templates, or migrate an existing Drupal 6 theme to Drupal 7. Exercise files are included with this course.

Topics include:
  • Installing Drupal 7 on Mac or Windows
  • Using the Devel and Theme Developer modules
  • Understanding templates and variables
  • Choosing global and theme specific settings
  • Exploring how CSS and JavaScript references work in Drupal
  • Creating a theme roadmap
  • Creating the theme folder, structure, and .info file
  • Customizing HTML templates and variables
  • Creating template regions and rendering page variables
  • Optimizing site CSS and JavaScript
  • Understanding performance considerations such as caching
  • Migrating themes from Drupal 6 to Drupal 7
Subject:
Web
Software:
Drupal
Author:
Chaz Chumley

Creating a theme folder, theme structure, and a .info file and enabling a theme

Now that we have our content in place, it's time that we begin to create our theme folder and base structure along with the .info file and any of references to stylesheets that need to be applied to our theme. We will also review the Drupal HTML output and discuss what steps we need to take to get the Drupal output to match our static HTML. Let's begin by browsing to our editor and expanding these sites>all>themes folder and let's go ahead and create a new folder for our theme, so right-click and say New>Folder and give it a name of samoca.

Now that we have the samoca folder, we need another folder to hold all the assets. Right click on samoca and say New> Folder and give it a name of assets. Now if we expand the Exercise Files for 06_03, I want to copy in both the CSS and the images into my assets folder. I'll go ahead and select both of those, right-click say Copy, tab back down to my assets folder, and paste them.

Now that I have my assets in place it's time that we create a new file called samoca.info. This will hold all of our theme's metadata. Right-click on the samoca folder and say New>File. We are going to give this a name of samoca.info. The first thing that any theme needs is a name and this is a required field. So let's go ahead and add that now, name = Samoca. Next it would be nice if our theme actually had a description.

While it's not a required field, it is highly recommended that we add it. Let's go ahead and add that now, description = A custom theme for SAMOCA. Next we need to add the required metadata to specify which version of Drupal our theme is compatible with. This is core = 7.x. Remember that if you do not specify the core or specify a version less than the current Drupal instance that you are using, you will not be allowed to enable this theme.

So make sure that you specify the proper core for the theme that you are developing. Let's go ahead and save this, browse back to Drupal, and then navigate to the Appearance interface. From here we want to locate our theme. So scroll down to Disabled Themes and we see the new theme that we've started to create. Go ahead and click on Enable and set default, close the Appearance interface, we are now seeing that default Drupal HTML output which gives us a good example of what styling, if any, gets applied by the core and contributing modules.

And we could technically create a theme by creating a Style Sheet directly addressing the default elements and classes that Drupal outputs without even touching a template. However, let's add some CSS so that our theme starts to take shape. Begin by browsing back to your editor. Go ahead and tab down a couple of spaces and let's add a comment for CSS. If we scroll back up to the Exercise Files, we see that we already have a copy of the samoca.info file.

Let's go ahead and open that and I want to copy the four references to stylesheets. Go ahead and paste those in and then I'll go ahead and discuss what's happening here. First of all there is a stylesheets array. The stylesheets metadata references the actual location where our stylesheets reside. In this case we are saying stylesheet, all, equals assets/css/reset, typography, layout, and drupal.

Now that we have the metadata in place for a theme, we can save our .info file, tab back over to our Drupal instance, and Flush the page cache. Now we're beginning to see some of the theme's characteristics be applied. Let's go ahead and quickly open up Firebug and take a look at the head element and scroll down a little bit to where we can actually see the reference to our stylesheets that Drupal is outputting. So we now know that our metadata information is being picked up by Drupal and outputted properly.

Go ahead and close Firebug and if you'd like, you can go ahead and start comparing this to our static theme, and as you see, we're not quite there yet, but we are picking up some of the styling. For instance, we have some background graphics that if we take a look at our Drupal instance are starting to be picked up. We'll slowly keep working through this and modifying templates so that our HTML output and our Drupal will slowly begin to match. It's time to discuss exactly how we need to get the HTML and page content to match our static website a little better.

Let's move on to reviewing the html.tpl. php and page.tpl.php templates in Drupal 7.

Find answers to the most frequently asked questions about Drupal 7: Creating and Editing Custom Themes .


Expand all | Collapse all
please wait ...
Q: The Acquia Dev Desktop Control Panel won't open after I restart my system. Is this a bug? What can I do to fix it?
A: Some Mac users are having semi-serious difficulties with the Acquia Dev Desktop Control Panel repeatedly failing to open after routine system restart. See here and here for details.

Fortunately, a reasonable work-around for an otherwise crippling issue is running this shell command in Terminal:
 
sudo /Applications/acquia-drupal/Acquia\ Dev\ Desktop\ Control\
Panel.app/Contents/MacOS/AcquiaDevDesktopControlPanel
 
Acquia Dev Desktop Control Panel is not the only solution available. As an alternative, Mac users can switch to MAMP and Windows users can switch to WAMP, until this issue is resolved permanently.
 
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: Creating and Editing Custom Themes.

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.