Working with Drupal Themes Pt. 2

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

• Working with Drupal Themes Pt.1
• Working with Drupal Themes Pt.3
• Working with Drupal Themes Pt.4
• Working with Drupal Themes Pt. 5

I managed to get the footer changes to work. There are a number of informational settings you can adjust in your Drupal site’s administration space. To find these go To Administer, Site Configuration, and then Site Information. You can include some basic HTML in these as well, although your theme may play havoc with this. For example a really long slogan like mine (“Et Eärello Endorenna utúlien. Sinome maruvan ar Hildinyar tenn’ Ambar-metta!”) will get messed up in most themes because it wraps too much.

While we are in the admin console, there are a lot of simple tweaks you can do to your theme from right here. Go into Administer, Site Building, and then Themes. Look for your current theme in the list and click configure. You can change logos, icons, and adjust other appearance items for your content. If you find that some of the checkboxes are not enabled its probably because there is some other setting somewhere else that needs to get checked.

Now that I have my footer fixed I want to explore what can be done with CSS to improve the Zen theme. As I mentioned in Pt1. I’m working from the zen theme. If you look in your theme folder you will see there is a “zen.css” – check that to see a number of the styles you can change. Use Firebug to experiment with slight changes to how things are positioned – see Pt.1 for more on Firebug. I prefer using as little space as possible for menus, headers, and the stuff that goes around the real content. This is pretty easily done with simple changes to zen.css.

After messing around a bit with the CSS this is what I ended up with:

By making changes in zen.css and layout.css (both in my theme’s directory) I have increased the space for my central content by about 15%. I still have a bit of work to do with the right column. I also shrank the header space too and eliminated the display of the text site name by changing it’s display attribute from “inline” to “none”. Making these kinds of changes is simple – just fiddle with the margin and padding settings for the div blocks on the page. Firebug makes this a breeze.

I should also point out that it is probably a good idea to make all your changes to the zen.css file. It seems that Drupal always loads the theme’s style sheet last so anything in this file will over-ride any other css page. By making all your changes in zen.css its easier to know where your changes are in case the original theme author releases a new version and changes things in layout.css.

Next I’m going to change all the colors to match my new logo and explore moving blocks around on the page. What I would like to do is move the search block, the “edit primary links” block, and perhaps a few other things. I guess I’ll do that in “part 3″…I have to do things in trilogies after all…yes that’s a Tolkien joke..