WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] How to display comments in balloons or bubbles (13 posts)

  1. MilkAddict
    Member
    Posted 4 years ago #

    Hi!
    I am using WhiteHouse theme at the moment, and I was wondering how to customize the code in order to change the way comments are displayed.

    As exercise I was thinking to simply move the info about the poster / date / avatar as it is displayed now but below the actual text of the comment and put the text of the comment in a bubble as on this website's posts:

    http://erikhinterbichler.com/2009/04/11/pc-timeline/

    How should I proceed? is it done by modifying the function wp_list_comments to use a callback? if so, I guess I have to add some css to style.css but how to I use a callback to display the comment text box differently?

    Right now in comments.php I have:

    <ol class="commentlist">
    	<?php wp_list_comments(); ?>
    	</ol>

    I hope I was clear enough and someone could help!
    thanks,
    Adriano

  2. Peter Boosten
    Member
    Posted 4 years ago #

    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

  3. MilkAddict
    Member
    Posted 4 years ago #

    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

  4. Peter Boosten
    Member
    Posted 4 years ago #

    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

  5. MilkAddict
    Member
    Posted 4 years ago #

    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

  6. Peter Boosten
    Member
    Posted 4 years ago #

    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

  7. MilkAddict
    Member
    Posted 4 years ago #

    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

  8. MilkAddict
    Member
    Posted 4 years ago #

    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

  9. MilkAddict
    Member
    Posted 4 years ago #

    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

  10. MilkAddict
    Member
    Posted 4 years ago #

    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

  11. MilkAddict
    Member
    Posted 4 years ago #

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

  12. alchymyth
    Forum Moderator
    Posted 4 years ago #

    <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 .

  13. MilkAddict
    Member
    Posted 4 years ago #

    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 :D

    thank you! :)

Topic Closed

This topic has been closed to new replies.

About this Topic