Drupal How To

In this section you'll find our ever expanding list of Drupal "how to" tutorials and snippets.

How to add a sidebar-top region in Genesis

Genesis supports 3 different layouts including both sidebars on either the left or right of the main content. In this configuration it can be useful to have a sidebar-top region that spans the width of both sidebars, but sits on top of them.

An example of when you might want to do this would be to display a fixed height banner or contextual ads. Its not good for content that will change in height as it could then overflow the div—while the fixed height limitation could be overcome, this tutorial is meant for beginners and is a simple strait forward explanation of how to add new regions in Drupal and how to position the new sidebar-top region using CSS.

This tutorial shows you how to do this in the Genesis starter theme for Drupal 6.

Give your Nodes some Class

In this short tutorial I'm going to show you how to set a unique class on your nodes based on taxonomy terms, which is something I've been asked about more than once or twice.

First thing you need is a template.php file and inside that declare a preprocess function. We're going to use this function to build an array of class names and then print them in node.tpl.php. With me? Ok.

How Gpanels Work - the Secret Sauce

When I first built Gpanels I ran into the usual layout problems when using percentages—IE rounding up, Operas inane percentage rounding behavior and a bunch of other pita issues.

I decided there must be a better way of achieving the layout I was looking for, and not using grids, because my base theme is not grids based.

Drupal Design Cheatsheets

Cheat sheets, or reference cards, help you remember things quickly and serve as a quick reference when recall is waning, such as during those long endless nights of frantic photoshopping, or is that just me?

Whether you need to learn something quickly or need a quick refresher on how to do certain tasks, cheat sheets allow you to do either one with relative ease. Print them out and decorate your workspace or save/bookmark them for later use, whichever way suits you best.

Web Typography Resources

I love typography, seriously, I do. Can't say I'm all that good at it, which seems odd since I've been staring at all my life. There must be more to it than just looking so I went in search of a few great websites about, you guessed it, web typography, and came up with my short list.

Video Tutorial - How to Design a Portfolio Site

From Elliot Jay Stocks,one of my all time favorite designers, comes two great screen casts on how to design a portfolio site, these are a must see if only to get an insight into one todays most influential designers.

CSS Sprites for Drupal Themes

What is a CSS sprite? In short a CSS sprite is one big image combining all the images used in a theme or web site template. So instead of having loads of separate little images, you combine them into one.

For an example Yelvington posted a really good example of CSS Sprites - take a look at his example sprite.

Use Icons for Node and Comment Links

A lot of people want to replace the boring links text with sexy icons. The easiest way to get this done is using an accessible image replacement technique. There are lots of IR methods that have been developed over the years and I'm going to show you one that I use all the time and works in all browsers, and most importantly is accessible to screen readers.

Element Styling Cheat Sheet

When I'm building a new theme at some point I like to style all the html elements in one shot. Often designers will send me a style guide with references to all manner of things so this gives me a chance to set some defaults from which I can then build on.

You might call this a "tip from a pro", but this is something all budding themers can make use of, and save yourself a few minutes as well.