How to display comments in balloons or bubbles

The comment is embedded in 4 div tags (in the example you point to <b /> tags are being used), all those tags have a corner image assigned to it.

It’s a common way to create a rounded box. Underneath an additional image is added to form the point.

It’s not that hard, but you need some xhtml- and css knowledge for it.

A ’rounded box’ tutorial can be found here.

Peter

Hi Peter,
thanks ?? I also have some tutorials about how to create rounded box. I am not sure though where do I have to add the html in the WordPress code.. if i.e. modifying the function wp_list_comments to use a callback (and how to create a callback for this kind of thing) or where else?

I found an example about callback here but it’s to hide pings etc. and display only pure comments.

adriano

Yes, definitely in functions.php.

If you take the example of the codex:

// some code

<div class="tl"></div>
  <div class="tr"></div>
    <div class="commentbody>
      <?php comment_text() ?>
    </div>
  <div class="bl"></div>
<div class="br"></div>

// some more code

Peter

Thanks ??
I tested this but it doesn’t change the way my comments are displayed even though from the html source of the page I can see that all the html tags are there.

I actually used this in the callback function (the one from the codex link above), and I placed in functions.php:

...
<div class="commenttext>
   <b class="tl"><b class="tr"></b></b>

      <?php comment_text() ?>

  <b class="bl"></b>
  <b class="br"><b class="point"></b></b>
</div>
...

as example of css to use to change the layout I took the part of css from the blog I mentioned above, that is in this case:

/* Speech bubbles */
.commenttext {width:500px; height:auto; }
b.tl {display:block; width:500px; height:11px; font-size:1px;}
b.tr {display:block; width:489px; height:11px; font-size:1px; float:left; margin-left: 11px;}
b.bl {display:block; width:11px; height:11px; font-size:1px; float:left;}
b.br {display:block; width:489px; height:11px; font-size:1px; float:right; position:relative;}
b.point {display:block; font-size:1px; width:25px; height:18px;}
/* .commenttext p {padding:8px; margin:0; border:3px solid #fff; border-width:0 3px; text-align:justify;} */

