Tagged : theme development

in Uncategorized

how to modify a drupal theme the right way, or why sub-themes in drupal 6 rock

sub-theme_branching Situation: You found a great new theme for your Drupal-based blog or Web site. You give it a whirl and it looks awesome, but it needs a few tweaks before it really becomes your own. Since the tweaks you’ve got in mind are so minor, you open up the style.css in vim, pull up Firebug, and start hacking in your edits.

Problem: The main problem with this method comes later, when you want to upgrade to a newer version of the theme.  That’s what happened to me today. I was poking around my site and noticed that a newer version of the Nitobe theme was just released. It was a beta at the time I installed and customized it, so while nothing was broken I decided to go ahead and update it. While identifying and migrating my minor css changes over to the new style sheet wouldn’t really present much of a problem–Beyond Compare makes pretty quick work of diffs and merges for me–it did seem terribly inefficient.

Solution: If you’re fortunate enough to be on Drupal 6 or later, sub-themes solve this problem handily.

My quest for "a better way" led me to the Drupal 6 Theme Guide, where I read up on sub-themes, a new feature in Drupal 6 that makes it very easy to extend existing themes without mucking up the original code.

To create a sub-theme, you simple create a new folder in your themes directory. In the folder you create a .info file containing basic info about your sub-theme, plus information for any additional styles sheets you want to define. Here’s my subtheme.info: 

name = sam.charrington.com
description = A customized Nitobe subtheme for sam.charrington.com.
screenshot = screenshot.png
base theme = nitobe
core = 6.x
stylesheets[screen][] = my_styles.css

That last bit, about the style sheets, is the key. Because Drupal adds your sub-theme’s style sheets last, you get to take advantage of the cascade and override any styles you want to tweak. Just copy the target selectors from the original .css file into a new "override" file that you put in the sub-theme directory and make your edits there.

The end result is, ideally, a clean and easy separation between your style updates and the original theme. I say ideally because in my case I needed to make one other change so that Nitobe’s rotating header images would pick up from a directory in my sub theme. Details and patch here, for the interested.

in site updates

Site maintenance

More Drupal tweaking today:
 
  • I installed the service_links module to make it easier for visitors to bookmark articles on the site. I also installed the trackback and tinymce modules, which make it easier to do some backend stuff.
in Uncategorized

Easy upgrade to Drupal 5.1 if not for Flexinode

I started messing around with Drupal this evening, and as usual it managed to consume my night too, keeping me up way too late. Most of the time was spent looking into what it might take to migrate my work site from 4.7 to 5.1. Using a local copy of the database, I installed the 5.1 files and ran the update script. I was pleasantly surprised with how easy it was to upgrade the core components and database. But I'm not nearly done… The site makes heavy use of the flexinode module to create custom content types. Unfortunately, flexinode isn't yet supported in 5.x. If converting the flexinode-based content can be done easily, I'd just assume migrate everything over to CCK. I'm beginning to fear it won't be too easy though. I haven't looked into which of the other modules the site uses have been ported to 5.1, but flexinode is by far the most important. If I can get that figured out, I'm as good as done. I also noticed that my theme for this site doesn't render correctly in IE(7).
It looks like this: when it should look like this: . I hope it's an easy fix. Easy or hard, I'm not doing it tonight!