How to display comments in balloons or bubbles

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

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

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

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:

http://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

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

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! 🙂