Drupal Theming
A standards approach to custom Drupal theme creation
29 comments
Share our glory:
After working with Drupal for over a year now I have learned many different ways to go about creating a custom Drupal theme. I have tried taking existing Drupal themes such as Garland and Blue Marine and hacking them to pieces while inserting my DIVs and classes trying to get things to work and look right. That just creates a huge mess of code and often contains unneeded elements (code bloat = not a good thing).
I've found that the best method for me to create custom Drupal themes is to first code up the site using static HTML/CSS, as in create an index.html file and go to town. I always code my sites using Notepad2 and then view/test them in FireFox. I also use the WebDev Toolbar so I can see how everything looks on-the-fly as I code my CSS. This really helps as I can code a LOT faster and see my CSS changes immediately.
Once I get everything looking decent (doesn't have to be perfect yet) in FireFox I then open the index.html file in IE7 and begin making IE7 specific changes to my CSS so everything looks decent there as well. I then load the index.html file in IE6 and do the same. Once things look the same across FireFox and IE7/IE6 I load it in Safari to see how it looks there. For this site I kinda ignored some issues with IE6 as it's a pain to work with and I'll get around to fixing them eventually.
So once the site looks the same in FireFox, IE6/IE7 and Safari it's time to add Drupal code to our static HTML file. This is much easier than it used to seem to me so if you follow these code snippets you should be all set...
Doctype to
*I included my CSS files for screen and print viewing (screen.css and print.css)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php print $language ?>" lang="<?php print $language ?>">
<head>
<?php print $styles ?>
<!--[if lt IE 7]><link rel="stylesheet" type="text/css" href="<?php echo $base_path . $directory; ?>/ie6.css" /><![endif]-->
<!--[if IE 7]><link rel="stylesheet" type="text/css" href="<?php echo $base_path . $directory; ?>/ie7.css" /><![endif]-->
<?php print $scripts ?>
<?php print $head ?>
<title><?php print $head_title ?></title>
</head>Search Box
<?php print $search_box ?>Logo
<div id="logo"><?php if ($logo) { ?><a href="<?php print $base_path ?>" title="<?php print t('Home') ?>"><img src="<?php print $logo ?>" alt="<?php print t('Home') ?>" /></a><?php } ?></div>Main Navigation
<?php if (isset($primary_links)) { ?><?php print theme('links', $primary_links) ?><?php } ?>Header Content
<?php print $header ?>Left Sidebar
<?php print $sidebar_left ?>Right Sidebar
<?php print $sidebar_right ?>Main Content
<h1><?php print $title ?></h1>
<div class="tabs"><?php print $tabs ?></div>
<?php print $help ?>
<?php print $messages ?>
<?php print $content; ?> Footer
<?php print $footer_message ?>Closing HTML (Don't forget this!)
<?php print $closure ?>
</body>
</html>Once these snippets of code have been added in place of your existing HTML code in the index.html file, save the newly edited file as "page.tpl.php". This is your theme page and every page on your site will have the same layout as this one.
Different Home Page Layout
Say you want to have a custom home page that looks different than all of the other pages. To create a custom home page you need to copy the code from the "page.tpl.php" file and create a new file named "page-front.tpl.php" and paste that code in there.
Now you can edit the code for the "page-front.tpl.php" file to make it look however you'd like. Drupal will automatically detect and load the "page-front.tpl.php" file if it is present in your theme directory.
What that does is tell Drupal that if the user is on the home page to go ahead and load the file named "page-front.tpl.php" rather than the "page.tpl.php" file. Now you can go back to the "page-front.tpl.php" file and edit it as you see fit. This gives you the option to have a different layout for the home page and sub pages.
Now that you have a "page-front.tpl.php" and page.tpl.php" file it's time to copy over the images and CSS from your static HTML site to the newly created Drupal theme directory. So pretty much your directory structure should now look something like:
Drupal Theme Dir:
page-front.tpl.php
page.tpl.php
images/
css/
Now you need to copy the other files in which Drupal relies on to your theme directory. Be sure to copy these files over from the Blue Marine theme (that's just what theme I grab them from).
Blue Marine Theme:
block.tpl.php
comment.tpl.php
node.tpl.php
template.tpl.php
screenshot.png
So now you should have a fully working Drupal theme. You can copy the files over to the server and place them in the "/themes/newtheme" and then log in to your Drupal site through your browser and select your newly created theme. As you can tell immediately there is quite a bit of editing needed to be done to get your theme to work perfectly in Drupal. This is where the Web Dev Toolbar comes in handy again.
So now it's time to edit/tweak your "*.tpl.php" files as well as your CSS. This is a quick and dirty way to get a custom theme up and running but hopefully you get the idea.
Anyone else have an ideas on what I can improve on here or what I didn't really cover much of? I have created somewhere around 10 custom themes in Drupal so I'm sure I overlooked something here. Leave a comment or question and I'll do my best to help you out.
Make people smarter:
Full Name
Jeremy Caldwell
Website
http://eternalistic.net
Email Address
jeremy@eternalistic.net
- I'm using VS 2008 and I'm
1 week 5 days ago - Case sensitive
2 weeks 8 hours ago - I want to do the same what
2 weeks 20 hours ago - Just to clarify...
2 weeks 1 day ago - More Values
2 weeks 1 day ago - RE: Error with the Auto Complete Extender Control...
2 weeks 1 day ago - cool, thank you so much for
2 weeks 4 days ago - Thanks dude..
2 weeks 5 days ago - Error with the Auto Complete Extender Control...
2 weeks 5 days ago - Have you had a chance to
2 weeks 6 days ago
Be sure to check out the latest from Smashing Magzine. They have a great article on CSS Specifity. Might be a review for some but still a good read.
Did you know that you can apply more than one element to a DIV or Class? This allows you to specify different styles to one class without the need for another DIV or Class on that element. Saves on code bloat as well.
Have a look at this article for a better explanation and example.
Thank you so much for your
Thank you so much for your time with this. I am a complete newbie and am very impressed with how well put together your site is. Could one also use dreamweaver to create a home page and bring it into drupal as descriped above?
Keep up the great work. I am very grateful.
Derek
Glad I could help
Thanks for the compliments. And of course you can use DreamWeaver to code up your site - it's all about preference when you code something. I just like using Notepad2 as it's lightweight and I don't need to use Dreamweaver anymore but for coding a quick table. DreamWeaver works great for projects like this as well so feel free to use it or any other editor you like (but not Word).
In Drupal 5 and above
Nice write-up. One small nit - one does not need the additional PHP statement in page.tpl.php in order for phptemplate to pickup the page-front.tpl.php file for Drupal 5 and above. Simply create the file page-front.tpl.php, and if it exists PHPTemplate will automatically override page.tpl.php with it when someone lands on the front page.
Fo shizzle...
Good catch. In fact, we use that same practice when styling the nodes here. For instance, we used CCK to create a new content type for these posts and use node-article.tpl.php to make it pretty.
Good to know
That's awesome! I've been using "page-front.tpl.php" since Drupal 4.7 so I hadn't even noticed that change. Will be sure to skip that step next time.
Garland?
I think I wouldn't use template.php and page.tpl.php from Garland. It's a quite advanced theme and contains very specific code you probably won't need on a custom theme for a client (like color.module or sidebars handling).
What would be great in a base theme is a way to add an id or class to the body (or any other tag), indicating the context ("blog" if you are in a blog content type, etc.). When there are only a few graphic differences between content types, you can often handle them via CSS and avoid dealing with multiple node.tpl or page.tpl files.
Good point about the Garland
Good point about the Garland theme not being the best choice to copy files from. I have base files I created/use on a lot of projects which I just copy over so I kinda just chose Garland for this post, forgot all about the color module and all the other things you usually don't need which were included in Garland.
It's the type of theme that shows off what all Drupal can do and those features aren't really needed as a base for other sites most of the time.
Firebug
If you like Web Developer you should check out Firebug, it takes web developing in Firefox to a whole new level.
Yeah Firebug is freakin'
Yeah Firebug is freakin' sweet. Great tool for debugging JavaScript (the little that I do). I also use HTML Validator, ColorZilla, and Yet Another Window Resizer.
$directory
Instead of all of that labourios
you can just use this
Yeah that's a great idea,
Yeah that's a great idea, thanks for the tip.
Can't thank you enough...
For someone who's just starting out with drupal, this is fantastic. Now I know atleast how to get started. Thanks so much for this article. It will surely help me.
Dips.
Roller
Yo good work. FYI if you like coding in Notepad2 you should check out Notepad++. I was die hard pad2 as well until I started using ++.
Very cool, I'll have to give
Very cool, I'll have to give it a try, thanks.
Kick Ass Article!
Nice write up dude! I almost gave up on drupal theming because a client wants a customized theme for their website and I couldn't quite pull it off. But I found an inspiration in this article and I'm in full throttle now! Thanks again.
Nice one!
Great article, man! Straight and to the point.
Pity I had to comb through a lot of nonesense in the dark jungle of the www before I got to this article. Now I see the light!
Keep writing.
Trying to follow your instructions ...
... has made me feel like a total 'tard. I am hoping for some help and guidance here!
I have a site online, but the theme is kinda sorta only temporary till I can get the bugs out of my test theme. I am trying to avoid some hacks and junk that we put in the current production theme just to get it online looking halfway reasonable.
Making static sites in the past, I have been really happy using the Yahoo YUI Grids CSS for layout (and also the resest and fonts CSS - there's a single combined CSS for all of it together, too) - so I put together the background, logo and other elements I think I want into a nice, fixed width HTML theme - thanks to YUI, it actually comes out looking the same across all the browsers I have - yay! This proof-of-concept template looks like this: http://www.flickr.com/photos/15251572@N00/1467186875/in/photostream/ - The html is here: http://pastebin.com/d10efc88e - so far so good.
I then spent some time pasting in all the Drupal stuff I wanted and called the new file page.tpl.php - you can see it here: http://pastebin.com/f546e8ce7 - note that I left out the Drupal $styles function (and turned off simple menu) so that I *thought* I would only be getting my template plus Drupal's content ... Oh how wrong was I! Errr ... the thing comes out looking like this: http://www.flickr.com/photos/15251572@N00/1467186537/in/photostream/ - and I came out looking like a big doofus.
The fixed width is gone, replaced by a liquid layout with wonky margins (ca. 10px top and left and a big wide one that goes out of the browser on the right), the columns are gone, too - I can't figure out what is causing this. I am no php haxxor and I don't know s*** about Drupal's API, but you made it look so easy ... :-)
I got two Drupal theming gigs based on html templates that I set up for some people and now I need to produce some results and I'm feeling very sorry for myself ... There must be something blindingly obvious I am missing here, right?
Cheers,
HC
Looks like a CSS Issue?
Can you provide me with a link to the site in its current state so I can see if it's even pulling the CSS? That would be my first guess since your HTML seems fine at first glance.
Maybe change this line..
To..
That might do the trick, give that a try and see what happens. I see you also have the WebDev toolbar installed. You can check if the CSS is loading by hitting "CTRL+SHIFT+E" and that will pull up the CSS editor. See if the stylesheet is loading correctly there.
OMG YESSSSSS!
Thank you so much, dude ... it all works now! Now I can do the fun/stupid stuff like borders and font sizes - yay!
Your root path call code did the trick - I have been very stressed about this. I will sleep well tonight. Now I know it wasn't a horrible Drupal mystery, but only a little, medium rare, onions on the side Drupal mystery. Ahh ...
Now I do have to go make a template for non "page" pages, but you'll have to stay tuned to next week's exciting episode for that.
Have a good one!
- HC
PS - Just to let you know, what it came down to was this: CSS was being called, but the wrong CSS, so the base path thing (echo $directory) made sure it was going the right place - pay attention kids, this is why dynamic code is better than static code!
Thank you very much for
Thank you very much for posting this! Generally I've just been hacking up the Zen template to my needs but this makes it quite alot easier. :)
Thanks again.
Instead of "hard coding"
Instead of "hard coding" some values in header of Drupal theme, maybe better solution could be with some additional Drupal modules.
For example, you could use Nodewords Drupal module instead next hard-coded values from your example:
<meta name="author" content="" />
<meta name="copyright" content="" />
<meta name="robots" content="all" />
<meta name="description" content="" />
<meta name="keywords" content="" />
Btw, nice and useful article.
Good Tip!
I've never come across that module before, thanks for the tip. Will have to give that module a try on my next project.
Thanks!
I have been trawling the web looking for a simple theming guide for design "non-development" types such as me, who are new to Drupal and have just confused myself and ended up going round in circles until I was ready to tear my hair out.
This is exactly what I've been looking for. Simple instructions in real English! I'm going to give your tutorial a bash and will let you know how I get on.
Cheers!
A bit late, but glad I found this article
Great introduction to Drupal theming! I've added a plug to it from my own intro: http://neemtree.com.au/drupal-theming-designers
Thanks for the plug!
Glad my post was helpful to you and thanks for the plug on your site. Hope to keep this article around for quite some time so people can continue to stumple upon it.
Finally -- a quick and simple way to get started with Themes!
Jeremy,
Thanks for some great guidance! I've waded through a handful of articles that purport to show how to create or edit a Drupal themes and yours was the first one that just cut to the chase. Your method reflects how web designers actually work -- something that is not at all theoretical or abstract. I was able to make a serious dent in creating my own theme in minutes.
You rock!
Mark
Glad it helped
I wrote this post from my perspective - I design and built sites, so now how do I take my HTML site and port it over to Drupal..so glad it helped. I still reference it myself if I forget something heh.
I hope to write something up like this once I get a good grasp on Drupal 6.x theming. I've already ported the Nerdliness theme over to Drupal 6.0 but I'm sure there are better/easier ways to do it. Keep an eye out for that post, hope to get more experience with Drupal 6.0 theming sometime this weekend and write a new post in a week or two.
Great Work, keep it up dude
As someone said, i almost also gave up till i came across this post. Now i have been
able to design a theme atleast but what i want now is how to implement
a drop down menu i built with css into drupal menu system and also theming
just the blocks so that some blocks look different from others.
Great job once again. keep it up
Thanks dude..
I am really a fresher to drupal and i think this tutorial gives me a good start to me.
Post new comment