WordPress.org

Ready to get started?Download WordPress

Forums

Trying to separate avatar from text in another box (10 posts)

  1. baal666
    Member
    Posted 4 years ago #

    Hi,

    I am trying to do something like this:

    http://www.wprecipes.com/how-to-add-a-share-on-facebook-link-to-your-wordpress-blog

    Any idea how to actually do this stuff? I'm having a hard time figuring how to put one box into the other as all I have as a code for the comments is this: <?php wp_list_comments(array('avatar_size'=>80)); ?

    Thanks a lot!

  2. baal666
    Member
    Posted 4 years ago #

    Ok, my question is not clear.

    What I want to do is:

    1) Put the image, the name of the person and the date OUTSIDE of the text box;

    2) Put the text in a text box.

    Any idea?

    I'm looking at comment-template.php and I don't see what can be done.

  3. esmi
    Forum Moderator
    Posted 4 years ago #

    The site you referenced either doesn't use wp_list_comments or uses a custom callback function to achieve that comment display:

    http://codex.wordpress.org/Template_Tags/wp_list_comments#Comments_Only_With_A_Custom_Comment_Display

  4. baal666
    Member
    Posted 4 years ago #

    Yes, I know... But how can it be done?

  5. esmi
    Forum Moderator
    Posted 4 years ago #

    By coding a custom callback function that provides the markup that you want, then styling that markup with CSS.

  6. baal666
    Member
    Posted 4 years ago #

    I am trying really hard... it is not working at all. http://jeveuxsavoir.net/baba/?p=1

    Strangely enough, IE makes it better than FF... Must be because I am really bad with this.

  7. baal666
    Member
    Posted 4 years ago #

    See next comment.

  8. baal666
    Member
    Posted 4 years ago #

    Ok, here is my code in comments.php

    <div class="box post-comments">
    				<div class="content1">
    
    <h3 id="comments"><?php comments_number('Aucun commentaire', 'Un commentaire', '% commentaires' );?> &agrave; propos de &laquo;
    <?php the_title(); ?>&raquo;</h3>  
    
    <ol class="commentlist"><?php wp_list_comments(array('avatar_size'=>80)); ?></ol>  
    
    </div></div>

    And here is my CSS:

    ol.commentlist{list-style:none;margin:0;padding:0;text-indent:0}
    ol.commentlist li{border:1px solid #d5d5d5;border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;margin:0 0 10px;padding:5px 7px 5px 57px;position:relative;height:1%}
    ol.commentlist li div.vcard{font:700 14px/1.4 helvetica,arial,sans-serif; margin-left:-50px; margin-top:100px;}
    ol.commentlist li div.vcard cite.fn{font-style:normal}
    ol.commentlist li div.vcard cite.fn a.url{color:#8796ab;text-decoration:none}
    ol.commentlist li div.vcard cite.fn a.url:hover{color:#fecc38;text-decoration:underline}
    ol.commentlist li div.vcard img.avatar{border:1px solid #8796ab;left:7px;position:absolute;top:7px}
    ol.commentlist li div.comment-meta{font:700 6px/1.4 helvetica,arial,sans-serif;right:10px;top:5px;margin-left:-50px;}
    ol.commentlist li div.comment-meta a{color:#333;text-decoration:none}
    ol.commentlist li div.comment-meta a:hover{color:#000}
    ol.commentlist li p{font-size:13px;margin:0 0 1em;min-height: 114px;ont-family: Verdana;}
    ol.commentlist li ul{font:400 12px/1.4 helvetica,arial,sans-serif;list-style:square;margin:0 0 1em;padding:0;text-indent:0}
    ol.commentlist li div.reply{background:#999;border:1px solid #666;border-radius:2px;-moz-border-radius:2px;-webkit-border-radius:2px;color:#fff;font:700 9px/1 helvetica,arial,sans-serif;padding:5px 10px;text-align:center;width:50px}
    ol.commentlist li div.reply:hover{background:#c30;border:1px solid #c00}
    ol.commentlist li div.reply a{color:#fff;text-decoration:none;text-transform:uppercase}
    ol.commentlist li ul.children{list-style:none;margin:1em 0 0;text-indent:0}
    ol.commentlist li.even{background:#fff}
    ol.commentlist li.odd{background:#f6f6f6}
    ol.commentlist li.bypostauthor{background:#fdfddf}
    ol.commentlist li.pingback{background:#fff;border:1px solid #fecc38}
    ol.commentlist li.pingback div.vcard,ol.commentlist li div.comment-author{padding:0 170px 0 0}
    
    .box {
    	background: #ffffff;
    	border: 1px solid #cfcfcf;
    	margin: 0 0 15px;
    	padding: 1px;
    }
    .box .content {
    	background:#F0F0F0;
    	height: 1%;
    	padding: 13px;
        padding-bottom:15px;
    }
    
    .box.top{
    width:300px;
    float:right;
    margin-top:-115px;
    }
    
    .box2 {
    	background: #f9f9f9;
    	border: 1px solid #cfcfcf;
    	height: 1%;
    	padding: 10px;
    	min-height: 115px;
    	margin-top:-121px;
    	margin-left:50px;
    }
    .box2.alt {
    	background: #FFFFFF;
    }
    .box2.alt {
    	background: #FFFFFF;
    }

    I really don't understand how to do the trick.

  9. esmi
    Forum Moderator
    Posted 4 years ago #

    The above is CSS - not PHP code. Whilst you can do a great deal using pure CSS and the default wp_list_comments output, it isn't always possible to pull off very different comment displays without also changing the markup - which is where the custom callback function comes into play.

    That said, your current comment display is almost there. It just needs tweaking a little bit. Try using floats rather than negative margins. For example, I've used the following to achieve a similar display:

    #commentlist .comment-author,#commentlist .commentmetadata {
    	width:195px;
    	clear:left;
    	float:left;
    	margin:0;
    }
    #commentlist .comment-author {
    	padding:17px 5px 0;
    }
    #commentlist .commentmetadata {
    	padding:0 5px 30px;
    	font-size:.8em;
    }
    #commentlist img {
    	margin:0 5px 0 0;
    }
    #commentlist .commentmetadata {
    	text-align:left;
    }
    #commentlist .bypostauthor > .comment-body > .comment-author cite {
    	padding-right:20px;
    }
    #commentlist .comment-author .says {
    	display:none;
    }
    #commentlist .commentmetadata a.comment-edit-link {
    	display:block;
    	margin:0;
    }
    #commentlist .comment p {
    	margin:0 0 0 210px;
    	padding:5px 10px 5px;
    	clear:none;
    }
    #commentlist .reply {
    	clear:left;
    	margin:0 0 0 210px;
    }
    #commentlist .children li {
    	margin-left:20px;
    }
  10. baal666
    Member
    Posted 4 years ago #

    Does it make a difference using #commentlist. rather than ol.commentlist?

    Also, the text box overrides the others boxes in FF, which makes it look ankward, even when I deleted the ol. and replaced it by your # code... Any idea?

    Been working on this for hours.. Really don't know how to make it work.

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags