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

Installing a new theme


From:

Drupal 6: Creating and Editing Custom Themes

with Chris Charlton

Video: Installing a new theme

By now, I'm sure you're familiar with the core themes in Drupal 6. I think it's time we install a new Drupal theme. In this video, I will download a reliable theme from the Internet, and install it in our Drupal site. So to do that, I actually need to download the theme first. So I am going to go visit drupal.org, the official website for Drupal, and I am going to go click on the Themes section, and now, I am presented with a bunch of themes. But I only want to filter by Drupal 06. So I am going to click to 6.x filter. And now I could see a list of only Drupal 06 themes.
Expand all | Collapse all
  1. 8m 19s
    1. Welcome
      1m 3s
    2. Using the exercise files
      7m 16s
  2. 5m 17s
    1. Learning about Drupal themes
      2m 0s
    2. Building sites today with Drupal
      1m 7s
    3. Required knowledge and software
      2m 10s
  3. 22m 26s
    1. Installing Drupal 6 using Acquia
      4m 4s
    2. Configuring the appropriate modules for a Drupal site
      1m 59s
    3. Creating pages with standard node content types
      4m 36s
    4. Creating custom node content types
      6m 19s
    5. Adding RSS secondary content
      3m 11s
    6. Finalizing site navigation
      2m 17s
  4. 21m 47s
    1. Installing the Theme Developer module (aka Devel)
      6m 27s
    2. Ensuring cross-browser compatibility with conditional style sheets
      5m 3s
    3. Using Firefox extensions for site development
      6m 57s
    4. Working with Dreamweaver
      3m 20s
  5. 35m 13s
    1. Choosing a default theme
      2m 5s
    2. Touring the core themes
      5m 25s
    3. Configuring global theme features and post settings
      4m 46s
    4. Adding a logo and shortcut icon (favicon)
      4m 7s
    5. Setting the administration theme
      4m 0s
    6. Installing a new theme
      3m 47s
    7. Positioning blocks in theme regions
      5m 56s
    8. Setting user theme permissions
      5m 7s
  6. 40m 36s
    1. Using the Color module to change color schemes
      5m 0s
    2. Preparing to build a sub-theme
      7m 13s
    3. Building a sub-theme: Creating the .info file
      8m 51s
    4. Building a sub-theme: Adding custom styles (CSS)
      7m 25s
    5. Building a sub-theme: Adding custom theme regions
      12m 7s
  7. 35m 0s
    1. Exploring a theme folder
      3m 19s
    2. Setting up a theme .info file
      4m 7s
    3. Adding styles (CSS) to a theme
      7m 9s
    4. Including a style sheet for right to left readers
      1m 43s
    5. Creating a print style sheet
      3m 30s
    6. Adding JavaScript to a theme
      5m 49s
    7. Adding graphics and images to a theme
      3m 7s
    8. Understanding theme templates (tpl.php)
      3m 19s
    9. Understanding template variables
      2m 57s
  8. 30m 33s
    1. Understanding page templates
      8m 2s
    2. Creating a template to theme every page (page.tpl.php)
      6m 54s
    3. Creating a template to theme just the front page (page-front.tpl.php)
      4m 33s
    4. Creating a template to theme individual pages (page-node-nid.tpl.php)
      3m 43s
    5. Creating a template for "site offline" maintenance pages
      7m 21s
  9. 13m 20s
    1. Understanding node templates
      4m 24s
    2. Creating a template to theme every node (node.tpl.php)
      2m 16s
    3. Creating a template to theme custom node types (node-type.tpl.php)
      5m 10s
    4. Discovering node templates using the theme developer module
      1m 30s
  10. 21m 32s
    1. Understanding block templates
      3m 32s
    2. Creating a template to theme every block (block.tpl.php)
      2m 37s
    3. Creating a template to theme an individual block (block-module-delta.tpl.php)
      8m 26s
    4. Creating a template to theme all blocks from a single module (block-module.tpl.php)
      3m 41s
    5. Creating a template to theme all blocks in a certain region (block-region.tpl.php)
      3m 16s
  11. 7m 33s
    1. Exploring the comments template (comment.tpl.php)
      5m 20s
    2. Exploring other core modules and their templates (other tpl.php files)
      2m 13s
  12. 10m 5s
    1. Removing unnecessary modules
      1m 43s
    2. Optimizing site performance
      2m 17s
    3. Streamlining site files for launch
      1m 26s
    4. Troubleshooting when a white screen appears instead of Drupal
      3m 15s
    5. Touring Drupal community groups
      1m 24s
  13. 11s
    1. Goodbye
      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 6: Creating and Editing Custom Themes
4h 12m Intermediate Dec 08, 2009

Viewers: in countries Watching now:

