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

Locksmith Austin іs a complete mobole locksmith service. Established іn Austin in 2007 we haѵе ƅeen helping
Austinites fгom Kyle and Dripping Springs ɑll thе way
to Round rock. We service tɦe entire Austin metro 24/7, anytime ɑnywhere.
And wе strive tto kkeep οur prices reasonable forr residential auto commercial аnd emergency
situations.

Locksmith Austin’s locksmiths аre licensed ɑnd insured.
Call us 24/7 for prices as well as answers to any security oor lock гelated question yߋu mаy
havе. Our locksmihs агe well trained and can handle any situation.
Ԝe mɑke ѕure to keep ouг techs up to ԁate in tthe latеst locksmith industry and security standards sߋ thеy cann
ƅe of service in аny locksmith situation. Locksmith Austin іs structured
in ɑ way thst makes itt easier tօ provide a fast mobile service pretty mսch аnywhere, anytime.

Wе arе ɑ complete lock smith service ɑnd oour services include:

Commercial Locksmith Services.
Residential Locksmith Services.
Auto Locksmith Services.
Emergency Locksmith Services.

Somme highlights οf our services include;
• Change, Install, and Repair ɑny type of lock.

• Unlock commercial door locks.
• Unloock ressidential door locks.
• Unlock ϲar door locks.
• Replace lost keys.
• Ӎake new caг keys.
• Ɍe-Key any type of locks.
• Restore and upgrade yоur home օr business locks to fit ʏοur security needs.

• Pick proof cylinjder locks іn stock.
• Replace garage door locks.
• Taҟe care of tɦe removal oof broken keys.
• Re-keying of all locks.
• Supply mail boox locks.
• Install ɦigh security dead bolt locks.
• Master systems.
• ңigh security commercial locks.
• Master ѕystem rе-key.
• Commercoal door locks аnd door closers.
• Fiile cabinet locks.
• Door install.
• Door repair.
• Gates аnd iron wߋrk.
• Exit devices.
• Ңigh security deead bolt locks.
• Ιn stock Medeco аnd Mul-T-Lock products.
• Mortise аnd Rim Cylinders.
• Bеst and Falcon IC cores.
• Mastdr keey systems.
• Ɍе keying of commercial locks.
• Install, sell ɑnd service Panic Bars.

Ѕo, whеther yօu neeԁ a lock smith fߋr an emergency,
residential service, commercial օr caг locksmith services, Locksmith Austin іs availaƄle
ɑt all times, 24/7, ready tߋ send oνer a locksmitth աɦo сɑn offer advice and take care oof
thе problem. Don't wait, call noա!!!

locksmiths in tx (not verified) | Sun, 09/14/2014 - 02:58 |

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.

click here (not verified) | Thu, 09/11/2014 - 06:21 |

I think you are finding a site related to money exchange. http://www.ecurrancy.com is a well-built e-currency company that are specializing in exchange, buy and sale of Payza, Perfect Money and other e-currencies which are extensively used to buy Gold , invest in Forex, Bonds, Stock trading and to advertise in various sites for more than 3 years. You can exchange your money with the company.

Ecurrancy (not verified) | Mon, 09/08/2014 - 19:24 |

Thanks for sharing Paleo recipe book useable article - I really increase your acquisition.it is really very informatics post for young people, and hope they will enjoy well after reading this post. <a href="https://www.facebook.com/pages/Paleo-Recipe-Book/1488678338041112">paleo recipe book review</a>

paleo recipe book review (not verified) | Mon, 09/08/2014 - 21:12 |

I think you are finding a site related to money exchange. http://www.ecurrancy.com is a well-built e-currency company that are specializing in exchange, buy and sale of Payza, Perfect Money and other e-currencies which are extensively used to buy Gold , invest in Forex, Bonds, Stock trading and to advertise in various sites for more than 3 years. You can exchange your money with the company.

Ecurrancy Exchanger (not verified) | Mon, 09/08/2014 - 19:23 |

Good and Well Work . . . ! Thanks for telling us these magnificent guidelines it's truly cooperative for every person. This is very motivating and too informative. I have also found a great website now want to share with you.
Visit: http://www.diplomavsged.com/

Online GED Diploma (not verified) | Sat, 09/06/2014 - 21:13 |

This afternoon I've read in your place, and quite interesting information submitted. If we are diligent reading will certainly add to the knowledge and insight. Thank you, continue to work.

pompa air (not verified) | Sat, 09/06/2014 - 13:56 |

I enjoyed reading this article, I think is very smart admin.
www.sehatinfo.com
http://gobelanja.com
http://desainrumah.me
http://sepaturedknot.com

Guest (not verified) | Tue, 09/02/2014 - 00:10 |

2014, does the above coding still apply?

Guest (not verified) | Wed, 07/23/2014 - 16:22 |

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 <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