Development Seed Blog

"It looks boxy..."  "Drupal sites look boxy..."  "They all
have three columns..."  "They all look the same..."  You hear
it a lot about CMS and no more in particular about Drupal or CivicSpace
sites.  What do you want it to look like?  Some organization
is necessary for both humans and machines to produce a website that is
readable and functional for the maintainers.  The developers must
keep this in mind.  Would it be a bad thing if your corporate
website looked like a Jackson Pollock
painting?  Probably.  You need to use some order on your site
so your readers are not staring at your site for 5 minutes just to
figure out what you're trying to sell or organize, because they
won't.  Although you may get away with creativity in your writing
and it will even help engage your readers, if they wanted to stare at
strange things and contemplate life's meaning, they'd go to an exhibit.

But that does not mean your site has to look like a box.  There
are a lot of best practices out there in terms of where readers look
first on a page, what colors transmit what feeling or information, how
wide a text area should be, etc.  So how do you get what you need
or want on a Drupal/CivicSpace site?  This was much of the
conversation yesterday evening on the Virtual Skills Share on Themes
conference call/IRC chat.  You can get the IRC log here and the audio here.

Development Seed presented a few helpful strategies and tools when it
comes to getting what you want - making y block do z and b page do c
while also doing x but certainly not d, only doing f, g, and h on
tuesdays, and crashing the database absolutely only on Mondays at 7am.
 

First helpful hint - use FireFox and use this tool - it is a
cross hair which will lets you hover over your Drupal/CS website and
find the exact CSS id's and classes for any element on the page. 
Every block has a unique identifyer.  Now, with PHPtemplate you
can override CSS on individual pages, meaning you can style anything
which is normally standard across pages (like the title of the page)
uniquely for each page.

Second helpful hint - use FireFox and the CSS tools, but keep
your other browsers open and check your modifications constantly with
the other browsers.  There are some things some browsers do not
like or behave differently on.  Keep track of these things and
check and double check in your browsers, even if it means using a mac
if you
use PCs, or vice versa.  This service (http://www.browsercam.com/) is also helpful but you'll need to shell out some money to use it.*

Third helpful hint - there is an entire section in the Drupal Handbook dedicated to theming
and a chapter on PHPtemplate as well as sections focused on theming
user profiles and flexinode.  These are examples for a larger
idea, which is overriding theme functions that exist in many major
Drupal modules.  If a module outputs something to the screen,
there is a good chance you can theme it if you know the theme function
and read this section on theming in the handbook.  

Fourth helpful hint - when trying to do something with a theme
override or anything w/ CSS, try little things first to test to see if
your override or CSS is being read.  Don't try to make your
element dance until it is standing - make the text bold before you try
to truncate it and output it in reverse w/ PHP just to be sure you're
calling it up correctly w/ the CSS or you've got your override working
properly.

Fifth helpful hint - Use http://drupaldocs.org/. 
Here you can find what theme functions exist and just browsing through
the functions might give you ideas.  In the left navigation under
API reference click on the version of Drupal or corresponding
CivicSpace version you are using.  Then click on functions. 
All theme functions begin w/ "theme."  Navigate to the theme
functions using the next-page links at the bottom (which are themeable
;-) ).  Remember, drupaldocs is for core, so for contributed
modules do a text search in the .module file for theme functions.

Sixth helpful hint - As a designer or developer, it does help to
think or imagine like Jackson Pollock or Picasso...just make sure your
output is, dare I say, somewhat boxy, in the abstract sense at least.
:-)