Beginner Drupal Theming at DrupalCon Denver

IMG 3589

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

{codecitation}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{/codecitation}

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

{codecitation}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{/codecitation}

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

Instructor

  • 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. He has worked in both the non-profit and for-profit worlds, in small companies and large corporations. His extensive open source experience includes WordPress, Joomla, Drupal and Moodle and he really knows how to help you get the most out of the system you chose. Rod plays ice hockey a couple of times a week and rides his Goldwing motorcycle pretty much everywhere he can.

0 0 votes
Blog Rating
Subscribe
Notify of
0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x