My Drupal Blog

I guess quite a few people are looking to integrate some voting mechanism into their sites these days, so here's a quick guide to theming Drupal's vote up/down module Digg style. Btw, thanks to Chad C for the suggestion, and if anyone else has ideas for posts/tutorials they'd like to see on My Drupal Blog feel free to just post them in the comments or drop me an email.

For this tutorial I'll be using the vote up/down module 5.x-1.x-dev on Drupal 5.2 and the default Garland theme.

This tutorial assumes that you have already installed and enabled the other necessary voting modules – in this case the voting API module 5.x-1.5. If not, refer to the install.txt and readme.txt files packaged with the vote up/down module for further help.

The Digg button

Well, Digg is the classic voting button after all, so lets look at how you'd theme Drupal's vote up/down package to look just like the Digg button. Basically, we'll take the default Drupal look (left) and turn it into the Digg look (right).

OK, so here's the situation:
You've done a nice Drupal theme design in Photoshop, or the like, which incorporates a sidebar containing some kind of background image, maybe rounded corners, maybe a left–to-right gradient – you get the picture. Now this is great if the content fits within the sidebar image comfortably, but what if you want to add more content, or a user increases the default text size thereby increasing the area covered by the sidebar content? The result will be content which effectively spills over the background image and messes up your lovely sidebar design. What you could really do with is a sidebar which contains a background image that re-sizes automatically to fit the content…

Here's one solution (I'll outline another solution in Part 2).

Solution 1 - The Sidebar Sideways Sliding Door

Basically, the first solution takes the famous A List Apart sliding doors of CSS method and turns it on its side.

Without recapping the entire article, the basic theory is that you have two images, and one effectively slides under the other as the content area changes in size. This makes it appear as if the sidebar is dynamically resizing to fit the content.

In our sidebar's case we can achieve the same thing using one image for the top of the sidebar and another for the bottom. The sidebar_top.jpg image will stay on top and the sidebar_bot.jpg image will slide underneath.

There are two steps to incorporate this effect:

• Step 1: Create the images
• Step 2: Edit the page.tpl.php file and the style.css file

Step 1: Create the images

Firstly, we take our original sidebar image and split it to create two images – sidebar_top.jpg and sidebar_bot.jpg.

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.

Just a quick post today to let everyone know that there's an interesting discussion happening on the themes mailing list right now about the possibility of developing a Drupal theming extension for Dreamweaver CS3.

As someone who uses Dreamweaver for almost all of my coding I'm certainly interested to see what might come of this. Kieran Lal from CivicSpace has already raised a very interesting point about the ability of a Dreamweaver extension to actually attract new designers, because an extension could help bridge the gap between a product they know (Dreamweaver) and a product they want to get to know (Drupal). Certainly, I think that anything which can help attract new designers, and folks in general, to Drupal would be beneficial to the project as a whole.

Those who are interested in joining the list just need to head on over to http://lists.drupal.org/mailman/listinfo/themes and sign up. I'm sure that all suggestions and/or offers of help for development etc. would be most welcome.

If you’re building more than a couple of Drupal themes it can be very beneficial to create a base style.css file first.

In short, this is a stylesheet which acts as a starting point when creating a new theme, and contains all the things you’ll need to style. Organizing, and even indexing, this base style.css file will allow for maximum efficiency when building, and by creating a comprehensive base style.css file you can also save yourself the worry about whether or not you’ve left anything out!

The following is a list of most things which need styling if, for example, you wanted to cover all of the core modules:

• admin
• aggregator
• blockquote
• book
• breadcrumb
• code
• comments
• footer
• forms
• forms - admin tables
• forms - search
• forms - user-login-form
• forum
• general
• header
• layout
• links
• lists
• messages
• mission
• node
• pager
• poll
• pre
• primary links
• progress bar
• secondary links
• sidebar
• tables
• tabs

Sounds like a fun recipe huh? Well, having tried (and failed) previously to get this combination to work properly, I recently did some work for a client which demanded that .png files (Portable Network Graphic - image files which have transparent bits) were both used and looked correct in Internet Explorer 6.

