CMS Quick Start Drupal BlogCMS Quick Start Drupal Blog

This is the first of a series of Drupal design and theming tutorials. My goal is to inform you of the elements you need to design for and demonstrate how to make Drupal not look like Drupal.

As a designer that works almost exclusively in Drupal, it can often times be frustrating to get certain site elements to get that refined look to them. I don't consider myself to be a programmer, but often times learning some code snippets is the only way to get the page layout to behave the way you want. Thus, a careful balance of theming (HTML & CSS) and development (PHP) is often required to get that really unique look that sets your site apart. That's what this series of posts is all about. How do we take a Drupal installation and make it not look like Drupal? We'll be reviewing Drupal elements on a case by case basis. Today's Topic: Comments and Comment Forms.

First, just a quick note about these posts. There are many tutorials and documentation pages regarding Drupal theming, so these studies are not going to be ground-up discussions of theming basics. Drupal theming is not easy! Without a basic understanding of the Drupal Core system you are going to become hopelessly lost. These studies are meant for people that are familiar with Drupal already.  If you need more detailed descriptions of what theming is all about, please check out these resources:

- Drupal Theming Guide
- Drupal 6 Themes

Designing and Theming Drupal Comments and Comment Forms

Let's take a comparison shot of a default Drupal implementation of comments and see what we'll be working towards:

As you can see there's a lot of work to be done. Drupal's default styling tends to be "everything in a big long list." We can save a lot of space and clarify the elements a bit by moving some elements inline and getting rid of unnecessary text.

Ok let's begin. Our strategy will be to first tackle any TPL files, followed by adding functions to template.php, and lastly polishing with CSS. Let's look a the specific features we will be adding. CAPTCHA is non-standard. You can use either the CAPTCHA module if you want ultimate control over styling, but reCAPTCHA is a good choice as well. We'll also want to add a special flag for posts created by the site admin. We'll be hiding some fields in the comment form and then restyling everything else.

It's takes a lot of effort to build a Drupal site and if you're not careful you might think you're job is done once you publish the site for the world to see. There are more than a couple good lists out there that are full of recommendations as to what you should do at the time of launch. I had noticed that a few things were missing on these lists so I have formulated my own.

This is one of my GEEKY-est videos yet! The Views CustomField module adds three new, optional fields in the FIELDS section of the VIEWS UI. The uses for these three fields are endless but I'm going to explain how I've used it and give you some sense of the power of this module.

The Arrange Fields module allows you to use a Javascript enabled GUI to rearrange the fields of any form. This could be done with the CCK manage fields screen but that only allows reordering across the vertical plane. With this module you get a huge grid upon which you can place fields across the X and Y axis.
Another cool feature is the ADD MARKUP button which allows you to add text or valid HTML markup into the layout. I've played around with it and it's real nice for adding extra HELPER text or even Horizontal Rules <hr> to your layout.

If you've never used it before, then you haven't been enjoying the realtime data available from Drupal's built-in report system. Users of the Admin_Menu can simply mouseover the REPORTS section and see a list of reports that you can view. Personally I use it frequently and find it to be rather handy. In this video I cover a few of the things I do with it as well as cover a few contributed modules that add to the functionality.