AKA: Drupal Theming limitations

Why most Drupal sites are ugly*

Drupalcamp Athens 2010

* it’s because they’re made by developers!1Sunday, 11 April 2010

The whole Drupal experience is dated & ugly

2Sunday, 11 April 2010

But it’s changing!

3Sunday, 11 April 2010

Why most Drupal sitesare ugly

• Bundled themes are UGLY and bad for starting a theme(In fact, most free themes are ugly)

• Premium, commercial themes business is nowhere as big as with Wordpress or Joomla

• Drupal looks SCARY to designers because: - it has a steep learning curve

- it requires a developer mindset, limitations need to be taken into account when designing

‣ Developers end up fixing things themselves

4Sunday, 11 April 2010

Drupal facts of life

You CAN’T theme Drupal without touching PHP(theming and development are intertwined)

You CAN’T (always) put stuff anywhere you want

You CAN’T (always) change anything you want

In fact, tou CAN change (almost) anything if you really really want to(but it may result in hard-to-maintain sites)

5Sunday, 11 April 2010

Two ways to tackle limitations:

• Spot stuff that Drupal can’t do well in a design

or:

• Design Drupal sites that can be easily coded

6Sunday, 11 April 2010

Limitation #1:Moving things around

• Content is arranged in stacks

• It’s EASY to position things inside a stack

• It’s HARD to place things in other stacks

• You CAN code around it (it may require hacks)

Page

Region

BlockNode

7Sunday, 11 April 2010

• All node content should be inside a single <div>

• Fields are the most common thing you’ll want to move (e.g. move a node’s file attachments to the sidebar)

Content Fields

Placement

Node

Field

8Sunday, 11 April 2010

Solution:• (Easy case) hide content fields in node view and invoke

them via PHP in blocks

• Drupal 7 is coming:

• You can’t move everything, don’t bother with little things, use CSS or forget it

9Sunday, 11 April 2010

Limitation #2:Bloated HTML & CSS

• DIVitis

• CSS overload(MANY css files!)

• CSS: sometimes too specific to override

10Sunday, 11 April 2010

Solution:

• Choose a clean starter theme: Basic or Mothership

• Clean things up yourself!

11Sunday, 11 April 2010

Limitation #3:Core Element Markup

• Core elements appear everywhere

• You can’t change one instance, you have to change the style EVERYWHERE

• Things might be more generic than they first appear to be, e.g. you can’t change theme_item_list() to affect the recent comments list, ALL lists will be affected

• Solution: Fix it with CSS (You CAN code around it, but you shouldn’t)

12Sunday, 11 April 2010

Limitation #4: Forms

• You can’t change forms from the theming engine, you have to write a module

• Solution: - Wait for Drupal 7: use hook_form_alter() in template.php

- Write a module!

13Sunday, 11 April 2010

Limitation #4:Using 3rd Party Modules

• Each module brings its own HTML/CSS

• Don’t expect that their styling (or markup) will look the same

• Solution: fix the code yourself!

14Sunday, 11 April 2010

References• Limitations of the Drupal Theme Layer

http://bit.ly/8ZHJm0

• Awesomeness Redefined: Drupal 7 Theming http://bit.ly/djuF73

• D7 Theming: so awesome you'll need a change of pants http://bit.ly/coC8vJ

• Converting 6.x themes to 7.xhttp://bit.ly/cFPX3b

• Basic Theme: http://drupal.org/project/basic Mothership Theme: http://drupal.org/project/mothership

15Sunday, 11 April 2010

gterez@lucidideas.gr

http://www.lucidideas.gr http://twitter.com/gterez

George Terezakis

16Sunday, 11 April 2010