Basically, I wanted to accomplish four main things:

• I wanted a real .png file with full transparency to look correct in IE6, and behave as it’s supposed to (i.e. letting you see some or all of what’s beneath it).
• I wanted to achieve this using only CSS – no Javascript, no PHP, no Flash, and no other trickery.
• I wanted this to work for background .png files, that is files which are called from the style.css file like so:
  #div_1 {
  background-image: url(images/druplicon.png)
  }.
• I wanted the solution to be as tidy as possible.

The trouble is that if you just try to load a .png into IE6 normally, you get the following outcome:

Ouch!

After some googling around, and a bit of trial and error, I came up with a solution which satisfies all of the above criteria. Here’s what I did:

Just a quick suggestion today - if you haven't already done so, I'd recommend checking out the success stories section of drupal.org.

Basically it's a collection of write-ups by people who have built some bigger sites using Drupal, and the processes they went through, modules they used etc. Obviously some are better than others, but I think they're all well worth a read, both for techniques and inspiration.

The most heavily commented of the lot is The New York Observer write-up, a very well written article (no surprise ;) ) which highlights some impressive usage of CCK theming, a tabbed box module, and flash integration. Interesting stuff.

Since writing a couple of weeks ago about how I was looking to develop a theme for drupal.org which utilized the color module I’ve had a little time to start designing something, and I’d be interested to hear peoples’ comments, suggestions etc.

The first example uses the default Blue Lagoon color scheme (click for a full sized image).

The second example uses the Mercury color scheme. (Ignore the link color for the minute, I haven’t quite figured this out yet ;).

The design incorporates all the usual bits - logo, site name, tagline, breadcrumb etc. - and I'm thinking of putting the secondary links below the primary links so that they would be associated with the chosen primary link (i.e. if you had two primary links - 'Fruit' and 'Veg' - the secondary links would show up as 'Apples, Bananas, Pears' if 'Fruit' was chosen, and 'Carrots, Peas, Cauliflower' if 'Veg' was chosen) - good idea or bad idea?

Let me know what you think.
Thanks,
Laurence.

More sites these days are using a custom image like a magnifying glass, or the word 'GO' in a circle, instead of the default search submit button. Here's a way that you can do the same thing with the Drupal search function, and only have to use CSS - no PHP and no editing template files (well, almost).

The image on the left shows the default search submit button, and the image on the right shows the new search submit button that we'll replace it with.

It's really just a simple three step process:

• Step 1: Create your image
• Step 2: Add a conditional comment to your page.tpl.php file
• Step 3: Add your CSS

Step 1: Create your image

The image can be of whatever you like, and is probably best in .jpg format.

Just make sure you save it into your theme's normal images folder.

For instance, if I am going to use an image of a magnifying glass called 'mag_glass.jpg' I would save it to '/sites/all/themes/mydrupalblog/images/mag_glass.jpg'

Basically, if you really want to be simplistic about it, Drupal theme design can be split into two clear stages – the design and the build.

The design is the bit where all the creative stuff happens. It’s the ideas stage, the point of questions which start ‘I wonder…’, and ‘hang on a second, what about…’. This is the place where Photoshop becomes my new best friend, and I try to pull everything together into one pretty picture. I like this stage a lot.

The build is the bit where I take the pretty picture and turn into a real live web page/site. This is the stage where I put on my code-monkey hat. It’s also the point at which I wish for some freak occurrence whereby I wake up tomorrow and IE6 no longer exists ;) I like this stage as well, although maybe not quite as much as the design bit, but it’s marginal.

Ideally, I think that these two stages should be completed in this order – design first, build second. After all, would an architect build a house without a complete design? Unlikely. So why should the virtual world design and build theory be any different from the real? Yes, it is true that the problems one may encounter, and the penalties one may pay, by jumping the gun in the virtual world are probably less severe than in the real world, but it’s still wasted time, and time is a precious commodity for any designer.