Drupal themers are like cooks. We use common components (contributed modules) as a starting point for successful websites. Cooks also use common components—tried and true ingredients (salt, pepper, garlic, onions, etc.)—as the base for delicious recipes. The fruits of our labors are robust and flavorful. But somewhere in this busy world, saving time has taken priority. We have decided pre-made is better.
Last week I watched an Aquia webinar on Drupal theming. After a year of using contributed themes like Zen, Clean, and Foundation as cornerstones for each new site launch, I was exposed to the beauty and simplicity of "Homemade Theming"—building a Drupal theme from scratch.
For the Drupal-ers out there, this might sound like a horrible idea. I think the cause for the skepticism comes from the equation of the words homemade and scratch with long, tiresome, and tedious. I felt those same suspicions. Homemade might translate to long, tiresome, and tedious for cooks, but not for themers! In fact, it's just the opposite. When it comes to themes, "homemade" doesn't mean harder.
When building a Drupal theme from scratch, you control every aspect of the HTML and CSS. You control the site's regions, its available variables, and how the entire site is assembled. Content defines design. The most important advantage of a homemade Drupal theme is this: The themer is in control of the theme. When using a contributed theme, you work around the pre-packaged code and the theme controls you.
In the spirit of "cooking up a homemade Drupal theme," here's Digett's 5-ingredient, 5-step recipe for a perfectly delicious, homemade Drupal theme:
Once your HTML/CSS is in place, you're golden. This becomes the basis for your theme, not Zen, Genesis, Blueprint, or any of the other popular contributed themes.
name = Recipe Theme Example
core = 6.x
engine = phptemplate
Be sure to call your stylesheet using
stylesheets[all] = style.css
Refer to this additional information regarding the structure of the .info file if you have questions.
Inside every Drupal installation, there's a default page.tpl.php template. It's located in the modules/system directory. I recommend plugging in snippets of code from this file to your theme's new page.tpl.php file. Where there's static content, replace it with php tags from the system's default page.tpl.php template.
If this is your first time building a homemade theme, this may not seem like a time-saver, but believe me, it is. The real time-saver kicks in when you're just swapping out php variables with old, static HTML instead of trying to re-work existing an existing HTML structure to fit your content.
You can also choose to browser test before modifying the index.html file, reducing extraneous time spent testing after site-build.
I encourage you to make your own homemade theme from scratch. Why be the frozen dinners of the world when you can be foie gras?!
If you have questions regarding "Homemade Theming" please contact me directly. I'll be happy to discuss this topic further. Good luck! -Kathryn
a big leap
I appreciate the tutorial, and you've presented it wonderfully, you really have. I'd like to give feedback on how you've really left a lot to be assumed by the person using it. This is rampant across the drupal community (and why more people aren't converting to it). It would be better to assume the audience know nothing, not that they are developers. Patronising some people is better than confusing most people.
I'm referring to the second step 1.
"I recommend plugging in snippets of code from this file to your theme's new page.tpl.php file. Where there's static content, replace it with php tags from the system's default page.tpl.php template."
That's the part most people are struggling with when making their own theme. They have no idea about this... and no one is explaining it to them.
Theming vs. Development
Wow, interesting input. So interesting in fact, I've written a new post as a kind of follow-up to your comment. Take a look.
I disagree
I disagree. There's so much that you get for free with a good base theme. Did you remember to add $closure, $help and $messages to your custom theme? Do your messages look presentable? Easy to implement preprocessing? etc. etc. etc.
I appreciate the feedback.
I appreciate the feedback. This post wasn't intended to imply that building a Drupal theme from scratch is the better approach to theming. I agree that in many cases a solid base theme provides many immediate advantages over starting fresh. And I would also recommend that those without a great deal of theming experience stick to starting with a contributed theme like Zen or Clean.
What I wanted to convey in this post was that starting from scratch shouldn't be ruled out. So often I've heard discussions around this topic — and it seems developers are continually toying with both options. Until attending the Acquia/Lullabot webinar I wouldn't have recommended the homemade approach, but the session really opened my eyes to the flexibility and efficiency of beginning with pure HTML/CSS. In less than an hour, the presenter had created a theme from scratch. It was incredible to see such rapid work.
It's definitely important to include $closure, $help, $messages, etc. in your homemade theme. I've suggested using the system's default page.tpl.php to pull these variables. You might also be interested in watching the archived Acquia video too. They explain this process in more detail.
And as always, if using a contributed theme works well for you and the thought of starting fresh is unappealing, by all means, stick to what works.
I totally agree. I actually
I totally agree. I actually always start from scratch - sort of. I usually start with Garland, but then I strip out all html, toss the css completely, and even kill a lot of the unnecessary php. I then go into the .info file and add js, css, regions, etc. (I usually like an intro region, which is great for the home page).
Starting from scratch allows my sites to look completely fresh and new. I've gotten comments that my websites don't look "Drupally", and I think starting from nothing is why they look so different.
I hate mucking about in other people's code, especially if it was written by developers. Front end production is usually a very different skill than what most developers are used to. Also, using another theme as a base often throws confusion and wasted time into the mix when I try to get the CSS right. There is often so much cascading styling competing with each other that I'll always have to go in and tweak and retweak until it's right.
More efficient to just start over.
Tevi