I have run across situations where I have needed to override the table on the checkout page of ubercart. An example is bilingual e-commerce site that I have created, in which the title is different between languages. The English title is shown by default on the checkout page, but I needed to swap that in with a Japanese title.

Doing this is a tricky process, as Ubercart bypasses a lot of Drupal APIs. I eventually figured out how to do this in a module, by overriding the cart pane theme using hook_theme_registry_alter(), and swapping out the theme function with a theme function in my own module.

In this example, my module is named belly.

Step 1: Override the default theme function using hook_theme_registry_alter()

function belly_theme_registry_alter(&$themes)
{
	$themes['cart_review_table']['function'] = 'belly_cart_review_table';
}

I regularly search the Drupal API for code. Anyone using Drupal does this. I previously used a Firefox add-on called 'add to search bar' that allowed any search on pretty much any page on the web to be added to the firefox browser toolbar.

However, bukem has created two addons that create this functionality, and do it well. Add to search bar, while it worked, never worked the first time, and had no autocomplete. The two search engines bukem has created both work every time, and also have autocomplete, just to make things a little easier.

Intro

Theming forms in Drupal 7 is mostly the same as Drupal 6, however there are some changes in how things are done in Drupal 7, and we will be exploring those changes in this tutorial. We will be working within a module called 'form_theme', and will create a form that looks like this:

My name is [FORM INPUT] [FORM INPUT] and I am [FORM INPUT] years old

The form inputs will initially display the words 'First name', 'Last name' and 'Age', which will then be removed when the user clicks on the input, and added again if the user clicks outside the input without entering a value.

What we will be covering in this tutorial:

• Themeing a form
• Attaching jQuery (JavaScript) to the form
• Attaching CSS to the form

As the main goal of this tutorial is to show how to theme forms, I will not be going in depth into some of the other code that is not relevant to themeing. As such, to understand this tutorial, you will need an understanding of the following:

• How to create a module in Drupal 7
• How to create a form in Drupal using drupal_get_form()

This tutorial is for Drupal 7. The Drupal 6 tutorial is here: Themeing Drupal 6 forms into tables with checkboxes

Introduction

Turning forms into a table of information, such as can be seen on the users administration page (admin/people) or the content administration page (admin/content) is a much easier process in Drupal 7 than it was in Drupal 6. In Drupal 6 it required some tricky logic, combined with a theme function. Drupal 7 removes the need for most of that.

In this tutorial, I will be putting together a nice little table that looks like the following:

| ❏ | First Name | Last Name

------------------------------

| ❏ | Indiana    | Jones

| ❏ | Darth      | Vader

| ❏ | Super      | Man

In Drupal 6, I've at times in the past needed to fire off a function after an AHAH callback. The problem here is that AHAH is a pre-built set of functions by Drupal, and as far as I can tell, the only function it executes after completion is Drupal.behaviors. However, I personally don't see anything in the Drupal object to differentiate whether Drupal.behaviors is being fired on initial page load, or after an AHAH event. jQuery to the rescue! jQuery offers a nice little .ajaxComplete() function that is fired off after every Ajax event. We can use this function to fire off whatever other function we want when AHAH is complete.

Sometimes we want to highlight table columns when they are hovered over. Table rows are easy - it's as simple as adding tr:hover{background:red;} to your CSS. This will cause all table cells in a row to be red when the row is hovered over. However, columns are not as easy. The main reason behind this is that HTML tables are grouped by row, not by column. This means that while it is easy to select a group of table cells as a row (using tr in your CSS, or targeting tr tags in your javascript), it is not as easy to group table cells by columns.

You may think that you can use the html colgroup and col tags, but alas, such is not the case. They will allow for grouping elements by columns. However, these tags are deceptive. While they do allow for some limited styling of columns, they are not actually parents of the td tags that are in the column, and do not respond to the :hover attribute in CSS, nor do they trigger the javascript onmouseover event. Now, if this last statement didn't make sense to you, don't worry, it's not really important. What it is important is that you understand that it takes javascript to be able to highlight an HTML table column. And that is what this tutorial is going to show. It's possible to do this using pure javascript, but I'm a jQuery guy, so I will be showing my jQuery method of doing this.

This tutorial is for Drupal 6. The Drupal 7 tutorial is here: Themeing Drupal 7 forms into tables with checkboxes or radios.

Turning forms into a table of information, such as can be seen on the users administration page (admin/user/user) or the content administration page (admin/content/node) is not the easiest process in Drupal 6. Even looking at the code that is used to create these pages, it can be hard to see what exactly is going on. So lets take a look at how to do this.

First, let's look at our final goal. Drupal comes bundled with a nice little function for creating tables, theme_table(). This function requires two arguments: $header, an array containing the header cell elements of the table, and $rows, and array containing all the data (cells) of the table. $rows is actually a multi-dimensional array, with the top level being the rows, then and the next level being the cells of the row.

Our goal is to build these arrays. In this tutorial, I will be putting together a nice little table that looks like the following:

| ❏ | First Name | Last Name

------------------------------

| ❏ | Indiana    | Jones

| ❏ | Darth      | Vader

| ❏ | Super      | Man

In the past year, I have started using SVN to deploy my Drupal installations. In the following post I will discuss my own personal SVN deployment strategy. This strategy allows me to work locally on a WAMP installation, and use SVN to deploy my sites to their remote installations.

Disclaimer: By no means am I claiming this is the only way, or the best way to use SVN in conjunction with Drupal. But, it is a method that works well for me, and I thought I would share it with others. If anyone has any comments on how they deploy Drupal themselves, or possible ways I could improve my own deployment strategy, I would love to hear them.

I work on a number of different Drupal installations. I maintain my own site, as well as a number of client sites. In deciding my deployment strategy, I considered the following points:

• Drupal will be the same across all installations
• The modules and themes (for the most part) will be different in each installation.
• I don't want to use SVN for the sites/default/files folder, as the contents of this folder are generally user generated, and should be backed up using other methods
• I need a way to deploy database backups and keep them for future reference
• There are some situations where I have altered Drupal core. Most people think that this is an absolute no-no, but rather, the rule of thumb should be 'Don't alter Drupal core unless you know what you are doing'

I've recently created a new module for Drupal's Ubercart e-commerce solution that required me to add a new line item to the checkout process. It was a huge headache, as the documentation is incomplete, and there are no clear explanations/tutorials on how to do this process from start to finish. So I have decided to post the process here for three reasons:

1. To save others from having to go through the same process of having to figure it all out like I did
2. To save the process in a central area so that I can refer back to it myself!
3. To get feedback on parts of the process I've done incorrectly, or to add parts that I may have missed

I like to use the CSS Sprites technique on my sites, as it cuts down HTTP requests. However, it can sometimes be tricky to figure out how to put together an irregular shape in order to be able to use the method. An example is a site I was recently developing that used a 'speech bubble' like this:

I needed to make the speech bubble expandable in height to allow for different unknown amounts of text. So using the image as-is doesn't work. Of course the easy way is to slice the image into three pieces.