Drupal theming for designers

Intended Audience

This article has web designers, developers, and anyone who has http://www.csszengarden.com in their bookmarks, firmly in its sights. We want to bring your fabulous skills to a fabulous web content management platform: Drupal.

Drupal has never suffered from having too many professional designers offering Drupal themes. This shortage has intensified as the use of Drupal has grown. Good looking themes go a long way towards raising Drupal’s profile, and supporting that growth. Take a squiz at our presentation on Drupal theming, and jump into the "great Drupal great themes" postitive feedback loop!

How this article is presented/how to read this article

Sections flagged with a indicate that a your participation is required (e.g. testing a theme, configuring something, etc.)

Sections flagged with a indicate if you’re not sure how to do something, further details are available, but they’re external to this article.

Attachments

Dependencies

It is recommended that you are able jump in to the 'participation required' sections, by:

Drupal Theming – Part 1 - Introduction

How does Drupal enable theming

Drupal uses theme engines, a theme engine is a layer that abstracts functionality between the Drupal core and pluggable Drupal themes. By default, Drupal 5.x installs the Drupal-specific PHPTemplate engine. Other theme engines may be used by installing add-on modules. more on other theme engines


This diagram demonstrates how theme engines plug into Drupal core, and individual themes (i.e. the ones you will create) rely on the theme engines.


In the Drupal-specific PHPTemplate world, the only must-have of a theme is a page.tpl.php file. The other files are not mandatory, and we will look at what they do later.

First, lets inspect page.tpl.php

As you can see, page.tpl.php provides the HTML/XHTML framework for your theme. The highlighted PHP tags are either print, or conditional (if-then-else) print, pre-defined variables (discussed in next section).

Create a new theme by:

  • Creating a folder named ‘simplest_theme_demo’ in /sites/all/themes
  • Downloading the following page.tpl.php into your newly created folder
  • You should have:

Select the theme for your site and look at the code it generates:

By comparing page.tpl.php and the generated code side by side, the extra tags you will need to accommodate in your stylesheet become obvious:

The generated code which has been highlighted in green, indicates sections generated from node.tpl.php. We will discuss node.tpl.php next.

By creating files using the Drupal naming convention, you are able to further control the display of teasers (node.tpl.php), full content (node.tpl.php), comments (comment.tpl.php), and blocks (block.tpl.php), and these will be discussed in the section.

Get stylish

As stated before, all you need to create a Drupal 5.x theme, is page.tpl.php, but as a designer, you're itching to add some style. By dropping a style.css file into you're theme's folder, you're ready to begin theming. For your convenience, we've created a starter theme for you: bare_bones.zip. Edit the bare_bone's style.css, or replace it with you're own.

All themed up and nowhere to go

Some of you will want to show your theme off on your own/your buddy's/your mom's Drupal site. Some will step through the CVS hoops to get it listed on http://drupal.org/project/themes. And for those of you who are excited by an opportunity to expand your premium theme portfolio, stay tuned, exciting things are headed this way!

That's right, we're Drupalling away to make a theme exchange happen!

Drupal theming for designers, continued

Comments

It is very useful for me. Thank you so much for sharing. Keep your great post.
pusat grosir aksesoris hp

pusat grosir aksesoris hp (not verified) | Sat, 02/04/2012 - 16:48 |

Nice to be visiting your blog again, it has been months for me. Well this article that i've been waited for so long. I need this article to complete my assignment in the college, and it has same topic with your article. Thanks, great share.

Cheap Backlinks (not verified) | Sat, 02/04/2012 - 07:15 |

Please dont reply with "hey do a search" cuz i have searched and read and read some more...but its all french 2 me. Nama bayi | Arti nama

Nama Bayi (not verified) | Fri, 02/03/2012 - 16:34 |

externe fesplatte
I just recently started using Drupal and so happily stumbled upon your post. I'm still a novice web designer and such instructions to me were very helpful. Thank you.

titicovrig (not verified) | Thu, 02/02/2012 - 22:16 |

Wonderful tutorial about drupal theming, it helps me a lot.

Vein Surgery Minneapolis

Guest (not verified) | Wed, 02/01/2012 - 23:31 |

Wonderful tutorial about drupal theming, it helps a lot.

Vein Surgery Minneapolis

reply (not verified) | Wed, 02/01/2012 - 23:26 |

I really liked your blog quite informative and interesting facts and
figures you have discussed on your blog even the comments are very
fruitful and helpful in enhancing the knowledge regarding the topic
cell phone spying

shanemick80 (not verified) | Thu, 02/02/2012 - 13:55 |

I am Php Beginner and i want to learn Drupal. Your article is very helpful and informative.

Lasik Los Angeles

