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.