Drupal 7 Themes
Create new themes for your Drupal 7 site with a clean layout and powerful CSS styling
With the arrival of Drupal 6, sub-theming really came to the forefront of theme design. While previously many people copied themes and then re-worked them to achieve their goals, that process became less attractive as sub-themes came into favor. This article focuses on sub-theming and how it should be used to customize an existing theme.
We’ll start by looking at how to set up a workspace for Drupal theming.
Setting up the workspace
Before you get too far into attempting to modify your theme files, you should put some thought into your tools. There are several software applications that can make your work modifying themes more efficient. Though no specific tools are required to work with Drupal themes, you could do it all with just a text editor—there are a couple of applications that you might want to consider adding to your tool kit.
The first item to consider is browser selection. Firefox has a variety of extensions that make working with themes easier. The Web Developer extension, for example, is hugely helpful when dealing with CSS and related issues. We recommend the combination of Firefox and the Web developer extension to anyone working with Drupal themes. Another extension popular with many developers is Firebug, which is very similar to the Web developer extension, and is indeed more powerful in several regards.
Pick up Web developer, Firebug, and other popular Firefox add-ons at https://addons.mozilla.org/en-US/firefox/.
There are also certain utilities you can add into your Drupal installation that will assist with theming the site. Two modules you definitely will want to install are Devel and Theme developer. Theme developer can save you untold hours of digging around trying to find the right function or template. When the module is active all you need to do is click on an element and the Theme developer pop-up window will show you what is generating the element, along with other useful information like potential template suggestions. The Devel module performs a number of functions and is a prerequisite for running Theme developer.
Download Devel from: http://drupal.org/project/devel. You can find Theme developer at: http://drupal.org/project/devel_themer.
Note that neither Devel nor Theme Developer are suitable for use in a development environment—you don’t want these installed and enabled on a client’s public site, as they can present a security risk.
When it comes to working with PHP files and the various theme files, you will also need a good code editor. There’s a whole world of options out there, and the right choice for you is really a personal decision. Suffice it to say: as long as you are comfortable with it, it’s probably the right choice.
Setting up a local development server
Another key component of your workspace is the ability to preview your work—preferably locally. As a practical matter, previewing Drupal themes requires the use of a server; themes are difficult to preview with any accuracy without a server to execute the PHP code. While you can work on a remote server on your webhost, often this is undesirable due to latency or simple lack of availability. A quick solution to this problem is to set up a local server using something like the XAMPP package (or the MAMP package for Mac OSX).
XAMPP provides a one step installer containing everything you need to set up a server environment on your local machine (Apache, MySQL, PHP, phpMyAdmin, and more). Visit http://www.ApacheFriends.org to download XAMPP and you can have your own Dev Server set up on your local machine in no time at all.
Follow these steps to acquire the XAMPP installation package and get it set up on your local machine:
- Connect to the Internet and direct your browser to http://www.apachefriends.org.
- Select XAMPP from the main menu.
- Click the link labeled XAMPP for Windows.
- Click the .zip option under the heading XAMPP for Windows.
- Note that you will be re-directed to the SourceForge site for the actual download.
- When the pop-up prompts you to save the file, click OK and the installer will download to your computer.
- Locate the downloaded archive (.zip) package on your local machine, and double-click it.
- Double-click the new file to start the installer.
- Follow the steps in the installer and then click Finish to close the installer.
That’s all there is to it. You now have all the elements you need for your own local development server.
To begin, simply open the XAMPP application and you will see buttons that allow you to start the servers.
To create a new website, simply copy the files into a directory placed inside the /htdocs directory. You can then access your new site by opening the URL in your browser, as follows: http://localhost/sitedirectoryname.
As a final note, you may also want to have access to a graphics program to handle editing any image files that might be part of your theme. Again, there is a world of options out there and the right choice is up to you.
Planning the modifications
A proper dissertation on site planning and usability are beyond the scope of this article. Similarly, this article is neither an HTML nor a CSS tutorial; accordingly, in this article we are going to focus on identifying the issues and delineating the process involved in the customization of an existing theme, rather than focusing on design techniques or coding-specific changes.
Any time you set off down the path of transforming an existing theme into something new, you need to spend some time planning. The principle here is the same as in many other areas. A little time spent planning at the frontend of a project can pay off big in savings later.
When it comes to planning your theming efforts, the very first question you have to answer is whether you are going to customize an existing theme or whether you will create a new theme. In either event, it is recommended that you work with sub-themes. The key difference is the nature of the base theme you select, that is, the theme you are going to choose as your starting point.
In sub-theming, the base theme is the starting point. Sub-themes inherit the parent theme’s resources; hence, the base theme you select will shape your theme building. Some base themes are extremely simple, designed to impose on the themer the fewest restrictions; others are designed to give you the widest range of resources to assist your efforts. However, since you can use any theme for a base theme, the reality is that most themes fall in between, at least in terms of their suitability for use as a base theme.
Another way to think of the relationship between a base theme and a subtheme is in terms of a parent-child relationship. The child (sub-theme) inherits its characteristics from its parent (the base theme). There are no limits to the ability to chain together multiple parent-child relationships; a sub-theme can be the child of another sub-theme.
When it comes to customizing an existing theme, the reality is often that the selection of the base theme will be dictated by the theme’s default appearance and feature set; in other words, you are likely to select the theme that is already the closest to what you want. That said, don’t limit yourself to a shallow surface examination of the theme. In order to make the best decision, you need to look carefully at the underlying theme’s file and structures and see if it truly is the best choice. While the original theme may be fairly close to what you want, it may also have limitations that require work to overcome. Sometimes it is actually faster to start with a more generic theme that you already know and can work with easily. Learning someone else’s code is always a bit of a chore and themes are like any other code—some are great, some are poor, most are simply okay. A best practices theme makes your life easier.
In simplest terms, the process of customizing an existing theme can be broken into three steps:
- Select your base theme.
- Create a sub-theme from your base theme.
- Make the changes to your new sub-theme.
Why it is not recommended to simply modify the theme directly? There are two following reasons:
- First, best practices say not to touch the original files; leave them intact so you can upgrade them without losing customizations.
- Second, as a matter of theming philosophy, it’s better to leave the things you don’t need to change in the base theme and focus your sub-theme on only the things you want to change. This approach to theming is more manageable and makes for much easier testing as you go.
Selecting a base theme
For the sake of simplicity, in this article, we are going to work with the default Bartik theme. We’ll take Bartik, create a new sub-theme and then modify the subtheme to create the customized theme. Let’s call the new theme “JeanB”.
Note that while we’ve named the theme “JeanB”, when it comes to naming the theme’s directory, we will use “jeanb” as the system only supports lowercase letters and underscores.
In order to make the example easier to follow and to avoid the need to install a variety of third-party extensions, the modifications we will make in this article will be done using only the default components. Arguably, when you are building a site like this for deployment in the real world (rather than simply for skills development) you might wish to consider implementing one or more specialized third-party extensions to handle certain tasks.