lalasik (not verified) | Wed, 02/01/2012 - 21:02 |

Top tutorial, thanks for the effort will come in handy!

watch movies online

Ricky (not verified) | Wed, 02/01/2012 - 05:25 |

I've visited so many sites to gather information about Drupal. But this blog provided me lots of information about Drupal Themeing for Designers. It is very helpful to the designers in their work. Thanks

scott (not verified) | Tue, 01/31/2012 - 20:15 |

Wow! This could be one of the most useful blogs we've ever come across on the subject. Actually great nfo! I'm also an expert in this topic so I can understand your hard work. alat kesehatan | medical equipment supplies

alat kesehatan (not verified) | Mon, 01/30/2012 - 00:33 |

The correct post for my need, contains informative and useful messages, I have read most of them, Thanks a lot & keep on sharing.

Menozac (not verified) | Sun, 01/29/2012 - 16:04 |

I've wanted to learn more about particular topics, but not many websites would help me out in informing me the way I expected. This left me with many question, but after reading your article, I got an answer to all my questions alat kesehatan

alat kesehatan (not verified) | Mon, 01/30/2012 - 00:35 |
web design (not verified) | Sun, 01/29/2012 - 14:20 |

Thansk for great sharing man this is awesome

Mats (not verified) | Tue, 01/31/2012 - 02:23 |

I also use drupal and i love it.

girls amsterdam (not verified) | Thu, 01/26/2012 - 23:31 |

http://www.elmotaheda-web.com/
seo
I know this is good.

web design (not verified) | Sun, 01/29/2012 - 14:22 |

It’s a high-quality summary that you have written. There are a number of points however which I believe would do better if you went into a little bit further detail than you have done. simply my opinion,plus I’m not trying to be critical at all. If you do follow this up then I would be interested. Thanks.
General Contractor New York City

snow11 (not verified) | Thu, 01/26/2012 - 23:01 |

Drupal is probably one of the most complicated content management system (CMS) and content management framework (CMF), probably because it's open-sourced. Anyway, Drupal theming seems like a good idea, I have to give this a try.

immediate annuities pros and cons (not verified) | Wed, 01/25/2012 - 19:50 |

This site is very much impressive and grate work. This site in which a very complicated information and post. This information is about curatorial statement, and helpness.
karton

karton (not verified) | Wed, 01/25/2012 - 13:21 |

Hi. Neat post. There is a problem with the site in firefox, and you might want to check this... The browser is the market leader and a good element of other people will miss your fantastic writing because of this problem.
lakban

lakban (not verified) | Wed, 01/25/2012 - 13:15 |

I've been working on improving a site focused on Indianapolis BJJ and I use Kohana and Code Igniter. I highly recommend these frameworks due to their ease of use. If you have any questions about how they work please take a few minutes to research them. They will make your web-designing life much easier.

Chris60 (not verified) | Thu, 01/26/2012 - 07:47 |

I think other web-site proprietors should take this web site as an model - very clean and excellent style and design, as well as the content. You're an expert in this topic!
grosir alat tulis kantor

grosir alat tulis (not verified) | Wed, 01/25/2012 - 12:57 |

I have not checked in here for a even though due to the fact I believed it was getting uninteresting, but the previous handful of posts are actually great top quality so I guess I’ll include you back again to my day-to-day bloglist. You should have it my friend. :)
alat tulis kantor

alat tulis kantor (not verified) | Wed, 01/25/2012 - 11:41 |

I can see there is going to be high possibilities for this movie to be critized by many viewers should this movie made into public view LG 55LK520 55-Inch 1080p 120 Hz LCD HDTV

gmash (not verified) | Wed, 01/25/2012 - 00:47 |

Thank you for this blog. Thats all I can say. You most definitely have made this blog into something thats eye opening and important. You clearly know so much about the subject, youve covered so many bases. Great stuff from this part of the internet. xbox 360 video games

Guest22 (not verified) | Wed, 01/25/2012 - 00:46 |

Such a choice implies the acceptance of the sociology of complexity, which would not be destabilized by the fact that these types may tie or untie in terms of congruence. Headhunter

Rossie (not verified) | Tue, 01/24/2012 - 21:03 |

This page is insightful and helpful. Lots of people will assert that everything in your site is great. In the event you keep on submitting helpful articles or reviews on your web site
karton

karton (not verified) | Tue, 01/24/2012 - 18:02 |

Thanks for sharing this information. I really like your blog post very much. You have really shared a informative and interesting blog post with people.
lakban

lakban (not verified) | Tue, 01/24/2012 - 17:44 |

Thank you for the work you have put into this post, it helps clear up some questions I had.I will bookmark your blog because your posts are very informative.We appreciate your posts and look forward to coming back...
grosir alat tulis kantor

