Forum Software Reviews

You are complaining about Drupal Forum because topics does not look like REAL topics, like the one you find in major forum softwares? Here is how to make them beautiful.

One of the most problem you encounter with theming and customizing a Drupal forum module is that Drupal considers the first message of a forum topic as a node, and the next answers as comments of this first node.
Therefore, you have to theme both of them, and it requires some slight modifications. Fortunately, Drupal provides easy way to customize specific comments and node of a particular type.

As you probably know, creating files node.tpl.php and comment.tpl.php helps you theming and customizing those two files. But did you know that creating node-forum.tpl.php and a comment-forum.tpl.php will allow you to customize the comments and node related to forum topics only? That's the way we used to theme them only.

1. Here is the snippet of the first file node-forum.tpl.php.

   node-forum.tpl.php

   <div id="node-<?php print $node->nid; ?>" class="comment-forum even node<?php if ($sticky) { print ' sticky'; } ?><?php if (!$status) { print ' node-unpublished'; } ?>">
    
   	<?php include("user-forum-profile.tpl.php") ?>
    
     <h3><a href="#node-<?php echo $node->nid; ?>"><?php print $title; ?></h3>
    
     <div class="submitted">
     <?php 
     	if ($node->new)
     		$post_image = "post-new.png";
     	else
     		$post_image = "post.png";
     ?>
       <a href="#node-<?php echo $node->nid; ?>" title="Post" class='post'><img src="<?php print static_image_path() ?>/<?php print $post_image; ?>" alt="Post" /></a><?php print $submitted ?>
     </div>
    
     <div class="content">
       <?php print $content ?>
       <?php if ($signature): ?>
       <div class="user-signature">
         <?php print $signature ?>
       </div>
       <?php endif; ?>
     </div>
    
     <div style="clear:right"></div>
    
     <div class="go-top">
     	<a href="#main-content" title="Top"><img src="<?php print static_image_path() ?>/forum-top.png" alt="Top" /></a>
     </div>
     <?php print $links; ?>
     <div style="clear:right"></div>
    
   </div>

   Some Remarks:

   • We add the comment-forum and even CSS classes, in order to theme the node like any other forum comment.
   • image_path() is a custom function that returns the right path of your image. You have to write your own. In case you're not able to do it, here is an example:

     <?php
      
     function image_path() {
       return "/sites/default/<mysite>/themes/<mytheme>/images";
     }
      
     ?>

   • The user-forum-profile.tpl.php included will be described in a future article.

2. Now, the second file, which themes the comments, in the content of a forum: comment-forum.tpl.php.

   comment-forum.tpl.php

   <?php
   // $Id: comment.tpl.php,v 1.4.2.1 2008/03/21 21:58:28 goba Exp $
    
   /**
    * @file comment.tpl.php
    * Default theme implementation for comments.
    *
    * Available variables:
    * - $author: Comment author. Can be link or plain text.
    * - $content: Body of the post.
    * - $date: Date and time of posting.
    * - $links: Various operational links.
    * - $new: New comment marker.
    * - $picture: Authors picture.
    * - $signature: Authors signature.
    * - $status: Comment status. Possible values are:
    *   comment-unpublished, comment-published or comment-preview.
    * - $submitted: By line with date and time.
    * - $title: Linked title.
    *
    * These two variables are provided for context.
    * - $comment: Full comment object.
    * - $node: Node object the comments are attached to.
    *
    * @see template_preprocess_comment()
    * @see theme_comment()
    */
   ?>
   <div class="comment-forum<?php print ($comment->new) ? ' comment-new' : ''; print ' '. $status ?> <?php print $zebra; ?>">
   	<?php include("user-forum-profile.tpl.php") ?>
    
     <h3><a href="#<?php echo $comment->cid; ?>">Re: <?php print $node->title ?></a></h3>
    
     <div class="submitted">
     <?php 
     	if ($comment->new)
     		$post_image = "post-new.png";
     	else
     		$post_image = "post.png";
     ?>
       <a href="#<?php echo $comment->cid; ?>" title="Post" class='post'><img src="<?php print image_path() ?>/<?php print $post_image; ?>" alt="Post" /></a><?php print $submitted ?>
     </div>
    
     <div class="content">
       <?php print $content ?>
       <?php if ($signature): ?>
       <div class="user-signature">
         <?php print $signature ?>
       </div>
       <?php endif; ?>
     </div>
    
     <div style="clear:right"></div>
    
     <div class="go-top">
     	<a href="#main-content" title="Top"><img src="<?php print image_path() ?>/forum-top.png" alt="Top" /></a>
     </div>
     <?php print $links; ?>
     <div style="clear:right"></div>
   </div>

   Remarks:

   • The $comment->new status is used to display a different image (like in any major forum softwares) helping the user identifying which are the topics he has not read yet.
   • image_path() is a custom function that returns the right path of your image. You have to write your own (see the snippet at 1/ if needed).
   • The title comment is not used here. We actually replace it by Re: Original Forum Topic Title
   • Note the usage of the $zebra variable, that will automatically alternate odd and even style classes.
   • The user-forum-profile.tpl.php include is discussed later in this article.

