Theming comments form in drupal 6

Theming consists mainly in customizing markup and css; the second is fairly straightforward and can be achieved with the use of firebug, a firefox extension that allows to make changes to styles on the fly. Tweaking markup though is more complex and requires good knowledge of drupal´s template system. Devel module offers great help when it comes to identifying what template is being called for different parts of the page.

The HTML code that makes up each page in a drupal site is compiled from the output of various Drupal modules. If the default HTML markup supplied by any module does not suit our requirements, we can override some or all of it, so that the resulting page is exactly what we need for your design. For example, I decided that my site was displaying a quite poor “Leave a reply” text, and I wanted a more exciting “Tell us what do you think!” to invite users to post their comments. Further modifications could be the use of images, or unordered list to display some instructions, etc. Its very important to understand the concept of “overriding”. While it is technically possible to just find the module responsible for the comments form fields and edit the code directly, this is definitely not recommended. In the short term, it will seem to solve your problem, but it will soon make it difficult to keep your site up to date. Whenever you update the module, perhaps for a general security release, you would need to remember to redo any of your customizations.

The “Drupal Way” is to do an override. This involves four basic steps:

1-Locate the module responsible for the markup

2-If the module provides a template (tpl.php file), copy the template to our theme directory.

3-Within the copied function or template, change the HTML code to suit our needs.

4-Refresh the theme cache.

So in my case I wanted to modify the markup and look of the comments form for users who want to leave a comment to existing content. Having devel activated, it tells me that templates called are node.tpl.php for the existing content published on the page, and comment-wrapper.tpl.php below it for the comments area. Further exploration reveals that comment-wrapper.tpl.php calls box.tpl.php template. Comment-wrapper.tpl.php file´s location is in root>modules>comment , so I copied the file and pasted it inside my theme´s folder (in my case root>sites>all>themes>myzen). I opened and inspected the file, and in line 37 found a php function that prints the text “Comments”, surrounded by <h2> tags that I switched to <h3> for the title, so that the hierarchy of the page is <h1> for the node title, <h2> for the “Comments” title, and <h3> for the “Tell us what do you think!” This was achieved by opening the box.tpl.php (this template file is provided by default inside the zen theme but will be removed in drupal 7, read more on: http://www.slideshare.net/ccharlton/changes-to-drupal-themes-in-version-7-part-1), and on line 19 changing the <h2> tags to <h3>, as well as changing the text to print by having:

<?php print ‘Tell us what do you think!’; ?>

I also added an image with the shape of a bubble, which is loaded from line 17 in the box.tpl.php file.

Advertisements

Posted on April 4, 2010, in Uncategorized. Bookmark the permalink. Leave a comment.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: