Beginner Drupal Theming at DrupalCon Denver

| Live Blog Posts

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

IMG 3589

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.

theming3

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/.


About the author

Rod holds two masters degrees and has been training people how to do "things" for over 25 years. Originally from Australia, he grew up in Canada and now resides just outside Cincinnati, Ohio.