Beginner Drupal Theming at DrupalCon Denver

This is a live blog of “Beginner Drupal Theming” at DrupalCon Denver by David Needham.

What is a theme?

Code that takes Drupal’s default markup and makes it look pretty.

It’s the last call before the page get’s printed to the webpage. In that sense, the themer is the most powerful person in the process.

Sub-themes are a great way to start. You can start with a theme that looks pretty much what you want. By using a sub-theme you can reliably make slight changes to an existing theme. Using base-themes is incredible. There are tons of them at Drupal.org.

5 Favorite Theming Tools

1. The Admin Menu module
2. Firebug for Firefox / Inspector for Chrome
3. The Style Guide module
4. The Devel module which allows you to add/delete dummy conten quickly
5. Theme Developer which is like Firebug for Drupal. You can see why something works the way it is and what function / theme file is this element coming from.

For the purposes of the demo – “rose” is the name of the theme.

A Sample .info file for a Theme

name=Rose
core=7.x
engine = phptemplate
stylesheets[all][] = style/reose.css (all - media type, to have a print one you could add that here)
Block Regions:
reginos[header] = Header
regions[help] - Help
regions[content] = Content
regions[sidebar_first] Left sidebar
regions[sidebar_second] -- Right sidebar
regions[footer] = Footer
define[position] = Human readable Name
help and content are required
features[] = logo
features[] = name
features[] = slogan
features[] = node+user_picture
features[] = comment_user_picture
features[] = favicon

Only include what you’re going to use.

Demo Time:

Big Step 1:

1. Create a new folder inside sites/all/themes/ (rose)

2. Create a new file – rose.info

name = Rose
description = Rose is a theme create on the fly at Drupalcon Denver!
core = 7.x
engine = phptemplate
basetheme = bartik (this allows your new theme to use Bartik as the main theme - yours is now a child theme)
stylesheets[all][] = style/rose.css
reginos[help] = Help
regions[content] = Content

(good comment – always feel free to look and see what others are doing – don’t feel like you have to memorize all of this)

3. Create a /css/ folder inside sites/all/themes/rose/.
4. You can go and enable the theme and start styling.

Using Style Guide – you can see what the different elements will look like. (really helpful!!) you can get aobut 70% of your styleing done using this page.

so… for instance.
Change the status message to purple. Using firebug you can see all the styles for any element.
this provides the class definitions… and you can now start adding class definitions to your rose.css

once you create your child theme – make sure all the positions are added to your .info file… then start making your chnages.

Big Step 2:

Template files:

page.tpl.php (find this using theme developer module – only leave enabled when using) — it will show you what file is generating elements on the page – like page.tpl.php etc.

By copying that file from your master theme to your theme you can now override the output.

From there Devel is a great way to add content so you can actually style it.

Big Step 3:

Digging into the php.

Create a template.php file inside your theme folder.
pre-processing a page – http://api.drupal.org/ for a good overview.

Its hard to capture a demo in a blog like this.  See the links below for more information.

http://is.gd/denvertheming
http://is.gd/lvlupthemer

The slide for this presentation are available from: http://davidneedham.github.com/Hekyll_Beginner_Theming/.