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

Awesome post! Personally I like your site. . I am so impressed to read your content. I am looking forward for the next valuable and informative concept in your blog. Overall outstanding post. Carry on.

ebooks (not verified) | Fri, 04/18/2014 - 02:57 |

Even the prettiest websites online aren’t the most successful ones. It takes more than a pretty site with bells and whistles to make a website successful. That is where Syracuse Web Pages comes in, located in Syracuse NY we can offer you a great looking site but one that is easy to use and easy to navigate.

Syracuse NY web design (not verified) | Tue, 04/08/2014 - 21:55 |

I wish I could really do something about it. The oil painting by Hugo Pedersen looks beautiful. I’m really fond of antiques. It was really interesting to read about the Chinese wood basket. Thanks a lot for this post. Keep updating.

is bubblegum casting legitimate (not verified) | Tue, 04/01/2014 - 21:49 |

http://fahrunihijab.blogspot.com/2014/02/pusat-jilbab-terbaru-di-fahrunicom.html
Do you know you can smoke now in every where? this is not impossible now.

Guest (not verified) | Sun, 03/23/2014 - 20:57 |

another glorious work shown here, most outstanding one to have a quick access to article here.

Naturewise Garcinia Cambogia (not verified) | Wed, 03/19/2014 - 14:56 |

Some web creators over the globe are promptly using the Drupal outlining subjects and improvement techniques. What's more the vast majority of them have at this point got dependent on the alternate ways built in the planning and advancement methods. It is without a doubt a less demanding approach to get around your outlining procedures with Drupal planning tips.

online phd degrees (not verified) | Fri, 02/28/2014 - 20:13 |

Good information here. I really enjoy reading them every day. I've learned a lot from them.Thanks so much for sharing this information. Greatly help me being a newbie.

klebe bh (not verified) | Fri, 02/28/2014 - 02:47 |

Interesting post and thanks for sharing. Some things in here I have not thought about before. Thanks for making such a cool post.

aanrechtblad graniet (not verified) | Tue, 02/25/2014 - 04:10 |

Somе ƿrofessionals join for an extrta income and to hone their skills.
The widgets or controls, images, testimonials, messages or any other
spеcial thing thɑt your oгgaոization wishes to include then they must all be shown
in the wіreframe with the help of rectangulaг or square boхеs.
What are the current trends in graphic deѕign,
and how have the traditional elements played a huge part in the future of design.

salonsdejardin.net (not verified) | Wed, 04/16/2014 - 23:59 |

The widgets or controls, images, testimonials, messages or any other
spеcial thing thɑt your oгgaոization wishes to include then they must all be shown in the wіreframe with the help of rectangulaг or square boхеs

Jepara (not verified) | Sun, 04/20/2014 - 00:37 |

Our trip was one of the most fantastic trips my family as ever shared. I would make the trip again in the blink of the eye. Thank you for reminding me of the beauty of your country.

Harga HP Samsung (not verified) | Mon, 02/24/2014 - 16:24 |

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 |

If some one needs to be updated with latest technologies afterward he must
be go to see this website and be up to date all the time.

shaolin (not verified) | Wed, 03/19/2014 - 08:46 |

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 <a href="http://drupal.org/project/hunchbaque">Hunchbaque theme</a> for simple stuff.
<a href="http://www.topnotchthemes.com">Premium Drupal themes</a>

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

Great information. I am just getting into Drupal and theming sites for my <a href="http://www.furociousdesign.com/">Orange County Website Design</a> company, and I'm learning a lot of good things from posts like this. It's great to work with CMS's that are robust and have many options like Drupal does. Keep the great design information coming and I'll stay tuned in. Cheers!

Guest | Sat, 06/21/2008 - 04:25 |

Thanks for putting this together. It might be helpful to others visiting the page to note that if you're using drupal 6.x you need to include a *.info file in the theme directory (e.g: simplest_theme_demo) described above.

There's more info about this here: http://drupal.org/node/171205

I think the simplest *.info file would be something like:

name = Simple
core = 6.x
engine = phptemplate

Guest | Sun, 03/16/2008 - 02:11 |

I've used yellow highlights in the page.tpl.php image to call attention to the PHP variables embedded in the HTML structure. I just discovered this article, written in September '07, that also inspects the anatomy of page.tpl.php in easily chewable chunks: http://www.nerdliness.com/article/2007/09/10/drupal-theming

em | Thu, 12/20/2007 - 13:57 |

Beginner Drupal themers were often pointed to Zen as a starting point, but for a long time, it was a full theme that required a lot of style elimination to get to a realistic starting point. A week after this post was blogged, Zen was updated, and has been freshly minimalist-ized! Now I can agree enthusiastically with other Zen referrers: http://drupal.org/project/zen

em | Thu, 12/06/2007 - 09:23 |

Post new comment

The content of this field is kept private and will not be shown publicly.
  • Lines and paragraphs break automatically.

More information about formatting options