Presentation on DrupalCamp Athens 2010 (http://www.drupalcamp.gr) on Drupal's theming limitations and how you can design around them.

1. Drupalcamp Athens 2010
Why m ost D rupal
s ites are ugly*
AK A: Dr u p a l Th e m ing li m it at
io n s
* it’s because they’re made by developers!
Sunday, 11 April 2010 1

2. The whole
Drupal
experience is
dated & ugly
Sunday, 11 April 2010 2

3. But it’s
changing!
Sunday, 11 April 2010 3

4. Why most Drupal sites
are 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
Sunday, 11 April 2010 4

5. 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)
Sunday, 11 April 2010 5

6. 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
Sunday, 11 April 2010 6

7. Limitation #1:
Moving things around Page
• Content is arranged in
stacks
Region
• It’s EASY to position
things inside a stack
Node
• It’s HARD to place
things in other stacks Block
• You CAN code around it
(it may require hacks)
Sunday, 11 April 2010 7

8. Content Node
Fields
Placement
• All node content
should be inside a
single <div>
Field
• Fields are the most
common thing you’ll
want to move (e.g.
move a node’s file
attachments to the
sidebar)
Sunday, 11 April 2010 8

9. 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
Sunday, 11 April 2010 9

10. Limitation #2:
Bloated HTML & CSS
• DIVitis
• CSS overload
(MANY css files!)
• CSS: sometimes too
specific to override
Sunday, 11 April 2010 10

11. Solution:
• Choose a clean starter theme: Basic or Mothership
• Clean things up yourself!
Sunday, 11 April 2010 11

12. 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)
Sunday, 11 April 2010 12

13. 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!
Sunday, 11 April 2010 13

14. 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!
Sunday, 11 April 2010 14

15. 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.x
http://bit.ly/cFPX3b
• Basic Theme: http://drupal.org/project/basic
Mothership Theme: http://drupal.org/project/mothership
Sunday, 11 April 2010 15

16. George Terezakis
gterez@lucidideas.gr
http://www.lucidideas.gr
http://twitter.com/gterez
Sunday, 11 April 2010 16