ted serbinski – a blog about drupal, macs, productivity, health, and bmws

a blog about drupal, macs, productivity, health, and bmws

Theming in Drupal 5.0: We're getting there!

As a self-proclaimed Drupal theming "ninja", I've built plenty of sites that don't look like Drupal. But to be honest, it's certainly not that easy. So for the next 5.0 release of Drupal, I've done my best to get in as many patches as possible to making theming in Drupal easier--and you know what, we've certainly made some great progress. Here's a rundown of the top theming patches that I got in:

  • #73961 -- Simplify adding CSS in Drupal
  • This was a great little patch that made it very clear and consistent how to add CSS files in Drupal. In 4.7, adding CSS files was a bit of a mystery, as I outlined in a previous Lullabot article. Now, starting with 5.0, it's very easy: drupal_add_css($cssFile, $type = 'module'). That's it. Just specify the type of CSS file, core, module, or theme, and this function will handle the rest, loading them in a correct and consistent cascading order.

  • #77183 -- Goodbye drupal.css
  • Building upon a simple way for adding CSS files was the ultimate theming patch for Drupal 5.0--obliterating drupal.css. Gone are the days of overriding this humongous and fairly out of control CSS file. Now, the CSS is split into per module CSS files, so it'll be easier to track down CSS styles, along with styles only being loaded if you are using that specific module. Using the new phpTemplate $styles variable, one can easily swap out any module CSS file for a different one or simply unset() it as well.

  • #78656 -- The first CSS hack in core
  • Yes, with the CSS files split up and a new, useful, defaults.css residing in the system module folder, it was time for a proper CSS clearing class. Based upon the excellent PIE technique, this new CSS clearing class eliminated a bunch of useless <br> tags. Not only that, but this CSS class is *useful*. I use it on almost every project and having it in core just makes it all that more convenient.

  • #65151 -- theme_links() is useful for themers
  • At last, a useful theme_links()! Now this function returns a semantic list of links, along with useful CSS classes, including both first and last on their respective <li> elements. This makes it super easy to plug in all of those wonderful CSS menu list techniques. Not to mention, Drupal is just a bit more accessible.

  • #18260 -- hook_link() returns structured links
  • The oldest theming issue to get in was the one that fixed hook_link() to return structured links. This makes it easy for modules and themes to get rid of say the "read more" or "add new comment" links, or even rearrange them. Not only that, but for themers all of these links now have associated CSS classes so it makes it really easy to add icons for each link. Additionally, $primary_links and $secondary_links return structured links too--a perfect fit for sending to theme_links() to output semantically correct menus for your site. Bad and boring links begone!

  • #66569 -- Move that damn feed icon!
  • One of my biggest gripes with 4.7 was it was practically impossible to move that feed icon. It was always appended to the body of the node or page, no way to move it unless you hacked core. Well now that it is a thing of the past, there is a new $feed_icons variable for you phpTemplate themers so you can place that link anywhere you want on the page. Not only that, but now there is the ability to have multiple feed icons per page, something the views module might be offering soon.

  • #81619 -- Better default phpTemplate files
  • One thing I noticed when teaching Drupal newbies how to theme was the fact the the default phpTemplates were a bit of a mess. No consistent styling, some missing classes, and some missing semantics. Those files are now cleaned up.

For more details on these, check out updating your theme in the handbook. Funny enough, looks like this time around I actually wrote the book ;-)

So those are the highlights of what's to come in Drupal 5.0--coupled with various cleanups and we're starting to get somewhere with theming in Drupal. But of course there are plenty of more ways to improve theming and this only scratches the surface. It's a great start and I hope in subsequent releases to Drupal 5.0 theming will become even easier, more efficient, and more of a pleasure.

If you have ideas for this but maybe not sure where to start, post your comments and maybe we'll get some patches in before 5.0 ships this fall. Or at least had a headstart for Drupal 6.0 ;-)

7 comments

 
Joe Moraca (not verified) wrote 2 years 10 weeks ago

Thanks for your work on this. I am sure it will help build better designs. ... now I need to start learning how to use the new functionality you are providing.

 
moshe weitzman (not verified) wrote 2 years 10 weeks ago

great list … and also lets mention http://drupal.org/node/65706, eaton’s mapping patch which dramatically increases the usefuleness of .tpl.php files in themes.

 
ted wrote 2 years 10 weeks ago

Oh right good call Moshe. I meant to mention that one but I’m still waiting for Jeff to write his article outlining how to use those new tpl files for both pages + blocks. He said soon :-p

 
Tony Aslett (not verified) wrote 2 years 10 weeks ago

Looks like lots of theming improvements on the way. Glad to see Drupal taking on my technique Contained Floats

 
ted wrote 2 years 10 weeks ago

Ah yes, Tony, most excellent work! I love that technique and use it everywhere. And now all Drupal sites are using it too, superb job :-)

 
Tim (not verified) wrote 2 years 10 weeks ago

8O this is sooo helpful!

 
joon (not verified) wrote 2 years 9 weeks ago

Ted, thanks so much for your contributions. I’m currently testing out version 5 and I’m amazed from what the whole team accomplished. Now I have to figure out the new theming features.

I want to contribute a theme some day. That’s after figuring out CVS which is completely alien to me.

Add your comment

The content of this field is kept private and will not be shown publicly.
  • You can use Textile markup to format text.
  • You may post code using <code>...</code> (generic) or <?php ... ?> (highlighted PHP) tags.
  • 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> <p> <img> <pre>

More information about formatting options

Subscribe to updates

don't worry, spam free!

Recent comments