Theming comments with phptemplate

How did I style comments and how did I use rounded corners using CSS Speech Bubbles from willmayo.com in my theme without hacking any other modules...

Adding wrapper

First, I created a new function in my template.php -> phptemplate_comment_wrapper which as it's written in Drupal's API allow themeable wrapping of all comments.

My function looks like this:

<?php
function phptemplate_comment_wrapper($content, $type = null) {
  static
$node_type;
  if (isset(
$type)) $node_type = $type;

  if (!

$content || $node_type == 'forum') {
    return
'<div id="comments">'. $content . '</div>';
  }
  else {
    return
'<div id="comments"><img src="'.base_path().path_to_theme().'/images/comments.gif" alt="comments" class="comments-icon" /><h2 class="comments-h2">'. t('Comments') .'</h2>'. $content .'</div>';
  }
}
?>

The result will be as shown here:
themed-comments-separator

I added that little bubble image, but better you can use css to add an image to h2 tag.

Also you can use this function to add your own separator and then using php strip $content variable into two parts (node content and comments) and then display comments anywhere else.

Rounded corners

Using CSS Speech Bubbles I achieved nice looking comments. :) First, you will have to download CSS Speech Bubbles here. Unpack it and copy it under your theme directory. For example /sites/all/themes/yourtheme/roundedcorners. Now you will have to tell drupal to load css and js from that directory. You should add those lines straight to your page.tpl.php inside 'head' tag.

<style type="text/css" media="all">@import "<?php print base_path() . path_to_theme() ?>/roundedcorners/bubbles.css";</style>
<script type="text/javascript" src="<?php print base_path() . path_to_theme() ?>/roundedcorners/rounded_corners.inc.js"></script>

So now, we are including stylesheet and javascript code. But few lines of code left:

Add these lines again inside your 'head' tag in page.tpl.php file.

<script type="text/JavaScript">
  window.onload = function() {
    settings = {
      tl: { radius: 10 },
      tr: { radius: 10 },
      bl: { radius: 10 },
      br: { radius: 10 },
      antiAlias: true,
      autoPad: true
    }
    var myBoxObject = new curvyCorners(settings, "rounded");
    myBoxObject.applyCornersToAll();
  }
</script>

Or you can include this code in another js file.

The last thing we have to do, is add few divs to our comment.tpl.php file (originaly for my theme I've used comment.tpl.php file from default drupal theme garland). If your theme doesn't have one, you can copy my file, it's listed at the end of this article.

You can change colors of your comments or choose different style (as shown on example page of CSS Speech Bubbles).

Files




Need Drupal Theming? Hire us