My Drupal Blog

Wow! This has been way too long a break since my previous post, and I’d just like to start by apologizing. I know how annoyed I get when people don’t post regularly, and I had hoped to avoid falling into the same trap – sorry about that.

Anyway, I haven’t just been sitting around all that time – well actually I have mostly been sitting around, but also working ;). I’ve been doing a few bits, one of which I’d like to give you a little more detail on now partly because it’s my own site :) but also because, as web designers, you might find it useful, and I’ll explain how I built and themed it in Drupal.

The site in question is htmlbuzz.com. It’s a web design aggregation site, and users can view news by source, topic, or forum.

So, how’s it built? Well, it’s pretty simple really.

• I use the core aggregator module and the leech module to pull feeds into the site.
• The aggregator module generates blocks for each feed and/or category.
• I use the views module to create blocks for the feeds which are pulled in via leech.
• All of the blocks are then laid out using custom panels.
• Extlink module is used to add the little external link icons.
• Finally, the nifty ‘hover-over-a-link-and-get-a-preview-of-the-post’ trick is accomplished using a light sprinkling of unobtrusive javascript.

What about the theming? Well, obviously with this much dynamic content running through the site the design needed to be kept light – both so that it would be fast loading, and also so as not to detract from the content.

The header uses a repeating bg image and images for the primary links tabs. The main layout is arranged using a custom panel, with each block being styled using css. Finally, icons for each block are used to add a little visual guide for the user.

One interesting problem I ran into was what to do about the dreaded IE6 and my logo (which has a transparent bg). If you look closely at the header you’ll notice a light diagonal pattern running through it. As I just mentioned, this whole bg header graphic is created using a repeating .png file about 5px wide. The logo (with its transparent bg) then sits on top, such that if you resize the browser window the logo will appear to float over the bg image.

Now this is great in Firefox and IE7, but IE6 does get a little upset and gives the classic solid block of bluey/gray – not good. But hang on, you might be thinking, what about my previous Drupal 5.1 + IE6 + PNG post? Can’t I just use that fix? Well unfortunately this won’t work for the logo, because the technique requires that the image which you replace is originally called from the css (and is a bg image), something like:

With the logo, Drupal effectively hard codes it into the page from the page.tpl.php file, by printing it out with something like (this may vary from theme to theme):

The result being that the full code

gets output in the html.

Long story short, I was not prepared to compromise on the design for the sake of IE6 (I like diagonals, goddamnit!). Anyway, I basically figured out two solutions:

• The easiest way to do it, which needless to say I figured out second, is to just remove any reference to the $logo from your page.tpl.php file so that it won’t get output automatically in the first place. You can then just add your own div into the page.tpl.php file and place your logo inside of this as a background image. Because your logo is now a bg image you can use the same IE6 png hack as I discussed previously.
• The other way, which I use at the moment, is to add a little PHP to the page.tpl.php file which figures out what browser the user has, and then feeds them a different logo depending upon the result. I largely adapted this solution from a post on the Drupal forums.

So, I think that pretty much covers it. The site still needs a few touches here and there, and I’m planning to increase the options users have when sorting the news. Feel free to check it out, and if you have any questions, suggestions, criticisms etc just leave a comment or drop me an email.

Thanks,
Laurence.