Before we can really dive in to learning Omega we need to do a couple of basic setup tasks. Mostly, we need a Drupal 7 site that has some content for us to look at while we are theming. In this lesson we're going to:
- Generate some content with devel generate module
- Install the 960 Robots theme from drupal.org
- Place some blocks in to the regions provided by the 960 Robots theme and talk a bit about what it gives us so that we can begin to understand how we might convert it to an Omega sub-theme
Under the Downloads tab, there is a copy of the final database and the files directory for this Demo site.
Additional resources
Once all of the elements are in place, it's time to get down to the real work of theming the components. In this lesson we will:
- use our style guide and checklist to find each component
- check to see if the style looks "right"
- troubleshoot broken styles so that each component looks as good as the designer's original, static files
By the end of this lesson you will be able to identify elements on a rendered Drupal page which do not have the correct styles applied, determine the source of the problem, and alter the markup or styles to correct the output displayed in a browser.
In this series, Getting Started with Responsive Web Design in Drupal, we'll take an old Drupal theme based on a 960 pixel grid, and convert it, step by step, using just good ole CSS and HTML, to be more fluid, more flexible, more responsive than ever.
Our case study is the Anytown Farmers Markets. Anytown Farmers Markets has an existing web site that uses a theme based on a 960 pixel grid. It works great on larger screens, pretty well on iPads, but on an iPhone, the text is really small and you have to pinch and zoom and horizontally scroll to get around the screen.
Our goal will be to transition the site from a fixed width two column desktop site to a fluid and flexible site whose layout, images, and type gracefully transform at practically any size screen to provide a user-friendly experience where our site's content can be enjoyed by users browsing with a more diverse set of devices.
Throughout this series, you'll learn how to use, configure, and customize the style of a Drupal contributed module that provides a responsive, mobile-friendly main menu. We'll tackle images, tables, and slideshows and explore some select solutions for making these traditionally rigid elements flex with a fluid container. In the process of converting this theme to be responsive, you'll learn to tackle some real-world, sometimes messy and often times not-so-clear-cut problems and potential solutions.
To take advantage of this series, you'll want to be comfortable with HTML and CSS and the basics of setting up a theme in Drupal 7. You don't need to know Sass or any advanced theming. This series will help you understand common problems encountered in responsive web design and how to solve them in the context of a Drupal 7 theme.
Additional resources
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.
Understanding Drupal
FreeLearn the essential terminology of Drupal in this overview of content nodes, blocks, theming, menu system and modules. In Understanding Drupal, the first in The Lullabot Learning Series, the Lullabot team provides an overview of Drupal as a content management system, as a PHP web application framework, and as a developer community. Its documentary-style exploration covers all the terminology and fundamental concepts for both site administrators and developers. If you've ever been confused by Drupal or are still trying to wrap your head around the community and platform, then this video is a roadmap to accelerate your journey up the Drupal learning curve. Topics include:
- How content is entered and managed
- How users and user permissions are handled
- What blocks are and what they can do
- The concepts and capabilities of Drupal's powerful module system
- How Drupal handles navigation and its menu system
- How themes alter the site layout, design, and presentation
- Site configuration and administrative messages and settings
This video uses Drupal 6 for examples, however it is more focused on general Drupal concepts rather than version-specific how-tos.
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.