Ask Agaric: Starting out theming in Drupal

Totally deprecated, we now generally recommend starting with http://drupal.org/project/zen

Finding out how to theme in Drupal is not as self-explanatory as one might hope. One experienced designer e-mailed us:

So I've been looking around the Drupal site. Just to be sure of the type of coding that I am doing, tell me if I'm on the right track:

The site needs to be coded in HTML using 'div' tags instead of 'table' and CSS.

The pages that need to have PHP in them will be created later and added to the already coded pages.

If so, I will get started coding.

We wrote back: "Actually, not really."

Then we thought a bit more explanation might be in order, so Ask Agaric brings you the Agaric Guide to Beginning Theming with Drupal. (We'll alternately spell it themeing in order to pull in search engine hits from the generous spellers among us.)

There's a ton of different approaches to creating themes for Drupal. We're not sure about the method described above, but clearly one thread was by a designer very much against tables. (Possibly the process described came from part of the site for module developers, who should be outputting simple div tags that can be re-themed with css, or even as tables, by designers creating themes.)

While Drupal themes certainly can be designed without tables (one of the core themes, chameleon, is CSS only), the default theme (bluemarine) does use tables.

We've attached page.tpl.php (from bluemarine in this case) which is what creates the overall framework for every Drupal page (there is a Drupal module called frontpage which will let you replace the front page with a completely custom page, if you want a very specialized layout for the front page only-- this may be the easiest way for traditional designers to start, and not get hung up on the Drupal-specific theme needs until after their concept and design is complete).

Page.tpl.php (tpl for template) uses tables in this case, and there's hardly anything to it. Style.css has a bit more to it, but you the designer can just modify what you want, as you need to.

We would recommend someone new to themeing for Drupal start with bluemarine, as available in a download of Drupal, and modify style.css and page.tpl.php (the attached files) to make it look how you like. It's the

<?php
 
?>

parts of page.tpl.php that you do not want to change, so that all the parts of a drupal page -- header, sidebar(s), primary and secondary links (meaning top-level site links and second-level links are children of the top-level links.)

Some FTP programs such as CuteFTP on Windows or CyberDuck on Mac will even let you edit files right on the server, so you can see your changes right away with a browser refresh. (NOT for live sites; demos only.)

Don't let any of this stop you from starting your design, especially with the frontpage module which will allow the front page to be distinct and separate from the Drupal-powered site.

Ask Agaric should return with more about the easiest way to theme a Drupal site. Remember this is just beginning to theme: page.tpl.php controls the page structure, the template for the site, but just about everything about Drupal can be themed, the output of each module-- but that's a lot more complicated.

Enjoy your introduction to Drupal!