CMS Quick Start Drupal BlogCMS Quick Start Drupal Blog

Drupal Theme Design Tutorial 1 - Designing Comments & Comment Forms


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:

Before and After

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.

Building Robust Drupal 6 User Profiles with the Content Profile module


Drupal has a great reputation for serving the sphere of [SNS] Social Networking Sites. At the heart of any SNS is a robust user profile experience. Think of Facebook and the rich information that a user can enter about themselves. Over at LinkedIn its somewhat similar in approach but the information is quite different and even used in different ways.

Can Drupal do any of this? [Robust profiles that can serve a variety of purposes]]


Site Launch Checklist - VIDEO


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.

CMS Layers: Add Vibrant Color to Your Drupal Website


CMS LayersBring a touch of flair to your portfolio or blog with a colorful Drupal theme: CMS Layers. Layers gets its name from its use of different colored regions that alternate colors down the page. This makes this theme perfect for those that want to break up and organize long pages that utilize content in every region. This makes Layers great to use for content-heavy blogs, creative portfolio sites (such as full-page single sites), and sites for kids. Bright colors contrast with a dark content background to really make your content stand out. As with all our themes, there are 17 regions that you can use to place all of your content as well as the flexibility of our custom theme settings. Explore what opportunities this theme provides by trying out 6 different color combinations and 7 background colors and styles to find something that fits your style or brand. A ready-to-use featured content area provides for a simple region for your best articles.

Possible uses could include creative portfolio sites, personal blogs, kids sites, and software or technology showcases. CMS Layers can be adapted to fit any use you require.

Drupal Tutorial Video: Spotlight on the Views_Customfield Module


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.

Drupal Tutorial Video: Spotlight on the TOOLBAR Module


If we're honest with ourselves then we know that some clients often have a hard time navigating around the sites that we build for them. I just discovered the TOOLBAR module which REALLY helps out in this arena. Here's my VIDEO and a BLOG POST to get you started.

Find the Project Page here:

Tutorial Video: Spotlighting the Arrange Fields 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.

Drupal Video: Admin Tricks with MODULE FILTER & VERTICAL TABS


You have to agree that Drupal admin screens can be pretty gnarly to interact with. If you want a better looking Modules listing page and if you want a tidier node add and node edit form... Then read on and watch the video at the end.

OK. I Pride myself on being HIPP and knowing about the newest modules and the coolest modules. I can not explain how I missed the MODULE FILTER module.

Viewing useful information from Drupal's report system


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.

CMS Simplicity: A Flexible Lightweight Starter Theme


CMS SimplicityThe power of CMS Simplicity comes with its versatility. This theme is great for those just starting out with Drupal who need a simple, effortless theme to work with. Flat graphics and nice colors pair to make a theme that works well for a variety of tasks. Simplicity's rounded corners and light content areas make an inviting container for your content. As with all our themes, there are 17 regions that you can use to place all of your content as well as the flexibility of our custom theme settings. Explore what opportunities this theme provides by trying out 5 different color combinations and 9 background colors and styles to find something that fits your style or brand. A ready-to-use featured content area provides for a simple region for your best articles.

Possible uses could include corporate sites, official blogs, profile sites, and social media applications. CMS Simplicity can be adapted to fit any use you require.

Need a Custom Designed Theme?

If you need a custom designed theme for your business then our designers can work with you to create a unique concept that is consistent with your brand, clearly communicates your value proposition and helps you achieve your goals. >> Click here to contact us and let us know about your needs and we'll analyze and provide you with an estimate for designing and development your custom theme.