Drupal is widely recognized as a powerful back-end system for web sites, but Drupal 6: Creating and Editing Custom Themes shows how the application can also be used to manage the look and feel of a web site. Web architect Chris Charlton introduces the core themes that ship with Drupal. He shows how to install and administer new themes, change color schemes, and add sub-themes to existing themes. He also demonstrates how to build a custom theme from scratch; integrate HTML, CSS, and JavaScript; and apply themes to specific nodes and blocks. Exercise files are included with this course.

Topics include:
  • Setting themes and theme permissions
  • Using the Color Module to change color schemes
  • Building sub-themes
  • Adding HTML, CSS, and JavaScript to themes
  • Understanding templates
  • Applying themes to pages, nodes, and blocks
Subjects:
Developer Web
Software:
Drupal
Author:
Chris Charlton

Installing a new theme

By now, I'm sure you're familiar with the core themes in Drupal 6. I think it's time we install a new Drupal theme. In this video, I will download a reliable theme from the Internet, and install it in our Drupal site. So to do that, I actually need to download the theme first. So I am going to go visit drupal.org, the official website for Drupal, and I am going to go click on the Themes section, and now, I am presented with a bunch of themes. But I only want to filter by Drupal 06. So I am going to click to 6.x filter. And now I could see a list of only Drupal 06 themes.

I am going to go scroll down, and I am actually going to download one of my new favorite themes, called Acquia Slate. This is a new dark theme developed by the TopNotchThemes group, who do excellent Drupal themes. So go ahead and click to download the Drupal 6.x version of this theme. I've already downloaded it. So let's go and learn how to install those files. I am going to minimize my web browser, and, as you could see, the acquia_slate theme folder is on my Desktop. I need to put this into my sites/all themes folder of drupal-6.

So let me open my drupal-6 folder, and of course, I am going to go into the sites/all, and since we don't have the themes folder here, I am going to go create one. So remember, we are in sites/all/themes and this is actually where we would be installing any new themes for Drupal. So I am going to go drag in my acquia_ slate theme, minimize my folder and now I am going to go back to my web browser.

But before I enable the new theme, we need to make sure that we have the administration theme set. So in the Administer screen, I am going to go scroll down and click Administration theme, and we see that I still have it set the Garland. That's what I want. So go back to Administer, and now let's visit the Themes page. We should now see the new theme, Acquia Slate, listed with all the other core themes that come with Drupal. We are going to enable this theme, and even set it as the default. We are going to leave Garland enabled, and click Save configuration.

So now we have not seen anything changed on our side because we're still in the admin screen. So now let's click over to the home page in a new tab, and we see our site has totally changed it's theme using the Acquia Slate theme. Our primary navigation still exists, and the left sidebar renders our navigation block, just as expected. The site title is picked up, all our content is also themed. In fact, let's view one of the inner content pages.

Remember, we are logged in, so that's why we get the View and Edit tabs. But we see that this is actually a very nice theme. Closing this Content page, let's visit the About Us page. It looks good. Now, let's go back to the Administer screen, and of course, we are back to the Garland theme, because the Administration screen was set to Garland. Now, before we go, even though I like the Acquia Slate theme, I am going to actually disable it because we want to create our own custom theme for this flower shop we are building.

So let's go back to the themes administration screen. Let's disable Acquia Slate and choose Garland again as the default theme. Click Save configuration, double check by visiting the home page, and we are back to Garland. So even though Drupal has hundreds of themes available, I would advise you to not download and run any theme without putting it through a little bit of testing first. A good Drupal theme should render well across multiple browsers, and be regularly maintained.

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


Expand all | Collapse all
please wait ...
Q: I'm editing the code in the file page.tpl.php as shown in the movie "Building a sub-theme: Adding custom theme regions":

<?php if ($content_top) ?>
<div id="content-top" class="clear-block">
<?php print $content_top ?>
</div>
<?php endif; ?>
 

But the browser shows the following error message: 
Parse error: syntax error, unexpected T_ENDIF in /home/u/u5522419/www/drupal/sites/all/themes/subgarland/page.tpl.php on line 80.
A: The code is incorrect. (The syntax error, by the way, displayed indicates which line of code contains the error.) The line containing the IF statement is missing the colon character ( : ). It should read:
<?php if ($content_top): ?>
Q: I have a button in Flash, but Internet Explorer is blocking it from opening up. At the top of the window, a message appears saying "Pop-up blocked. To see this pop-up or additional options click here..."
What can I do to this button so that it opens a new browser window and keep IE from thinking it's an unauthorized pop-up?
A: To get around the pop-up blocker, try using the "_self" parameter in Flash. So instead of:
navigateToURL(myURL);
use:
navigateToURL(myURL, "_self");
 
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 6: 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.