Posted 2 years ago #
Hi - I need to change the position + font of the date on Comments. I see here:
http://sewmyheadon.com/2009/wordpress-2-9-is-out/#comments
Eric has moved date to right + changed to caps, which I really like. His css is:
.commentlist p.metadate{clear:none;float:right;margin:0;width:40%;font-size:.8em;text-align:right;text-transform:uppercase}
But when I tried that, nothing happened. I'm guessing he has something in his functions.php file?
Be grateful for help - thank you! - Val
site url?
Posted 2 years ago #
Nope, nothing relevant to comment date in my functions.php file. It's just straight CSS with template tags.
If you use Firebug to inspect the date element, you'll see the cascade of other styles affecting the date presentation.
Here's the markup:
<div class="comment_info">
<div class="comment_author">Rich said: </div>
<p class="metadate">December 19th, 2009 at 09:06</p>
</div>Here's the relevant CSS:
.comment_info {
float:left;
margin-bottom:0.5em;
width:100%;
}
.comment_author {
float:left;
font-weight:bold;
width:50%;
}
#content p {
margin-bottom:1em;
}
.commentlist p.metadate {
clear:none;
float:right;
font-size:0.8em;
margin:0;
text-align:right;
text-transform:uppercase;
width:40%;
}Of course, there are other styles affecting these higher on up the chain, but these are the guts. :)
Posted 2 years ago #
Hi - thanks for replying! I don't have a site URL, I'm doing it on my hard drive with wamp.
My problem is this in my comments.php file:
<ol class="commentlist">
<?php wp_list_comments(); ?>
list_comments automatically prints: author, date + comment. I can apply rules to the comment text itself through ".commentlist li" but I'm trying to find out how to format the comment header, viz. author + date.
Eric, I tried adding both your html to my comments.php file, below the line <?php wp_list_comments(); ?>
and your css to my css, but list_comments is still controlling author + date. I don't know how to over-ride it.
The only over-rides I've managed so far are:
.says {display:none}
.commentlist li {margin, padding, border, font, etc}
.commentlist li.bypostauthor {background}
.commentlist li .avatar {float left or right etc}
I found this list somewhere of everything that can be changed in list_comments, but there's no .commentlist li author/date (or metadate) in it.
So it's just the comment header - the name of the comment-writer, the date, and the space below - that I'm looking to change from the way it's internally formatted in <?php wp_list_comments(); ?>.
I tried this but it doesn't work:
<?php wp_list_comments("); comment_date('n-j-Y'); ?>
grateful for your help - thanks, Val
.ol.commentlist {}
.ol.commentlist li {}
.ol.commentlist li.alt {}
.ol.commentlist li.bypostauthor {}
.ol.commentlist li.byuser {}
.ol.commentlist li.comment-author-admin {}
.ol.commentlist li.comment {}
.ol.commentlist li.comment div.comment-author {}
.ol.commentlist li.comment div.vcard {}
.ol.commentlist li.comment div.vcard cite.fn {}
.ol.commentlist li.comment div.vcard cite.fn a.url {}
.ol.commentlist li.comment div.vcard img.avatar {}
.ol.commentlist li.comment div.vcard img.avatar-32 {}
.ol.commentlist li.comment div.vcard img.photo {}
.ol.commentlist li.comment div.vcard span.says {}
.ol.commentlist li.comment div.commentmetadata {}
.ol.commentlist li.comment div.comment-meta {}
.ol.commentlist li.comment div.comment-meta a {}
.ol.commentlist li.comment * {} - (p, em, strong, blockquote, ul, ol, etc.)
.ol.commentlist li.comment div.reply {}
.ol.commentlist li.comment div.reply a {}
.ol.commentlist li.comment ul.children {}
.ol.commentlist li.comment ul.children li {}
.ol.commentlist li.comment ul.children li.alt {}
.ol.commentlist li.comment ul.children li.bypostauthor {}
.ol.commentlist li.comment ul.children li.byuser {}
.ol.commentlist li.comment ul.children li.comment {}
.ol.commentlist li.comment ul.children li.comment-author-admin {}
.ol.commentlist li.comment ul.children li.depth-2 {}
.ol.commentlist li.comment ul.children li.depth-3 {}
.ol.commentlist li.comment ul.children li.depth-4 {}
.ol.commentlist li.comment ul.children li.depth-5 {}
.ol.commentlist li.comment ul.children li.odd {}
.ol.commentlist li.even {}
.ol.commentlist li.odd {}
.ol.commentlist li.parent {}
.ol.commentlist li.pingback {}
.ol.commentlist li.pingback div.comment-author {}
.ol.commentlist li.pingback div.vcard {}
.ol.commentlist li.pingback div.vcard cite.fn {}
.ol.commentlist li.pingback div.vcard cite.fn a.url {}
.ol.commentlist li.pingback div.vcard span.says {}
.ol.commentlist li.pingback div.commentmetadata {}
.ol.commentlist li.pingback div.comment-meta {}
.ol.commentlist li.pingback div.comment-meta a {}
.ol.commentlist li.pingback * {} - (p, em, strong, blockquote, ul, ol, etc.)
.ol.commentlist li.pingback div.reply {}
.ol.commentlist li.pingback div.reply a {}
.ol.commentlist li.pingback ul.children {}
.ol.commentlist li.pingback ul.children li {}
.ol.commentlist li.pingback ul.children li.alt {}
.ol.commentlist li.pingback ul.children li.bypostauthor {}
.ol.commentlist li.pingback ul.children li.byuser {}
.ol.commentlist li.pingback ul.children li.comment {}
.ol.commentlist li.pingback ul.children li.comment-author-admin {}
.ol.commentlist li.pingback ul.children li.depth-2 {}
.ol.commentlist li.pingback ul.children li.depth-3 {}
.ol.commentlist li.pingback ul.children li.depth-4 {}
.ol.commentlist li.pingback ul.children li.depth-5 {}
.ol.commentlist li.pingback ul.children li.odd {}
.ol.commentlist li.thread-alt {}
.ol.commentlist li.thread-even {}
.ol.commentlist li.thread-odd {}
Posted 2 years ago #
Hey Val,
I think we've approached the comments.php file differently. Mine contains this for the <ol class="commentlist">:
<ol class="commentlist">
<?php foreach ($comments as $comment) : ?>
<li class="<?php echo $oddcomment; ?> clearfix" id="comment-<?php comment_ID() ?>">
<div class="comment_info">
<div class="comment_author">
<?php comment_author_link() ?>
said:
</div>
<?php if ($comment->comment_approved == '0') : ?>
<em>Your comment is awaiting moderation.</em>
<?php endif; ?>
<p class="metadate"><?php comment_date('F jS, Y') ?> at <?php comment_time() ?></p>
</div>
<?php echo get_avatar( $comment, $size = '48', $default = 'http://mydomain.com/wp-content/themes/mythemename/images/gravatar.png' ); ?>
<?php comment_text() ?>
</li>
<?php /* Changes every other comment to a different class */
if ('alt' == $oddcomment) $oddcomment = '';
else $oddcomment = 'alt';
?>
<?php endforeach; /* end for each comment */ ?>
</ol>
Posted 2 years ago #
Hi Eric - oh I see! I got that <?php wp_list_comments(); ?> from Tessa Blakely Silver's book "WordPress Theme Design." I didn't know we could break it up as you have.
Now I can see where you're getting your date from, thanks!
By accident I happened to be on a page - http://sewmyheadon.com/2009/wordpress-2-9-is-out/#comments - where every second comment was by you. So I thought you were coloring *your* comments in a different color, but it turns out you were simply alternating colors!
Anyway it led me to find .bypostauthor {background}
I'm struggling now with firebug showing:
<cite class="fn">comment author's name</cite>
It insists on displaying the name using my:
em, i, cite {}
rule for entire page.
I've tried to over-ride it with:
.comment-author cite {}
.vcard cite {}
.comment-author .vcard cite {}
.comment-author {}
But they don't work. Do you know how I can define cite specifically for comment-author only?
In the comment itself, I want it to follow the page rule for em/i/cite.
thank you! - Val
Posted 2 years ago #
Hi Eric - scratch the above! Using your code deleted the cite :)
(1) This foreach php you use:
<?php foreach ($comments as $comment) : ?>
<?php endforeach; ?>
does not seem to do anything. Can I safely delete it? I'm not alternating background color as you've done.
(2) In my Discussion Settings, I have newer post first, but after I entered your code above in full (then adapted it as below), it over-rode the settings so older post is now first (as it is on your site).
Please can you tell me what to delete in my latest html/css below so I keep newer post first? It's *always* been set to first in discussion settings.
(3) x-browser, IE + Opera say "newer comments" for nav (thus recognizing older are first in display?) and FF says both "older comments" and "newer comments" - thus following the html which says to put both.
Is there a way to have a conditional statement so *only if* there are older or newer posts, it will display these links:
<?php previous_comments_link() ?>
<?php next_comments_link() ?>
WordPress refuses to obey this:
"Break comments into pages with [2] top level comments per page and the [first] page displayed by default
Comments should be displayed with the [newer] comments at the top of each page"
It's displaying older comments first, and displaying *all* comments instead of just 2. As far as I know, all my comments are top-level, because I don't have a "reply-to-this-comment-only" button beneath each comment.
It's a real drag when wordpress gets corrupted like this and basically ignores the settings. It did the same for my sociable plugin. Is there a way to clear the corruption? It was working ok until I added your code above in full and then deleted what I didn't need. Since then it's been corrupted and won't listen to what I say in "discussion settings."
here's my html:
<ol class="commentlist">
<!--<?php foreach ($comments as $comment) : ?>-->
<li class="clearfix" id="comment-<?php comment_ID() ?>">
<div class="comhead">
<div class="comauthor"><?php comment_author_link() ?></div>
<?php if ($comment->comment_approved == '0') : ?>
Your comment is awaiting moderation.
<?php endif; ?>
<p class="comdate"><?php comment_date('F j, Y') ?> at <?php comment_time() ?></p>
</div>
<?php echo get_avatar($comment, $size='65'); ?>
<div class="comtext"><?php comment_text() ?></div>
<!--<?php endforeach; /* end for each comment */ ?>-->
<div class="comnav clearfix">
<div class="flft"><?php previous_comments_link() ?></div>
<div class="frgt"><?php next_comments_link() ?></div>
</div>
here's my css:
.commentlist {margin:0;padding:0}
.comhead {float:left; margin-bottom:5px; width:100%}
.comauthor{float:left; width:50%; font-weight:bold}
.comdate{clear:none; float:right; margin:0; width:40%; font-size:0.8em; text-align:right}
.avatar {float:right; margin:0 0 0 10px; background:white}
.comtext {font-size:1.05em}
.commentlist li {
margin:10px 0; /*space betw boxes*/
padding:10px;
list-style:none; border:1px solid green; background:white
}
.commentlist li.bypostauthor, .commentlist li ul li.bypostauthor {background:#f2ffdf}
.reply{clear:both;margin:1em 0}
.comnav {display:block; text-align:center; margin:10px}
Another problem is since adding your code (then deleting/changing) it no longer recogninzes:
.commentlist li.bypostauthor {background}
(4) Before I entered your code, it was giving me a different background color for comments by the writer of the post. Can you see why it's no longer doing this?
It seems to me wordpress gets corrupted! Everything looks perfectly ok, but somehow by adding your code in full, wordpress freaked out - it stopped giving me different background for author, and stopped displaying the newer posts first.
thank you! - Val
Posted 2 years ago #
Hi Eric - it's ok I found all the answers here:
http://codex.wordpress.org/Template_Tags/wp_list_comments
Basically yours is the old pre- list_comments way of doing it, between those 2 tags <?php foreach ($comments as $comment) : ?>
They say to upgrade to wp_list_comments.
(1) For minimal control, can use the list above that I found at http://cdharrison.com/2008/12/03/threaded-comments/
e.g.
.says {display:none}
.commentlist li.bypostauthor, .commentlist li ul li.bypostauthor {background:#f2ffdf}
cite.fn {font-style:normal}
.vcard {} /*author*/
.comment-meta {font-size:0.8em; padding:3px 0 10px} /*date*/
.comment-meta a {text-decoration:none}
.avatar {float:right; margin:0 0 5px 10px; background:white}
.commentlist li p {font-size:0.9em} /*comment body*/
and (2) for more detailed control, e.g. floating date to right above avatar as you have, can use list_comments callback function with functions.php as described in the codex.
So now my final problem is how to get website link of comment-author to open in new window, because the default is to take visitor out of my site when it's clicked, but not to worry, I'm sure I can track how to do it using (1) or (2) above.
thanks! - Val
Posted 2 years ago #
Hi - actaully for more detailed control of wp_list_comments, it's quicker to edit
wp-includes/comment-template.php directly. No need to create a functions.php file, e.g.
(1) To force comment-author URL to open in new window, I changed this in comment-template.php:
$return = "$author";
to this:
$return = "$author";
(2) To get rid of cite - which displays text of comment_author using my <cite> rule - I changed this:
<?php printf(__('<cite class="fn">%s</cite>
to this:
<?php printf(__('<div class="fn">%s</div>
Now I have full control of the font of author's name (without cite interfering) in my css, viz.:
.vcard {} /*author*/
Eric, thanks million for showing me how you floated date on right, with avatar underneath. I see your basic structure is:
<div class="clearfix">width 100%</div>
<div>author float left</div>
<p>date float right, text-align right</p>
</div>
get_avatar
comment_text
Using this structure, I was easily able to change comment-template.php to do the job!
So now I have comments looking exactly the way I want, with minimal markup.
all the best, Val
Posted 2 years ago #
To force comment-author URL to open in new window, it should look like this:
from:
$return = "<a href='$url' rel='external nofollow' class='url'>$author</a>";
change to this:
$return = "<a href='$url' rel='external nofollow' target='_blank' class='url'>$author</a>";
The full answer is here:
http://www.programmingfacts.com/2010/01/25/open-comment-author-urllink-window/
Posted 2 years ago #
This topic has been closed to new replies.
