When Drupal 6 landed, sub-theming became the name of the game. Drupal themes development suddenly got interesting. And with the arrival of Drupal 7, theme developers are upping their game even more. Let’s take a look at a few ace tips on creating Drupal theme and particularly how sub-themes are the flavour of the day.
A Few Ace Tips for Drupal 7 Theme Development
Set Up Your Workspace
Let’s start with your tools. Although tools are not required for Drupal 7 theme development, there is no doubt that additional tools can help you on your way. We suggest that you bear in mind your browser selection (for example, Firefox is really useful for theme development), and that you consider using two modules called Devel and Theme Developer. Both of these utilities will really enhance your experience with Drupal themes development.
Plan Your Modifications
Whenever you start theme developing, you need to do some planning beforehand. First of all, you need to decide whether you are going to customise an already existing theme, or whether you are going to create an entirely new theme from scratch. Whichever you decide, we strongly suggest that you opt to work with sub-themes. When you use sub-themes, the base theme becomes your foundation, giving you something to work with immediately.
If you choose to customise an already existing theme, the process is usually broken down into 3 steps:
- Select a base theme
- Develop a sub-theme for said base theme
- Make changes
It is best if you do not modify a theme directly because you should refrain from touching original files.
How To Select A Base Theme
Selecting a base theme is super easy. For the sake of our little tutorial, we’re going to select the default theme called Bartik. Then all we need to do is create a sub-theme for it before modifying it in order to develop our very own customised theme. Then we need to rename the theme. It really is that simple!
How To Create A New Sub-Theme
One of the essentials of Drupal 7 theme development is creating a new sub-theme. Just like customising an already existing theme, creating a brand spanking new sub-theme can be done in just a few simple steps:
- Make a duplicate of your theme directory and all its contents. Rename it.
- Delete any files you don’t need.
- Upload the theme name to any remaining files you want to keep.
- Develop a stylesheet from scratch.
- Update the .info. file.
Considerations When You Customise Your Sub-Theme
Okay, now that you’ve been working on your Drupal themes development, it’s time to customise!
Before you go any further, you need to decide whether you want to customise the styling or just the structure. If you’re just going to work on the styling, you only need to deal with your theme’s CSS. If you want to modify the structure, you will need to override theme functions and templates.
Customising a theme, although, fun is really as simple as 3 processes:
- Configure your theme
- Adapt your CSS
- Adapt your theme functions and templates.
Configure Your Theme First
The simplest way to configure your theme is by working in Drupal 7’s theme manager. Bear in mind, though, that configuring a theme is never 100% simple; if it was, there would be no need for sub-themes.
Our favourite tip is that you should do your configuration BEFORE you work on your customisations, such as styling. Configuring everything now means that you don’t have to waste time re-configuring everything after post-customisation.
Adapt The CSS
If the structure of your base theme is perfect, you only need to tweak your styling. To do this, you need to customise the CSS. There are a LOT of CSS selectors in Drupal 7, which necessitates some understanding of basic CSS. Adapting the CSS is a matter of working on 3 processes:
- Overriding a single selector
- Adding new selectors
- Overriding entire stylesheets
If you’re stuck on how to add a new selector, all you need to do is slot it in the jeanb.css file.
In conclusion, the biggest tip we can give for Drupal 7 theme development is to use sub-themes. They are your best friend.