div.commenttext b.tl {background:url(images/bubbles/b_tl2.png) top left no-repeat;}
div.commenttext b.tr {background:url(images/bubbles/b_tr2.png) top right no-repeat;}
div.commenttext p {background:#ecc7c7;}
div.commenttext b.bl {background:url(images/bubbles/b_bl2.png) top left no-repeat;}
div.commenttext b.br {background:url(images/bubbles/b_br2.png) top right no-repeat;}
div.commenttext b.point {background:url(images/bubbles/b_point2.png) top left no-repeat; margin:7px 0 0 15px;}

div.commenttext p {
    padding:4px 16px;
    margin:0;
    border:none;
    background: url(images/bubbles/b_bg2.png);
    color: #141414;
}

.commentlist li.author  div.commenttext b.tl {background:url(images/bubbles/b_tl3.png) top left no-repeat;}
.commentlist li.author div.commenttext b.tr {background:url(images/bubbles/b_tr3.png) top right no-repeat;}

.commentlist li.author div.commenttext b.bl {background:url(images/bubbles/b_bl3.png) top left no-repeat;}
.commentlist li.author div.commenttext b.br {background:url(images/bubbles/b_br3.png) top right no-repeat;}
.commentlist li.author div.commenttext b.point {background:url(images/bubbles/b_point3.png) top left no-repeat; }

.commentlist li.author div.commenttext p {
    background: url(images/bubbles/b_bg3.png);
}

.commentbottom {
    padding-top: 15px;
}

As you can see from my blog page here nothing changes for the comments even though the tags I added are in the html source code ??

Also the images for the bubbles are places in the right folder that is THIS for example

Do you know what could be going wrong?
thanks,
adri

Sorry for the delay in answering, but I suppose you followed the codex in that you need to change the way you call wp_list_comments()?

<ul class="commentlist">
  <?php wp_list_comments('type=comment&callback=mytheme_comment'); ?>
</ul>

Peter

Hi again!
and thanks for your answer!
It’s a bit weird because I just noticed that if I try to edit the theme (i.e. when I try to change the comments.php or myfunctions.php), I click “Update File” but the editor takes my to my blog’s homepage, without actually editing the file. I tried with Safari and Firefox.

I am not sure if it was happening also last time I tried.. I would swear that the last time I have checked at least two times the same .php file and the code I had added was there the second time.. but I could be wrong.

Did you ever hear about this problem? O_o

Adri

Ahh I found out why I cannot edit themes anymore, after searching on the forum, it appears to be WordPress Firewall plugin ??
I now deactivated it and I am going to try again soon!
adri

Still doesn’t work ??
Here is what I did again:

1. I added the CSS code above (Speech bubbles) into style.css

2. I added the following function to functions.php:

function baloon_comment($comment, $args, $depth) {
   $GLOBALS['comment'] = $comment; ?>
   <li <?php comment_class(); ?> id="li-comment-<?php comment_ID() ?>">
     <div id="comment-<?php comment_ID(); ?>">
      <div class="comment-author vcard">
         <?php echo get_avatar($comment,$size='48',$default='<path_to_url>' ); ?>

         <?php printf(__('<cite class="fn">%s</cite> <span class="says">says:</span>'), get_comment_author_link()) ?>
      </div>
      <?php if ($comment->comment_approved == '0') : ?>
         <em><?php _e('Your comment is awaiting moderation.') ?></em>
         <br />
      <?php endif; ?>

      <div class="comment-meta commentmetadata"><a href="<?php echo htmlspecialchars( get_comment_link( $comment->comment_ID ) ) ?>"><?php printf(__('%1$s at %2$s'), get_comment_date(),  get_comment_time()) ?></a><?php edit_comment_link(__('(Edit)'),'  ','') ?></div>

<div class="commenttext>
   <b class="tl"><b class="tr"></b></b>

      <?php comment_text() ?>

  <b class="bl"></b>
  <b class="br"><b class="point"></b></b>
</div>

      <div class="reply">
         <?php comment_reply_link(array_merge( $args, array('depth' => $depth, 'max_depth' => $args['max_depth']))) ?>
      </div>
     </div>
<?php
        }

3. I call the previous function from comments.php:

<ol class="commentlist">
        <?php wp_list_comments('type=comment&callback=baloon_comment'); ?>
<!--     <?php wp_list_comments(); ?>  -->
     </ol>

RESULTS

No baloons displayed. I can even see the correct code displayed for comments on my website:

<div class="commenttext> <b class="tl"><b class="tr"></b></b>
<p>Thanks for sharing the button; I am planning to use it in my site.</p>
<b class="bl"></b> <b class="br"><b class="point"></b></b> </div>

and the images have been uploaded into the folder image/bubbles as required by the CSS, for example:

https://www.milkaddict.com/wp-content/themes/whitehouse/images/bubbles/b_bg2.png

Do you have any idea why it still doesn’t display the baloons?
Hopefully we are close this time!
thanksss
adri

I investigated a bit further and I think the key is in the “comment_class” function that is called by my “baloon_comment” callback function.

I would need to know how to use my CSS “commenttext” class (to format the comment) with “comment_class”. I tried everything I could think of but every time my website was going offline because there was some error in the way I was coding this:

function baloon_comment($comment, $args, $depth) {
   $GLOBALS['comment'] = $comment; ?>

   <li <?php comment_class(); ?> id="li-comment-<?php comment_ID() ?>">

<div class="commenttext>
   <b class="tl"><b class="tr"></b></b>

//SOME CODE to load Avatar, date, time, edit link, comment content and reply button

  <b class="bl"></b>
  <b class="br"><b class="point"></b></b>
</div>

     </div>
<?php
        }

I give up trying for today.. it’s almost midnight and I am too tired ??
I hope someone can help to explain how to use this function :-/
thanks
adri

Does anyone have any idea about how to solve this? ??

<div class="commenttext>
   <b class="tl"><b class="tr"></b></b>

the closing ” after commenttext is missing ??

PS: get the developer add-on for firefox or the firebug – great tools to debug any html code .

Oh my!
*digs hole in the ground and hide is head in*

thanks! stupiad typo mistake that now is fixed and solved the issue! :)) I should have indeed checked the page with the validator before bothering.. I just thought I had done something stupid in the way I was using the function ??

thank you! ??