Working with Drupal Themes Pt. 3

UPDATE: I’ve published 5 articles on theming with Drupal. This one is the first (thus the pt.1). Here’s the links to the others:

Now that I’ve got a decent setup for working with PHP (see my editor search) code, I can start digging into more serious skin changes. I spent a bit more time messing with various CSS changes to the skin to match new logo and the colors I picked. Here’s a shot of what my site looks like now:

Current Layout with Trooper Theme

I’ve got most of the CSS touched up, screen space and columns maximized, and most of the buttons, rules, and other elements colored up ok. I have that one button for primary links to play with. That’s next because what I want to do now is play around with locations of things. That’s where my Active State Komodo Editor comes in. The PHP template has a div based layout. For major structural changes you can either move things in the template around or use CSS positioning or a combination of both, which is what most people probably do.

The main page to look at for general placement of elements is the page.tpl.php file. Open this up in your PHP editor (you can use any text editor if you don’t have something fancy). Here’s what mine looks like:

HTML Code for Drupal Theme

You see that each section from the UI is located in a div that is structured in a table format. To move things around just use cut and paste. For example I can take the breadcrumb section and duplicate it at the bottom of the page by simply copying it and pasting it just above the footer space:

CSS HTML Code For Drupal

Now when I refresh the page I’ll see a second breadcrumb at the bottom, which can be helpful for long posts – like this one 🙂 Once you get things structured into the order that you like then you can tidy up with CSS positions, margins, and padding.

If you want to modify the appearance of these blocks you need to look at template.php. There are some decent instructions in the file that guide you. Basically if you take block and place it template.php, rename it following the instructions, and then make some changes, then you can alter the appearance of the blocks themselves. There’s also some decent descriptions in the guide on drupal.org.

I will do a final Pt.4. My goal is to get a Drupal skin that looks like this:

Drupal Tropper Dream

Click on it to see how cool that is! This is a skin I made for a Plone site. Its a mod on a skin from Cereblue. I’m a huge Star Wars fan and I hope Lucas Arts does not mind that I scammed screen captures from their game Republic Commando. I think its the best computer game I’ve ever played and I love this skin. I’d like to make a similar skin for Drupal. I’m going to try and I’ll post a “how did I do it” soon.

1 Comment

  1. Pingback: Working with Drupal Themes Pt. 3 | Tarn Aeluin

Leave a Reply