I have noticed that more and more blog authors highlight their comments on their weblogs. I think this is quite useful, so I decided to add this function to my customised The Morning After theme as well. To be honest, I was quite surprised that the implementation of this ‚highlighting‘ was so simple:
comments.php
Open the comments.php file in your theme editor and replace
< li id="comment-< ? php comment_ID() ? >">
with the following code:
<li id="comment-<?php comment_ID() ?>" <?php if ($comment->comment_author_email == "you@yoururl.com") { ?> class="mycomment"<?php } ?>>
Change you@yoururl.com to the email address that you use for commenting on your blog.
style.css
Now, you have to edit your stylesheet so your posts look different. Since I added the class mycomment to the comments with my e-mail address, I inserted the highlighted code into the style.css file.
ol#commentlist li
ol#commentlist li.mycomment { background: #f2f2f2; }
ol#commentlist li.alternate):
Done. Easy-peasy, or? Scroll down to „Discussion“ to view the result.
NOTE: Only works for single author blogs.
Kommentare
39 Antworten zu „The Morning After – Highlighted Comments, Anyone?“
This is a normal comment.
This is a highlighted comment.
Good one! But I think overflow-x is not allowed… it is just overflow:
Hi Andrew!
Thanks for the info. I’ve just copied Arun’s code for ol#commentlist li. I will check this variable when I have more time.
cheers
I am using your code. I had this on my to-do for a while – you solved the problem for me – thanks!
BTW, rather than copy the code, all you really need is:
`ol#commentlist li.mycomment {background: #f2f2f2;}`
This way you can change the comment styling and have the mycomment background appear. Duplicating CSS when not needed… is not needed.
THANKS!
THANKS again!
I really have to work on my CSS skills.
cheers
I followed your directions and my comments are highlighted now, but unfortunately my „Related Posts“ suddenly have a strange formatting (they are formatted like the comments are).
I wonder why the related posts formatting has been changed?
Now it appears that YOUR ‚Related Posts‘ are doing the same error as mine!
It seems that this tweak is interacting with the ‚Related Posts‘ formatting in some way.
It’s not an error. I want my related posts to have the same stlye as my comments and trackbacks.
http://www.nickbohle.de/technology/the-morning-after-related-posts-anyone/
Oh. I like it better as bullet points.
I tried your code and it hasn’t worked yet. I’ve pasted my comments.php and my style.css code at wordpress.pastebin.com. Can you tell me what I did wrong?
Here is my comments.php link…
http://wordpress.pastebin.com/m48919344
here is my style css
http://wordpress.pastebin.com/d18f7a93
Hi!
style.css:
– There were two spaces missing – between { and background and between ; and }
comments.php:
– There were two spaces too much – between < and ? of < ?php should not be a space.
– And there should be no closing li tag between ?>> and the div class commentcount.
– http://wordpress.pastebin.com/m62a1bd50
Thanks Nick! It worked like a charm!
Your code and A.Schmitt’s css worked perfectly. Thanks!
Nick, can you please see why it isn’t working on my blog?
I might be doing a very silly mistake.
Thanks!
Hi!
I’ve just checked your site… and I have to say that your comments are highlighted. You just don’t see any „highlighting“ when every comment is highlighted.
cheers
Well, if that is the case Nick. Then how can I tweak the css?
I mean I need to see the changes for making better changes. Any ideas?
Also, why can I see it in offline blog?
Apart from this, I am having problems with nofollow thing I discussed earlier with you and validation of single.php
I’ll now work over changing the navigation menu. Will see how can I efficiently do it.
You want to make the highlighting more visible? Choose a different background colour!
Offline blog? Set up a local server with Xampp. You’ll find a lot of tutorials for that when you google for xampp wordpress. And you can upload files for validating files with http://validator.w3.org…
„Will see how can I efficiently do it….!“ Perfect!!! Go some steps alone!
The problems are actually different. I believe there is some problem with cache.
I have disabled cache but still it loads the page in which I can’t see the css class I made for mycomment. If I edit the css live then it do show the change.
I checked my css file, the one that is one server to make sure I have that css for mycomment. It is there.
So, with my little knowledge, I guess cache could be the only reason. But something strange is IE as well as other profile of FF also shows the webpage same way.
I wasn’t asking about setting up offline blog. I have it.
Thank you Nick!
I was wondering why this only works on single-user blogs. Couldn’t you have a string of if commands for each separate email, all with the same class id linked up to them?
This should be possible with else if php function:
if ($comment->comment_author_email == „email1@email.com“) echo ‚mycomment‘;
else if ($comment->comment_author_email == „email2@email.com“) echo ‚mycomment‘;
etc.
But I think there are already some plug-ins for this…
cool this was what i was looking for in TMA theme
thanks! that helped. just a concern though, i’m wary about putting my e-mail address even if it’s just in the code, thinking it might get harvested by spam bots… what do you think? is there a spam vulnerability to this method of highlighting posts?
well, you won’t see the email address inside the code. If your email address is used, the code will just output class=“mycomment“…
so, no danger at all…
Hi Nick!
Thanks for the instructions! The highlighting is working, but for some reason, my comments are now set to 0 in the numbering. Any clue why that is?
Hi Andria!
What do you mean by „comments are now set to 0“?
I mean, how they are numbered. Instead of being numerical, they all show up as 0.
sorry, but I still do not get what you mean..
I had at your source code… and still, your comments are numbered…
Where are the comments set to 0?
Upppss…. opening my eyes helped… well, it seems that this is a plug-in problem, because the source code displays the code / numbers correctly… I suggest that you remove the counting and add gravatars..
http://www.nickbohle.de/2008/05/15/the-morning-after-gravatars-anyone/
Hmm. When I look at my comments, they all have 0 set to the right side. They are numbered when you looked?
Hi Andria….
just saw them / edited my last comment before you wrote your last comment…
So, I would remove those numbers (which I did not see) and show your (beautiful) positive avatar instead…
By the way, you convinced me to change my gravatar from sitelogo back to a pic of me again..
cheers
Nick
Eh, I didn’t need the numbers anyway, I suppose. I’ll add the gravatar option tonight. :) Thanks for the help! You rock!
(PS- It’s nice to put a face to the name! Nice pic!)
Thanks… just checked your WP version… you have to upgrade to WP 2.5 to use my tutorial… or you use the gravatar plug-in…
contact me if you need help…
i like how you made the code a png so people can’t just cut and paste it and actually use it :p way to go, copernicus
New plugin does this for you!
http://rmarsh.com/plugins/highlight-comments/
Thanks for the info! Well, I already have it inside my theme’s code.
[…] enabling highlighted comments and gravatars, please follow the linked […]
I have edited all the steps mentioned above, but do not see the shading background for my comments
url – http://kennygrant.ca/2008/09/we-are-back-in-business/
please help!!!
ps – great site, lots of great tips and tricks here.. thanks for that!
Thanks kenny!
I see a grey background to highlight your comments.
By the way, your comment was marked as spam by akismet.
thanks for catching that and bring that to my attention!