Tutorials

Getting Started with the Blueprint Theme

Published April 26, 2009

This article is also available in French, courtesy of KolossalDrupal.org. When it comes to starter themes in Drupal, there are two names that seem to always rise to the top: Zen and Blueprint. This article is about the latter, and how to get started with it. So, why is Blueprint a good starter theme? First and foremost, it's incorporates the Blueprint CSS Framework, an open-source project all on its own. The framework was designed to speed up CSS development time - specifically "layout" CSS where various HTML elements are positioned on the page. It also provides "sensible typography", a stylesheet for printed pages, and other features. The "layout" aspect of Blueprint is based on a grid-based system that breaks up the page into any number of columns that are very accessible from CSS. This is where the true power of Blueprint appears. What advantage does this give you as a Drupal theme developer? First and foremost, it cuts down on your development time by virtually guaranteeing that (providing you use the Blueprint CSS as designed) cross-browser CSS "float" issues are a thing of the past. Need a page layout that breaks up an entire page into any number of blocks? No need to get the Panels module involved, it's easy to do with Blueprint. You can Panel-fy pages without all the overhead (or learning curve).

Adding Rounded Block Borders to Your Site's Theme

Published April 7, 2009

Rounded corners are all the rage - and they have been for quite some time in web design. The way they "soften" up a design make them quite attractive to designers and decision-makers. Unfortunately, implementing rounded corners in a web page is not nearly as easy as it is to implement in a mockup using an image application. When talking about rounded corners, there are 2 distinct user cases to be considered - the first is when creating rounded corners only on the top corners of an area - this is commonly seen on tabs and block headers. The alternative use case is when all four corners of an area are rounded - this is usually seen in blocks and around content areas. This article will focus on the the case where all four corners need to be rounded. The result will be a method of adding the ability to optionally apply a rounded border to any block on your site in a way that doesn't break when the block is resized. By the end of the article, you should be able to add this option to just about any Drupal theme - the relevant files you'll need are available for download at the end of this article.

Magically Disappearing Default Search Text

Published April 4, 2009

Keeping a site's design as clean as possible is something all (well, okay, maybe not "all") designers and developers strive for. One relatively easy thing that you can do towards this goal is removing the supporting (and often unnecessary) text around your site's search field. I'm talking about the "Enter search terms" or "Search this site" text that floats innocently above or next to the text input box. Is this really necessary? I don't think so. A much cleaner way of presenting a search box is with some default text inside the input field that automatically disappears when the user moves the cursor into the field.

Event Registration with Ubercart

Published March 24, 2009

Ubercart is arguably the leading ecommerce module suite for Drupal. It allows site admins to sell virtually just about anything online, including physical products, downloadable products, and event admissions. Often, when selling event admissions, it is desirable for the registrant to be able to fill out a profile during the checkout process that can be posted on the site once the transaction is complete. The UC Node Checkout module was built for this purpose. This is the way last year's Do It With Drupal conference handled registrations - with these exact modules. Setting it up can be a little tricky, as it is not entirely a straight-forward process. Ryan Szrama, the de-facto leader of the Ubercart project, demoed this module during the recent DrupalCon DC. I thought I'd take the time to reproduce what Ryan did, as it is a great introduction to this module. Keep in mind it won't be an exact reproduction, but it should be pretty close. This article will assume you're familiar with some very basic Ubercart concepts, if you're not, don't worry, this isn't rocket science. One thing you'll need to do if you're playing along at home is to create the "keys" directory for test credit card payments - full info on this is located at admin/store/settings/payment/edit/methods in your Drupal install (assuming you already have Ubercart enabled).

Capture (the power of) the Flag (module)

Published March 16, 2009