3. We also provided the comment-wrapper-forum.tpl.php, useful to put a different CSS identifier in the context of a forum topic.

   comment-wrapper-forum.tpl.php

   <?php
   /**
    * @file comment-wrapper.tpl.php
    * Default theme implementation to wrap comments.
    *
    * Available variables:
    * - $content: All comments for a given page. Also contains sorting controls
    *   and comment forms if the site is configured for it.
    *
    * The following variables are provided for contextual information.
    * - $node: Node object the comments are attached to.
    * The constants below the variables show the possible values and should be
    * used for comparison.
    * - $display_mode
    *   - COMMENT_MODE_FLAT_COLLAPSED
    *   - COMMENT_MODE_FLAT_EXPANDED
    *   - COMMENT_MODE_THREADED_COLLAPSED
    *   - COMMENT_MODE_THREADED_EXPANDED
    * - $display_order
    *   - COMMENT_ORDER_NEWEST_FIRST
    *   - COMMENT_ORDER_OLDEST_FIRST
    * - $comment_controls_state
    *   - COMMENT_CONTROLS_ABOVE
    *   - COMMENT_CONTROLS_BELOW
    *   - COMMENT_CONTROLS_ABOVE_BELOW
    *   - COMMENT_CONTROLS_HIDDEN
    *
    * @see template_preprocess_comment_wrapper()
    * @see theme_comment_wrapper()
    */
   ?>
   <div id="comments">
     <?php print $content; ?>
   </div>

   Nothing very interesting here, apart that we remove the classic Comments title, that is not relevant in case of forum topic comments.

4. Finally, nothing would work without the classical CSS stylesheet we are using here.

   /**
    * Forum Comments
    */ 
    
   .comment-forum {
    margin:                4px 0;
    padding:               7px 12px;
    border-radius:         10px;
    -moz-border-radius:    10px;
    -webkit-border-radius: 10px;
   }
    
   .comment-forum h3 {
    margin:     0 0 2px;
   }
    
   .comment-forum h3 a {
    color:        #105289;
    font-weight:  bold;
   }
    
   .comment-forum h3 a:hover {
    border-bottom:    1px dotted #105289;
   }
    
   .comment-forum .submitted {
    text-align: left;
    font-size:  11px;
    color:      #888;
   }
    
   .comment-forum .submitted a.post {
    border-bottom:    none;
   }
    
   .comment-forum .submitted img {
    vertical-align:   middle;
   }
    
   .comment-forum.odd {
    background-color:  #E1EBF2;
   }
    
   .comment-forum.even {
    background-color:  #ECF3F7;
   }
    
   .comment-forum .go-top a:hover {
    border-bottom:   none; 
   }
    
   .comment-forum .go-top {
    margin:   5px 0 0;
    float:    right; 
   }
    
   .comment-forum .links {
    margin:   5px 0 0 0;
   }
    
   .comment-forum .quote-msg {
    width:    660px; 
   }
    
   .comment-forum .user-signature {
    border-top:    1px solid #eee;
    margin-right:  5px;
    width:    700px; 
   }
    
   .comment-forum .user-signature p {
    margin:   3px 0; 
   }

You made it! Your Drupal forum looks like... a forum! One missing point still, you need a cool User Profile to display on the right of each topics, that's what we will be covered in the following article.