Posted 1 month 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!
Posted 1 month 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.
The site you referenced either doesn't use wp_list_comments or uses a custom callback function to achieve that comment display:
Posted 1 month ago #
Yes, I know... But how can it be done?
By coding a custom callback function that provides the markup that you want, then styling that markup with CSS.
Posted 1 month 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.
Posted 1 month ago #
See next comment.
Posted 1 month 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' );?> à propos de «
<?php the_title(); ?>»</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.
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;
}
Posted 1 month 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.
You must log in to post.