The Flag module is one of those modules that in its previous incarnation (as the Views Bookmarks module) was a bit inflexible and often (at least in my cases) required some manual tweaking of the code to get it to do exactly what I wanted (no offense to the original authors, I actually used it a surprising number of times). The updated and renamed module is a breath of fresh air - it is an ease to install and configure for any number of use cases - in this article, I'll demonstrate how you can set up a list of the best comments on your site. The Flag module is extremely useful mainly due to its excellent integration with other Drupal modules - specifically Views and Actions (part of Drupal 6 core). It's also chock-full of AJAX-y goodness (flagging items doesn't require a full page refresh) and a plethora of configuration options.

Displaying Hierarchical Content

Published February 19, 2009

This article is also available in French. Displaying hierarchical content is a common request of database-driven web sites. Drupal gives you great flexibility in doing this without writing a single line of code, using a couple of battle-tested modules. As an example, let's say you're building an automotive web site. Your site is going to have a list of automotive brands and the vehicles they build. You'd like to only have to enter each brand's information into the database once, then simply refer to that brand whenever you add one of their vehicles to the site. In this example, I have 2 brands, Chevy and Jeep, and each brand has 3 vehicles. Drupal's powerful CCK module allows you to define different content types for your web site. The Node Reference module, included with the rest of CCK, allows you to set up hierarchical relationships between content types.

Using Display Attachments to Provide a Consistent Summary in Views 2

Published February 13, 2009

The "summary" list is Views is a really handy feature, but unless it is properly configured, it can lead to an inconsistent experience for end-users. The goal of this post is to demonstrate how a little bit of configuration can provide a very consistent user experience. Here's a quick example of what I'm trying to avoid: consider the following content type called, "Food": As you can see, it is a very simple content type, with only a single added field, "field_food_type". This text field is set up to require the user to select one of its options. When creating a view to show all "Food" nodes, there might be too many to display all at once - you'd like to break up the view by food type in order to allow the user to drill down to the food they're looking for. Using a single Views 2 "Page" display, this is easy to do - just add an argument for the food type and have it display a summary when no argument is present: This will result in the showing only the food types when the page is displayed with no arguments: When one of the food types is clicked on, you'll see a list of matching foods: This works great and is easy to set up if this is what you're looking for. However, I find that often I'd like the summary and a listing of matching content to be displayed at all times. When there is no argument present, then I want a paged list of all the content as well as the summary. When an argument is present, I want the filtered content but I still also want the summary. This can be quite easily done using a display attachment.

Creating a Fading Image Slideshow in Drupal 5

Published February 6, 2009

I recently had a site that I do volunteer work for ask me if I could create an image slideshow for them on the home page of their Drupal 5.x-powered site. They wanted to showcase various large images on their homepage fading from one to another, as well as be able to control what images were contained in the slideshow. The solution had to be easy to use and maintain as they don't have a dedicated IT person on staff.

Moving the comment form without hacking core

Published September 30, 2008

One of the most frustrating things about Drupal's current architecture is that comments, and the form to post them, are attached to nodes and don't easily allow you to move them around in your TPL files. There really should be an easier way to just place them anywhere you'd like. Most times this doesn't get in your way, until you want to do some fancy layouts where your content is split into multiple columns on the page.

Rebuild your node_comment_statistics table

Published September 29, 2008

If you're like me, most of your projects are redesigns of existing sites. And if the site is already on some kind of CMS, this means importing content from the old system into Drupal, and to make it easy you'll do it with MySQL directly. There are pros and cons about this approach, which I am learning, and one of the cons is that content created by the database may not always get plugged into all of Drupal's various tables. Sure, you got the text into node, node_revisions, can your CCK tables, but there is more than meets the eye.

Import Hundreds of Taxonomy Terms using AWK

Published September 16, 2008

Today's challenge: your editors just handed you almost 200 taxonomy terms to add to the site, and you don't have the time or inclination to hit the taxonomy/n/add/term page for the next 2 hours or so... AWK to the rescue! Doing a simple CSV export of the term_data and term_hierarchy tables, you've got a pretty simple structure: term_data tid,vid,name,description,weight term_hierarchy tid,parent What you'll ultimately generate here is a file that stores everything you need to know about importing these terms via a CSV - the term names, the weights, good IDs, and the TID of the parents. 2048,#the current value of the sequences for term_data term,34,Blogs,#a helper line x,1,Drupal,All about Drupal,-5 x,1,Modules,Ways to extend Drupal,-4 x,1,Themes,Making your install pretty,-3 term,35,News,#a second helper line x,1,International,,0 x,1,Local,,0 x,1,Hyperlocal,,0 In this file, we've got 3 types of data: The starting value for sequences The id of the parent term for the next several rows, starting with the word "term" followed by the TID and the plain English name just to help us get organized The new terms, with an "x" where the new TIDs will be placed, and the VID, Description and Weight all filled out.

Custom GMap Solution for Dynamically Updated Markers (Part 2)

Published August 27, 2008

In my previous post, I talked about how I implemented the dynamic marker system on OffRoadAtlas.com. In this post, I'll cover the functionality that the PdMarker adds to the site. When you first hit the home page of the site, you'll see that the main content area is separated into two main sections: the narrow column to the left of the map (I call this the "info column") and the map itself. The idea behind the info column is that as users click on markers on the map, instead of the standard GMap info window, a very brief summary of

Custom GMap Solution for Dynamically Updated Markers (Part 1) (Drupal 6)

Published August 25, 2008

I recently upgraded OffRoadAtlas.com with a custom map interface based on the GMap module. I was able to do this while leaving the GMap module is virtually un-hacked (with the exception of modifying the "GMAP_API_VERSION" variable) - all of the customizations were made via an additional "helper" module that was written specifically for this site. The site utilizes a map on the home page that shows all the off-roading areas and clubs in the database. The problem I was trying to solve was that I didn't want to have to load all 1,500+ points each time the home page was