Styling CommentLuv Last Blog Post for WordPress

CommentLuv is a must have WordPress plugin. It’s a nice way of rewarding your blog readers who leave a comment on your blog because it displays  a prominent link back to their last blog post. Cool, isn’t it?

But I don’t like the way it displays my commenters’ last blog post. Maybe it would be great if I could edit the CommenLuv CSS so I could customize or style it.

I noticed in Firebug that the CommentLuv style sheet is located in ../wp-content/plugins/commentluv/style/cl_style.css and .cluv has this default style:

.cluv {
border:1px solid #fff;
padding: 5px;
display: block;
font-size: 100% !important;
text-transform: none !important;
}

that looks like this

Default Style of CommentLuv Last Blog Post

Although the default style has a white border (border:1px solid #fff) it’s invisible in my comment box because it also has a white background.

Styling CommenLuv CSS

I tried putting background color, top margin and different border color with rounded corner, and presto! Here’s the result. Just the way I like it.

Styling CommentLuv Last Blog Post

Here’s the code to style my commentator’s last blog post.

.cluv {
margin-top:15px;
padding: 5px;
border:1px solid #FFCCCC;
background:#F1DCC1;
display: block;
font-size: 100% !important;
text-transform: none !important;
border-radius:5px;
-moz-border-radius: 5px;
-khtml-border-radius: 5px;
-webkit-border-radius: 5px;


If you want you can copy-paste this code and replace the default .cluv styles.  Just change the border, margin or background color to your preference. After editing cl_style.css, upload it to your CommentLuv’s plugin folder – ../wp-content/plugins/commentluv/style.

There you go. Don’t forget to backup the original cl_style.css first if you want to edit it, so you have something fresh to work on if things don’t turn out right. Anyway, this is uber easy, I don’t think you’ll have a problem with it.