Wizzart – Recent Comments – Tip

If you know much about CSS you probably won’t find this post interesting.

I started using Wizzard – Recent Comments plugin a couple weeks ago. It works great, has some nice options and easy to adjust to whatever theme you might be using. I’m far from an expert in CSS or PhP, but I managed to change the way the comments look to the way I wanted fairly easily. I’ll Explain what I did for anyone who is as new as I am with CSS.

Once you install the plugin, check your widgets and activate it, a window should open up with a few settings and in the lower section there’s a place you can edit the CSS for it.

The first thing I did was change the “List Type” dropdown option from Unordered List to Ordered list, this just changes the way the recent comments are listed in the sidebar.

By Default there’s a dotted border around the comments and a beige colored background when you hover over a comment, which looks nice with most themes.

I prefered to keep the comments listed like the rest of my site and removed the border, and changed the hover effect background color to something matching my site. To do this first look at the first piece of CSS code.

.recent-comment a.comment-link {
	 text-decoration: none;
	 display:block;
	 padding: 8px;
	 border: 1px dashed #e8cdab;
}

The “border: 1px dashed” part is what creates the dotted line effect around the whole widget. You can change this to border: 1px solid and change the color of the border too #000 will turn it black. Or you can do what I did and remove it and only show a solid line below each comment like this.

.recent-comment a.comment-link {
	 text-decoration: none;
	 display:block;
	 padding: 8px;
	 border-bottom: 1px solid #DDD;
}

Notice I changed it to use border-bottom: 1px and changed the color to a grey #DDD.

The next thing I did was to add a background color to the actual comment excerpt and changed the color of the text in the except. Scroll down to the bottom of the CSS and find

.recent-comment .comment-text {

This defines what the comment excerpt looks like.

All I did was change the font color to black, and added

background-color: #eaf0fb;

to it, which gives it a slightly darker background color than the color of my sidebar to stand out more. By default the text is set to italic, you can change this as well.

The last change I made was to the Gravatars, I added a smalll border around them to match the one in my Login Widget. Look for…

.recent-comment .comment-author-gravatar {

This is what controls the look of the Gravatars for the comment authors. All I did was add

border: 2px solid #ddd;
         padding: 2px;

This puts a 2 pixel border around the image and adds a 2 pixel space between the border and the image.

All this is pretty easy to do, you can play around with different parts of the CSS and edit it to your liking, the rest of the CSS is easy to figure out. You should also make a copy of your finished CSS in case you ever need to disable widget, otherwise it will reset to the default settings.

If you need any help with it, be sure to visit the authors site and leave a comment, he’s quick to respond and very helpful. There’s also a complete tutorial on his site as well.