This page is archived
We're keeping this page up as a courtesy to folks who may need to refer to old instructions. We don't plan to update this page.
Alternate resources
Theming Basics for Drupal 7 will provide a solid foundation for translating designs into Drupal themes. You'll learn to work with .info and tpl.php template files, how to add CSS and JavaScript, how to work with the render system new in Drupal 7, how to override templates, create regions, and use the Theme Developer tool. You'll start with the original HTML, CSS and JavaScript template files that were provided by the designer so that you can follow along in translating the design into a Drupal 7 theme.
This series will cover the basics of Drupal theming while the more advanced theming topics of working with the template.php file will be covered in the Advanced Theming for Drupal 7 series. These videos pair with each other, and will finish the complete implementation of the 960 Robots theme used in both videos. You can download the theme we're building from Drupal.org: 960 Robots.
Theming Basics for Drupal 7 will provide a solid foundation for translating designs into Drupal themes. You'll learn to work with .info and tpl.php template files, how to add CSS and JavaScript, how to work with the render system new in Drupal 7, how to override templates, create regions, and use the Theme Developer tool. You'll start with the original HTML, CSS and JavaScript template files that were provided by the designer so that you can follow along in translating the design into a Drupal 7 theme. The video explains Drupal's design vernacular, concepts, and special needs. We'll show you how to associate the proper CSS & Javascript files, add all of the necessary regions, and control the HTML output through page and node-specific templates. You'll learn about the best tools and strategies for controlling the look and feel of your Drupal website.
This series will cover the basics of Drupal theming while the more advanced theming topics of working with the template.php file will be covered in the Advanced Theming for Drupal 7 series. These videos pair with each other, and will finish the complete implementation of the 960 Robots theme used in both videos. You can download the theme we're building from Drupal.org: 960 Robots.
Examples in this video are based on Drupal 7 and its variants.
In this introduction video, we set the stage for the Theming Basics series. We give an overview of what Drupal theming is, the common files we will work with, and the overall steps involved. Then we start off by defining and taking a look at the .info file and HTML template (tpl.php) files. We talk about regions and theme features, introduce the render() function, and explain dynamic templates. While we are teaching Drupal 7 theming, we also make sure to point out the important differences between Drupal 6 and 7.
Additional resources
In this chapter, we'll walk through some of the best practices for filling out a stock Drupal site so that you can start to have some dummy content generated by different users and tagged with different taxonomy tags. We'll step through creating content with the devel generate module, and then do some other site preparation tasks such as creating some menu items and adding a shortcut link to the performance page so that you can quickly access the clear cache button.
Additional resources
This video walks through the new interface in Drupal 7 for enabling themes, setting them to be the default, and configuring the administration theme. It also walks through the process of downloading a contributed theme, and where to store it. Finally, it walks through the theme settings pages that provide a user interface for turning on and off specific options for a theme.
Additional resources
This video goes through some of the strategies for translating a design into a Drupal theme. We talk about the two approaches of adding the HTML to an existing Drupal theme template vs. inserting dynamic variables into the HTML provided by our designer. Throughout this video, we're going to be assuming that our designer has delivered the full HTML, CSS and JavaScript to us, and we'll be adding in the dynamic variables. In this process we start to look at the design and start to break it up into it's component Drupal parts and start to strategize for how to build out the site and implement the design..
Additional resources
This chapter covers some really handy browser extensions in the process of theming. For Firefox, there's the Web Developer Toolbar for turning off and on JavaScript, resizing the browser window to different sizes, and inspecting elements. It also has the capability to test changes to CSS files in a format that is easy to copy and paste into the source file. We also show off the basics of the popular Firebug extension, and the equivalent functionality that is now built in to webkit-based browsers such as Safari and Chrome.
Additional resources
This chapter goes through the minimum steps for registering a theme within Drupal by creating a .info file. It also shows the syntax for a theme to be able to add custom CSS to your site as we start to implement our example design.
Additional resources
This video walks through the process of replacing static content in the page.tpl.php file with dynamic variables. Joe talks about the html.tpl.php file as well as pointing some of the important variables that should be included within the theme.
Additional resources
In this chapter, we add some sidebar and footer regions to the page via the .info files, and printing those new regions out in our page template file, adding some blocks to help with testing. We also talk about Devel and Krumo, and how we can use those to find out everything that is available in out page array, using the dsm() function. While inspecting out page array, we point out the differences between elements and properties within renderable arrays.
Additional resources
Walks through the process of copying the default node.tpl.php file from the core node module into the theme, and then customizing the output specific to individual in order to match the design. See how to add specific variables, when to use conditional if statements and the best way to debug and iterate through this process.
Additional resources
Shows how to create a theme template suggestion for a specific node type. In this chapter, we create a dynamic template for the article node type by copying the node.tpl.php into a node--article.tpl.php where the 'article' is the machine-readable name for the article content type. We add some specific styling to the node author submission information as well as the date. We also discuss how Drupal looks for the most specific template suggestion (i.e. the node id), then moves to more and more generalized template files like the content type, and then the node.tpl.php as the most general. The Drupal.org documentation page that we look at can be found at http://drupal.org/node/1089656.
Additional notes:
The field_tags variable relates to the corresponding tags field on the article content type. For every field you have on your node the $content variable will contain the rendered content of that node in a key that is the name of the field. So in this case $content['field_tags'] contains all of the tags applied to the node.
Additional resources
Walks through the process of enabling the theme developer module and showing the themer info, which is like Firebug for Drupal theming. You can choose specific elements on the page to see what Drupal template files or theme functions were involved with outputting it to the screen. You can easily look at the candidate template names that are available, as well as see all of the variables that are available from that template file. A list of documented variables can be found within the node module's node.tpl.php file, but sometimes there are undocumented variables that are coming from contributed modules or elsewhere. It's a super handy tool to have available, but only enable it when you really need it since it can adversely affect the mark-up on your page and cause some wonky behavior.
Additional notes:
The Theme Developer module is on Drupal.org at http://drupal.org/project/devel_themer. Once you find a module on Drupal.org, you can see the "machine name" for the module in the URL (it is the same name as is used to for the module's .info file as well). That is the name that Drush uses. So, in this instance, Drush is looking for "devel_themer".
drush dl devel_themer
Additional resources
Walks through the process of first adding the search block to the node template file, and then explains some of the best practices for incorporating JavaScript scripts within your theme. Walks through how to protect the dollar-sign variable, and how to use the Drupal behaviors instead of the document ready so that your JavaScript will fire not only on page loads, but also if there is any dynamic material being loaded on the page through asynchronous page loads. We'll show you how to select the jQuery selector to target the desired element, and how to conform to Drupal's best-practice coding standards when it comes to integrating JavaScript and jQuery into your theme. You can learn more about jQuery itself with the Introduction to jQuery Series.
To use Query in no conflict mode, because was not defined.
Add this line on the top: jQuery.noConflict(); more info here: http://api.jquery.com/jQuery.noConflict/
To improve how the search box looks, you need to modify the following:
currently : search-theme-form
modify to: search-block-form
and then in the property in line 321 to look like this:
/* Header quick search */
#header form#search-block-form {
top: -165px;
Additional resources
Takes a tour through some of the more useful template variables, and more ways of determining the available variables by adding the following code to a page template:
Walks through the process of adding a screenshot to you theme so that it'll show up properly within the theme administration page, following the screenshot directions found on Drupal.org, and using the Skitch screenshot app (you can use whichever screenshot app you like).
Additional resources
Provides an overview of what is covered in the Theming Basics series and gives a preview of what is yet to be covered within the Advanced Theming video.
