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.
Comments
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).
tiffanys | | Ed Hardy
tiffanys | | Ed Hardy |Abercrombie
great post .let me learn a lot.
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.
Very good tips
Hi dear ,
thanks for such a nice write up.
i am new in drupal and got many help from this article.
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.
Thanks
Thanks for the tutorial. I am interested in this as I just spent some time converting a zen sub theme using Firefox but forgot to check in ie as I went along and it's a total mess.
I would like to learn to use Drupal this way.
I don't understand where to link to a css file from this code though. For example I have made a very simple index.html file to try this out - at the moment it connects to a css file called test.css with :
Do I add something like this to your code - or should the css file be of a specific name etc ? I can only see your code linking to some ie specific stylesheets.
IE Specific CSS
The best way I've found is to use IE specific CSS. You can add this bit of code within the bit of code on your page.tpl.php file.
What this does is call the "ie6.css" stylesheet for users viewing your site in IE6 and calls the "ie7.css" stylesheet for the users viewing your site in IE7.
If you need any more help with this feel free to email me or post back here. Good luck!
What about custom themes?
Thanks for your description.
What are you think about Zen or Blueprint starter themes?
Both are good
Both of those themes would be great themes to build off of. I know of a few companies that use Zen as their base theme and build out client's sites with it since it has all the features in place and handles subthemes so well. It all comes down to preference. I tend to create my own themes from scratch but both methods should work just fine. Good luck!
Thanks!
Thanks for the quick and dirty tut! I'm just starting to do custom theming in Drupal and you've answered all of my questions in one post. Great work!
Thanks and breadcrumbs
Thanks for the article. Also, don't forget
<?php print $breadcrumb ?>Blogger Garland template not fully loading...
I'm not really a techie... trying to understand a problem I have with my Garland template for Blogger. If I load my site (in Dutch) http://www.vergelijkenwin.com the different colors aren't always always loaded. Very strange to me.
Does anybody have any idea what could be the cause - and how I could solve it?
Many thanks
Ben
Garland theme
Seems as though your CSS is trying to load the images and it can't find any of them. Check your path to the images in the CSS and the directory in which the images are located and make sure they are the same.
Like I do it
and what I want to add is: First finish all of your functionality, then start with the themeing. Or else you will have lot's of refactoring while adding your modules to the core...
Nice guide
Your guide to Drupal theming is by far the easiest and most effective guide out there!
Glad you found it useful
Thankfully the same ideas here work with Drupal 6 so you should be set.
Now i have been able to
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.
Where is the < IE 7 coming from? Need to switch on something
This is wonderful, Jeremy, and it has been a big help in figuring out what's going on. There's one more thing I need to know, if you can help, which is where the version info is coming from and how to set it so I can add additional detections.
We make content for a lot of non-standard browsers, and in our current sites, we have been using our own "get_platform()" function (our small library is included in our settings.php) to return a designator that tells us what weird platform like "webtv" is viewing the site.
I'd like to be able to use (or override) what's returning the < IE 7 so that I could have an and other possibilities before we get all the way to IE. Would you happen to know anything about it?
TIA
I've waded through a handful
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.
VERY INTERESTING ARTICLE
NICE AND HELPFUL INFORMATIONS, THANKS FOR GREAT CLUES
I almost gave up on drupal
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.
Louis Vuitton Purse Believe
Louis Vuitton Purse
Believe it or not…discount Louis Vuitton handbags are available right here on the Internet for much lower prices than retail prices. Have you been wishing you could afford an authentic Louis Vuitton handbag? So have hundreds if not millions of other price conscience people out there who want to enjoy the luxury of owning a genuine Louis Vuitton bag without the genuine price Louis Vuitton
Who knows where to download XRumer 5.0 Palladium?
Who knows where to download XRumer 5.0 Palladium?
Help, please. All recommend this program to effectively advertise on the Internet, this is the best program!
مركز صور
thaaanks vere nice screibt
Post new comment