Customized Features from our Redesign

As a follow up to the previous post talking about our (re)branding process, we wanted to share with you some of the details of the new theme for our site, as well as a few configuration changes, and what we learned.

960 Grid-based Theme

In an earlier post, our theme lead Alberto talked a bit about CSS Frameworks, including the 960 Grid System, which is compatible with Drupal's Zen framework. Those are two of the main tools in his theming toolkit, so we made sure to get a theme designed that would comply with using the grid system. Alberto then took the layout CSS file from the 960 Framework and substituted that for the layout CSS file in Zen, but otherwise used all the other Zen files.

If you want the designer you're working with to create a grid-based design, there are templates and instructions available on the 960 Grid website. Using this method provides a flexible framework for laying out all of the elements on your site, and for adding new features in the future.

Featured Client Viewer (on Homepage)

We wanted to have a nicer way to feature our clients and the projects we've worked on with them. The first phase of this (second phase coming in future improvements) was to improve our Featured Clients block. We used to have a static block that displayed a random client on every page load. The new version on our homepage uses jQuery and Views Carrousel to create a display of all of our clients, which can be scrolled through smoothly using the orange arrows on each side to view all of our clients without having to reload the page. The client entries load randomly each time so there is a different initial client featured.

Alberto initially attempted to build this using Views and AJAX so that it wouldn't be necessary to preload all of the clients (as this could slow down the homepage's load time as we add more clients to our portfolio), but it turned out that it was not possible to use AJAX with Views, so he had to go back to using jQuery with Views Carrousel, and after a little tinkering this solution proved to have a nice completed effect.

Posts by Author Block

A small improvement we made was configuring a block to display all posts by the author of the current blog post (and it also shows on the individual team profile pages). This is both easy to do (ie. it's all configuration) and complicated (the configuration is in the unseen depths of the Views arguments options).

Better Contact Form (using Features and Rules)

The default contact form provided by Drupal is okay, and serves the basic needs of a contact form, ie. it allows site visitors to email an admin without having the admin's email publicly listed. But it lacks a couple of features we wanted, namely:

• For the submissions to be saved as content on the site, where they can be accessed and reviewed by any team member, then archived.
• To be able to easily set up other form behaviours as desired.
• To be able to track the submission as it is dealt with (see screenshot at right).
• To create a reusable better contact form that we can use on our clients' sites in the future using Features.

To achieve this, we configured a new content type, with the typical fields you would see on a contact form plus a field for admin notes and tracking the status of whether it has been responded to (all using CCK, with it's Content Permissions module to control which fields are visible to anonymous users).

Next, we added a view that provides a basic moderation queue for the contact form submissions. We then set all the appropriate permissions to allow team members to access the content type, etc., and disabled the default Contact module to free up the /contact path (which is used by the module). Finally, we added a new URL alias from /node/add/contact-form to /contact, then rolled all of that into a Feature. (For more instructions on how to use Features, read our Features Abridged post.)

The only thing that is not included in the feature is the form behaviours that are set up using the Rules module (as Rules is not yet supported by Features). So once these steps are done, or your feature is installed, you have to set up a few rules to complete the Better Contact Form's functionality. The behaviour we were looking for required three actions to be configured based on the action of creating a new Contact Form submission.

1. Set up a page redirect back to the homepage.
2. Set a message that shows on the homepage when a user is redirected, that thanks them for their message (so they know it has been sent).
3. Set an email notification to be sent to whoever is managing responses, in our case, the email contains a link to the moderation queue.

It's very basic at this point, but is meeting our needs far better than the default contact module. The one final touch is that since it is a node add form, if you want the page title and breadcrumb to be more graceful and not show this, there is a tiny bit of custom theming required.

Overall

These changes might seem small, but we believe they've gone a long way in creating a more graceful user interface, a more maintainable theme, and a more functional contact form. We hope they provide a few useful examples of how a few simple improvements and customizations can bring your Drupal site to the next level.