In this tutorial, I will explain what a base, or parent, theme is in Drupal and why it can be advantageous to use it in theming. We'll take a look at what is commonly provided by a base theme, including discussing what a "starter kit" is and how it is intended to be used.
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
Drupal uses a series of nested template files to build out the rendered HTML pages we see in our browser. The template file page.tpl.php holds markup between <body> and </body> tags. We talked about the nested nature of template files in Lesson 3: Theming by Component.
In this lesson we will:
- create the file page.tpl.php
- add the relevant markup, and CSS classes for our grid framework
- insert relevant PHP variables so that Drupal can render each of its page components.
By the end of this lesson you will be able to create, or adapt, a page.tpl.php file to suit the conventions you identified in your style guide.
This chapter shows some general best practices for keeping your template.php file clean as well as making it easier for designers to work primarily with the template files when possible to avoid them having to make too many changes to template.php. Specifically, some HTML classes are removed from the ninesixtyrobots_comment_form() function in template.php and moved to the comment-form.tpl.php template file, which is specified as an option in the ninesixtyrobots_theme() function. The rendering logic is also removed from the theme function and into a preprocess function so that it can be passed in as a variable to the new template file.
Additional resources
In this video we cover a new Drupal 7 feature which lets us create suggestions for theme functions, in addition to suggestions for templates. We'll use this to modify the tags displaying on a node in our site.
Notes:
In the example: $item['#options]['attributes'] += $variables['item_attributes_array'][$delta]; += is a shortcut for array_merge. So it is ensuring the contents of $variables['item_attributes_array'][$delta] are included in $item['#options]['attributes'] so that any class, rdf info or other html attributes are appropriate applied to the tag links. It's possible for any number of modules to set HTML attributes on the tags field in the theme we need to make sure that they get printed out appropriately.
Additional resources
The ability of having alter hooks within the theme layer starts to blur the line between the logic and presentation, and so there are a few things to be aware of when using hook_form_alter() from the theme layer. The biggest thing to know is that the form rendering process has already gone through the creation and validation preparation process at the module layer, and so you shouldn't be drastically changing the functionality of a form at the theme layer. This form alter hook at the theme layer is primarily for aesthetic clean-up, styling and additional design. This chapter gives some specific examples of things to watch out for.
Additional resources
In this video we will see how we can create our own preprocess function for a theme function (not just templates). We're going to use this to display the user's full name on the site wherever the the username would normally appear. We start by creating a full name field, and then show how to get this working on our site.
Additional resources
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
In this video we introduce the template.php file and create our first preprocess function. We explain what the preprocess hooks are and how to name the function properly, then we show a list of existing variables, and how to modify one of those existing variables.
Additional resources
This chapter explains hook_page_alter(), which is another alter hook new to Drupal 7 and to the theme layer. Each page rendered by Drupal is contained within an array where the theme is able to go in and rearrange, delete or duplicate specific page elements.
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
There are four alter hooks that are now available to the theme layer in Drupal 7. This chapter walks through two of those hooks, hook_css_alter() and hook_js_alter(). These hooks allow the theme layer to reorder, delete or replace specific CSS or JavaScript files that are being loaded by Drupal core or other contributed modules.
Additional resources
Continuing on our work with preprocess functions, we look at how to add a new variable for our template files to use. We also see how to change the output based on whether the user is logged in or not, and how to add a variable to the t() function.
Additional resources
In this video we will look at how to add CSS and JavaScript to our site using drupal_add_css() and drupal_add_js(). We will also show using these functions to conditionally add the CSS and JavaScript, within our page preprocess function.
Additional resources
In this video we will look at overriding a theme function instead of working with the template files. We will be modifying the breadcrumb using theme_breadcrumb(). to do this we'll use the Theme Developer module to help us find what we're looking for, and then we'll walk through how to override.
Additional resources
Theme Developer module (Drupal.org)
960 Robots
Omega is a Drupal base theme that provides you with a really nice responsive framework. Omega also provides a lot of configuration options that are accessed through the UI rather than code. So, you can adjust the display settings and know that the underlying framework will be intact.
In this series, we're going to be demonstrating the Omega module by converting an existing Drupal theme into an Omega sub-theme. We'll talk about the HTML and CSS that's involved, and how they work together. We'll be working with theme functions and looking at the Omega best practices around how to break out your theme functions, where to put those, and how to use them.
Additional resources