grosir alat tulis kantor (not verified) | Tue, 01/24/2012 - 17:38 |

Great post, i came here for the first time and found many information, all the information has given here is so useful for all type of people. I love this job really. thanks really thanks for the post
alat tulis kantor

alat tulis kantor (not verified) | Tue, 01/24/2012 - 17:26 |

Great post, i came here for the first time and found many information, all the information has given here is so useful for all type of people. I love this job really. thanks really thanks for the post
alat tulis kantor

alat tulis kantor (not verified) | Tue, 01/24/2012 - 16:55 |

Very nice comments. This is really helpful for me and I was really waiting for a great article to learn a lot from you cannot really valuable experience.

dog kennels

Guest (not verified) | Thu, 01/19/2012 - 03:52 |

Working on the give topic is really a difficult task but your this tutorial made it easy for me to handle it without any problem. If anyone seeking information then this blog is the best place for him as it has quality content for your required information. Thanks for sharing.

funny quotes

Guest (not verified) | Tue, 01/10/2012 - 14:36 |

I like some of the comments as well even though I would rather we all
keep it on topic so that to add value to the idea.

izreke (not verified) | Fri, 01/06/2012 - 09:42 |

You helped me greatly in my work by writing this article.

ScotWetherington (not verified) | Tue, 01/03/2012 - 12:53 |

I think it is the famous article in all.

Scot

ScotWetherington (not verified) | Thu, 12/22/2011 - 19:39 |

Interesting post and thanks for sharing. Some things in here I have not thought about before.Thanks for making such a cool post which is really very well written. Will be referring a lot of friends about this. Keep blogging
how to get rid of moles

alston foster (not verified) | Thu, 12/01/2011 - 16:17 |

This is the template that I have been looking for, thanks that I have found it here.
the best ipad case

darrensy (not verified) | Wed, 11/09/2011 - 19:57 |

It was the new design but not the new version of drupal !
Not same !
Best,
Jeux de police

Eric (not verified) | Tue, 11/08/2011 - 02:06 |

Definitely a good platform to make the developers understand the new introductions in the product. Sessions and kimball

johnrstuart (not verified) | Mon, 10/31/2011 - 17:02 |

I'm trying to build my own theme for my site but I can't enter the page.tpl.php. It said that I'm forbidden. I logged in to the site as admin already and even logged in at the one that host my site but it still says I'm forbidden. Please help me! PHR Certification

ginger rhain (not verified) | Thu, 10/13/2011 - 16:33 |

Does your blog have a contact page? I'm having a tough time locating it but, I'd like to shoot you an email. I've got some recommendations for your blog you might be interested in hearing. Either way, great site and I look forward to seeing it grow over time.

KareemBelue (not verified) | Sat, 09/17/2011 - 23:48 |

I think that it is really great information for all web developer and website designer. Because Drupal theme is very important for designing website. estylehouse It is very clearly and easy for using.

Akher (not verified) | Tue, 09/13/2011 - 03:36 |

I just recently started using Drupal and so happily stumbled upon your post. I'm still a novice web designer and such instructions to me were very helpful. Thank you.

Gregory Kolymski (not verified) | Fri, 09/09/2011 - 05:55 |

I use Kohana and Code Igniter and I would like to recommend these frameworks. One of my projects is based on this technology. It has built-in template engine and is really fast.

DOM (not verified) | Tue, 10/07/2008 - 18:43 |

I personally did not saw many developers or designers offering drupal theme i do not know why its happen because drupal is a thing with different features.

john (not verified) | Wed, 09/03/2008 - 18:48 |

Your site is great and I really appreciate it! I have always enjoyed reading your site.

Guest (not verified) | Wed, 09/03/2008 - 15:24 |

Zen is a well supported and documented starting point for Drupal theming, as others have mentioned here. Also, I'm a fan of the Hunchbaque theme for simple stuff.
Premium Drupal themes

Guest | Wed, 07/23/2008 - 04:17 |

Such a choice implies the acceptance of the sociology of complexity, which would not be destabilized by the fact that these types may tie or untie in terms of congruence. Headhunter

Roland (not verified) | Tue, 01/24/2012 - 21:02 |

Post new comment

The content of this field is kept private and will not be shown publicly.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Allowed HTML tags: <a> <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd> <img> <img /> <br /> <br> <p> <blockquote> <sub> <sup> <hr /> <hr>
  • Lines and paragraphs break automatically.
  • You can enable syntax highlighting of source code with the following tags: <code>, <blockcode>. Beside the tag style "<foo>" it is also possible to use "[foo]". PHP source code can also be enclosed in <?php ... ?> or <% ... %>.

More information about formatting options