Drupal Tip #9: Theme Forum Topics

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.

Drupal Forum Topic

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.

Keywords:
Comments are closed.

Comments (14)

Does this apply to Drupal 7

Does this apply to Drupal 7 or Drupal 6?
Thanks!

Top
lastnico's picture

It has been tested and

It has been tested and developed for Drupal 6, so you may have to adjust some little things in order to make it work. Anyway, once we will migrate to Drupal 7, I'll reupdate these tutorials.

FSR Admin - Vote for 2012.

Top

cant get the

cant get the comment-forum.tpl.php to work in drupal 7...

have also tried comment--forum.tpl.php which seems to be the drupal 7 way of overiding templates.

any ideas...

Top
lastnico's picture

Unfortunately, I haven't

Unfortunately, I haven't touch yet Drupal 7, and even if I saw that, as you say, you need to use double dash for several template filenames, I'm not sure it's the same for the file comment-forum.tpl.php

The doc is not clear about this:
http://api.drupal.org/api/drupal/modules--comment--comment.tpl.php

FSR Admin - Vote for 2012.

Top

Hope you don't mind my

Hope you don't mind my spamming a link, but I've just finished a mammoth article on the subject of building Drupal forums (and getting off vBulletin). It's linked to this article for anyone interested in further reading, particularly since I didn't go into theming in any detail.

It's really good to see some other sites working on/writing about Drupal forums! Smile

Top

Hi thanks for the tutorial. I

Hi thanks for the tutorial. I couldn't get it to work in D6.

Do you just put the node-forum.tpl.php into the /sites/all/themes/[mytheme]/ folder?
And then also save the .css as any filename.css and put into the same folder?

I am not getting any thing to change.

Thanks super much for any advice!

Top
lastnico's picture

Yes for the PHP template

Yes for the PHP template file, but the CSS content has to be appended to your current theme CSS. By the way, do not forget to Flush all caches to take your new theme file into account.

FSR Admin - Vote for 2012.

Top

As said by Dingy, I too not

As said by Dingy, I too not getting any thing to change in the forum after I added node-forum.tpl.php, comment-forum.tpl.php, comment-wrapper-forum.tpl.php and added forum css styles to the .css file. Hope you will clarify what to add in PHP template file so that the forum get beautiful as said by you.

Top
lastnico's picture

Hi, Did you do a Clear all

Hi,

Did you do a Clear all data from the Performance menu of your Drupal?

FSR Admin - Vote for 2012.

Top

Thank you .. I benefited a

Thank you .. I benefited a lot from this thread

Top

Thanks a lot, it is really

Thanks a lot, it is really useful to me.

Top

You dont seem to have the

You dont seem to have the intention to update this tutorial for D7 ?

Top
lastnico's picture

Well, even if I'm migrating

Well, even if I'm migrating the source base to Drupal 7... No plans yet to update this tutorial. Note however that there are not many changes in the Forum modules of Drupal 7.

FSR Admin - Vote for 2012.

Top

hi, any idea when you are

hi, any idea when you are going to migrate to drupal 7? i LOVE the look of your forum, but unfortunately many of the tips you have posted here is not working for d7.

Top
  Top Top