Drupal How To

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

Border Radius Reference

Full reference for khtml, moz and webkit + CSS3 rounded corners.

-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;

Page Template Suggestions per Node Type

Sometimes its useful to have a page.tpl.php template per node type. While you can have a node-[type].tpl.php be default in Drupal 6, the same does not apply to page level templates.

To add these template suggestions to your theme simply add the following code to template.php, replacing themeName with the name of your theme.

Field Type Suggestions in Drupal 7

NOTE: I have submitted a feature request to Drupal 7 to have this included in core - if you have some opinion on that please see Field Type Template Suggestions

Today I finally got around to testing out the new field suggestions in Drupal 7. If you're not familiar with the standard suggestions in short you can either use field templates or override theme_field using a naming convention not unlike we do with preprocess functions. What struck me as kind of odd was the lack suggestions for field types—maybe there's a very good reason for this such as performance, I don't know, but I thought it might be interesting to see if I could use them, if I wanted to.

Add first and last classes to secondary local tasks

We had a project recently where we needed to add first and last classes to Drupals secondary local tasks. I was in a bit of a hurry so instead of trying to figure this out myself I Googled it and pretty quickly found this post on Drupal.org which seemed to fit the bill. Problem is the post doesn't actually tell you how or where to use the snippet, which isn't much good for those of you struggling with Drupal in the first place.

Page template suggestions for taxonomy vocabs

Drupal's template suggestions are plentiful and pretty powerful stuff, however, given all the options there are some noteable oversights. In particular the ability to use page-taxonomy suggestions per vocabulary, something like page-vocab-1.tpl.php to theme all taxonomy term pages in vocabulary 1 (where 1 is the VID or vocabulary id).

To achieve this we turn to our trusty preprocess_page function which by now every Drupal themer worth his or her salt knows all about.

Add Superfish Drop Menus to Any Theme, Easily

How to add a Superfish drop menu to Genesis or Adaptivetheme is one of the most common questions I get. Believe when I say I get emails from well intentioned Drupal users on a weekly basis asking me this. So now, please stop emailing me, I relent, heres how its done.

1. Get the Files

First, download the archive attached to this page. Unzip it and place in your theme.

Note that these files may now be out of day and there could be newer versions.

Font Family Groups

Quick list of some handy font family groups (often called "font stacks") for web design and Drupal theme development. Includes the three groups that come with Adaptivetheme starter theme and an example of how to set the font-family in your CSS.

Basic Groups

Sans serif - smaller

"Helvetica Neue", Arial, Helvetica, sans-serif

Sans serif - larger

Verdana, Geneva, Arial, Helvetica, sans-serif

Serif - smaller

Garamond, Perpetua, "Nimbus Roman No9 L", "Times New Roman", serif

Semantic Views Module for Drupal 6 - Video Tutorial

The Semantic Views module for Drupal 6 allows you to easily insert HTML markup for your Views rows and fields.

This is a new module by bangpound and I think this is really going to change how we think about theming Views because for the first time it puts clean semantic Views output in the hands of site builders and other end users, without having to get their hands dirty in the templates.

Getting Started with CSS

Prolly one of the most frequently asked drupal design questions to me and others in the Drupal forum is "how do I [insert question] CSS". Answering these questions provide little more than the proverbial *fish*, whereas we really want to be teaching them *how to fish*. Heres a few resources that can really give you a head start with CSS.

How to Add unique classes to Drupal menus

Sometimes you want to be able to style menu items individually. For example you may want to use image replacement to display icons instead of the text, or you may want to make one menu item stand out from the rest.

Drupals Primary and Secondary links allow you to do this because they print a class on the li that includes the mlid, so its easy to target a particular link doing something like:

li.menu-123 a {font-weight: bold;}

But, in normal Drupal menus, the ones that appear in blocks, no such classes appear, which leaves them all with the same style.