Matt's blogMatt's blog

Drupal Theme Design Tutorial 1 - Designing Comments & Comment Forms

Categories:

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.

CMS Layers: Add Vibrant Color to Your Drupal Website

Categories:

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.

CMS Simplicity: A Flexible Lightweight Starter Theme

Categories:

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.

CMS Visibility: A Versatile Business or Blog Theme

Categories:

CMS VisibilityCMS Visibility pleases the crowd with a great clean look that users love. A striking colored content area shares the space with the navigation and header and contrasts the rest of the page. Simple color schemes help produce a wide array of customization and choices, all maintaining a versatile look and feel that fits any requirements. 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 6 background colors to find something that fits your style or brand. Use the featured area on the front page or a variety of pages to create an attractive stage for your best content.

Possible uses could include corporate sites, products or services, creative services, product display, technical or corporate blogs, and portfolios. CMS Visibility provides a great web presence for any need and the added benefit of an excellent content management system.

CMS Wave: A Colorful Theme for Blogs and Children Sites

Categories:

CMS WaveCMS Wave is a fun, colorful theme for use in personal blogs or children sites. Bright colors, graphics, and block styles all serve to attract and hold your user's attention without distracting from 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 different color combinations and background colors to find something that fits your style or brand. Whatever combinations you choose, be assured that you will have a playful, attractive design in your hands.

Possible uses could include personal or family blogs, kids products or services, creative services, product display, and portfolios. CMS Wave is waiting and ready to bring attention to your content today.

CMS Breeze: A Clean Theme for Business Blogs

Categories:

CMS BreezeCMS Breeze is a great theme for sites like business blogs and many other general purpose site types. Give it a try for your business site or formal blog. 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. There are a few elements that make Breeze stand out in the crowd, including soft transparent background effects, subtle accenting colors, and full colored backgrounds in your choice of colors. Dates are displayed in a calendar-style box on your posts and content is separated in clearly defined boxes.

Possible uses could include product display or reviews, formal blogs, various business applications, and online services. Careful attention to content display, Clean and elegant lines and backgrounds, and a contrasting featured content area make this theme perfectly suited to any application.

CMS Gourmet: An Elegant Theme for Restaurants and Wineries

Categories:

CMS GourmetCMS Gourmet is a brand new theme that fulfills a nice range of elegant site types. Gourmet works really well for restaurants, wineries, and other sites that are in the food industry. It could also work for many other categories such as weddings or other formal events. 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. We tried to provide a rich, luxurious tone for your content and included various subtle details to engage and add value for your viewers. A light, textured main content area will really stand out against the wood and dark grained backgrounds provided with this theme.

Possible uses could include fine dining and spirits, weddings and special occasions, and locale or event hosting. With specially-crafted typographic elements, textures, and icons, CMS Gourmet provides a great space with which to fill your content and messages.

CMS Energize: A Bold New Versatile Drupal Theme

Categories:

CMS EnergizeCMS Energize is a bold Drupal theme that really stands out in the crowd, great for making your best content pop. 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. Clearly defined region separations and distinct color combinations allow you to space and organize things how you want.

Possible uses could include fun sites, business applications, community portals, and blogs. The versatility of Energize really comes into play when you look at the vast array of customization options. This is our first theme to feature 3 separate color selectors. Whatever the application, have a look at CMS Energize today.

CMS City Guide: Drupal Theme for City or Community Portals

Categories:

CMS CityguideCMS City Guide is a clear, structured Drupal theme aimed at groups and organizations who want to make an online portal for there city or town. 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. Clearly marked blocks and strong typography help complete the look by ensuring content is well marked and asscessible.

Possible uses could include city or town government websites, large or small organizations, community portals, and event websites. If you need a Drupal site that can showcase your local events or keep citizens up to date on the latest news, impress them with a great new look for your site with CMS City Guide.

CMS Flare: Drupal Theme for a Software or Technology Business

Categories:

CMS FlareCMS Flare is a sleek theme aimed at blogs, businesses, and organizations who need a clean, contrasting look to their site. 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. Several block themes are also included to help complete the look.

Possible uses could include tech or company blogs, product display, portfolios, or software / service industries. Whether you are looking for a hi-tech theme or a pixel-perfect way to show off your product, CMS Flare is a solid choice.

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.