I originally wrote this blog post on November 10th, 2011 when I was the Lead Trainer & Themer at Chapter Three. I’m reposting it here (potentially with minor edits) for posterity, but you can read the original article there.
I consider use of a base theme to be Level 2 theming because this should mean that you’ve either grown enough or failed enough as a themer to want to do things the Drupal way. That means no longer hacking core and saving yourself a ton of hassle. You can let Drupal do the work for you and still make the theme your own!
The Evolution of a Themer
Teaser: Expect a Lvl 0 guide for total beginners and a Lvl 3 guide soon. And the fact seems to be that ultimately you will learn enough PHP to consider yourself a developer – which totally qualifies for it’s own discussion.
If you missed Leveling Up Your Themer (lvl1): Getting Started, we discussed some basic theming topics:
- What is a theme in Drupal anyway?
- What files are found in a theme and what are they used for?
- How do I create a theme from scratch?
- What are some handy tools that themers use?
WHAT IS A BASE THEME?
Level 2 is all about using base themes and sub themes. I introduced sub-themes in level 1 and mention that a base theme allows you to let Drupal know that you want to use another theme for everything except for what you want to change. This is wonderful because it means you don’t have to hack another theme when you need to make a small change. It also means you don’t have to start from scratch when a theme almost does what you want. This brings us to an interesting fact…
Drupal themes are cascading
If I haven’t sold you on base themes yet, consider this scenario: Your boss finds this great theme on Drupal.org. Everything is swell except he really doesn’t dig that turquoise color… and he wants the font to be Verdana… and the H1’s should be a little bigger. No sweat, just make a new theme, tell it to use the theme he chose as the base theme and make all your changes right there in the sub theme.
Base themes let you make simple tweaks, but that’s not to say that you can’t use base themes to make major changes. In fact, I’d say that there’s a min-level up in here when you go from making tiny tweaks to an existing contrib theme to making a theme your own through rather significant changes. In fact, there’s a certain type of base theme that’s made specifically for you to make significant changes to.
USING A STARTER THEME AS A SPRINGBOARD
These days, there are themes Drupal.org which have been created specifically for use as a base theme. These have been called “starter themes” because they give you a great starting point for your theme. By using a starter theme, we can start with a solid foundation and bypass the repetitive process of setting up the same framework every time. I use the terms interchangeably, but basically a starter theme is always a base theme, but a base theme is not always a starter theme.
Base themes are becoming more specialized and there may be one that’s geared to your needs or style. There’s no right answer and there probably isn’t going to be a base theme that does everything that you need. But if you know what you want, this part might be easy.
I want a starter theme that…
Provides helpful tools and simple markup
Is responsive (good for mobile)
Is super simple, stripped down, clean, etc.
Many of these themes fit into multiple categories. In the interest of my own sanity I simply categorized them in the way that I seem to think of them without listing any duplicates. If you disagree or find a typo, please leave a comment.
HOW TO TELL DRUPAL TO USE A BASE THEME
Zen is the most popular theme on Drupal.org with 66,154 sites running it (at time of writing). It has lots built in documentation and an extensive guidebook on drupal.org. If you’re not sure which base theme to use, start with Zen.
Update: Many great base themes like Zen actually come with sub-themes within them that are completely intended to be copied, renamed and hacked. This is great for beginners because you can get started without having to create many files yourself. Additionally there is already a lot of support for these sub-themes (check out the guidebook linked above for step-by-step directions). Thanks for the comment suggesting we include this helpful tidbit!
Once you’ve set up your custom theme with a folder and a .info file (like we did in Lvl 1), you can get started. Download the Zen theme and put it into your /sites/all/themes folder. If you’re continuing from Lvl 1, you should already have a folder in there for acme.
So far so good, right? Next edit your custom theme’s .info file. Our changes since Lvl1 are in bold italics.
acme.info
name = Acme
description = A theme by any other name is just boring.
core = 7.x
engine = phptemplate
base theme = zen
stylesheets[all][] = style.css
regions[header] = Header
regions[highlighted] = Highlighted
regions[help] = Help
regions[content] = Content
regions[sidebar_first] = Left sidebar
regions[sidebar_second] = Right sidebar
regions[footer] = Footer
regions[page_top] = Page top
regions[page_bottom] = Page bottom
features[] = logo
features[] = name
features[] = slogan
features[] = node_user_picture
features[] = comment_user_picture
features[] = favicon
features[] = main_menu
features[] = secondary_menu
The key is really just adding base theme = zen into your .info file – it’s really that easy! Make your custom theme the default and flush your cache. You should immediately notice a subtle change. Not convinced that it’s working? Check the source of the page (or use Firebug) to find where the stylesheets are coming from. You should see several css files hailing from sites/all/themes/zen.
From there, the world is your oyster. You can now take advantage of the benefits of a mature base theme while still being able to make it into whatever you want. Whatever you change in your sub theme will take priority over what is in your base theme because it happens later.
TIPS, TRICKS & GOTCHA’S
- Many starter themes come with sample sub themes already inside them with instructions. Feel free to make use of them or ignore them completely. Don’t be caught off guard if they show up on your list of themes.
- If you have a file in both your sub theme and base theme which have the same name, the base theme’s version of that file will be ignored entirely. Drupal is smart enough to look for duplicates and only use a file once. If you don’t let this catch you off guard you can use it to your advantage!
- On the same note, if you want to override a .tpl file (like page.tpl.php or node.tpl.php) you want to copy it from your base theme (if it exists) rather than Drupal’s original version. We’ll talk about tpl’s next time.
- Lots of people name their first stylesheet style.css. For some reason, style.css is sort of mysterious and magic in Drupal. It may work without any problems, but as a best practice, never name a stylesheet style.css. I usually prefer the name of my theme (acme.css).
- This goes with any coding, but comment and document everything. Whenever you intend to override something that the base theme does, leave a brief note explaining what you’re doing. This is especially true if you’re writing your own base theme!
Have more tips and tricks? List them in the comments below and I may update the post with a hat tip.
HATERS
Base themes are not loved by everyone. If you ask many professional themers they may tell you why starter themes rarely suit their needs. Other rockstars like Jen Lampton are “zen-lovers” and use it whenever they need to build a theme.
Me? I tend to agree that starter themes aren’t always great, but I can’t seem to make up my mind. I think starter themes can be helpful, but I still find myself starting from scratch fairly often. As you progress in your career as a themer, you may find yourself wanting to do things your own way and decide to build a theme from scratch. Drupal will still be your friend regardless.
0 Comments