How to Style Disqus Recent Comments Widget

In the previous post you've learnt how to add the disqus recent comments widget for your blogger site. Now in this post I'll show you how to beautify or style your disqus recent comments widget. In order to customize the looks of the recent comment widget, we'll have to use CSS.

This post is particularly intended for those webmasters who already installed disqus comment system and of course the disqus recent comments widget. If you just copied and pasted the code from the previous post, then probably you are not satisfied with its look/design. Hence, you came here to learn of a method to make it look much better.

First, have a look at this site - http://infinithinkit.blogspot.com, they made a nice design customization for the recent comments widget.

Likewise, its easy to make a nice look for your recent comments widget. You'll just need to use the code provided below and alter it according to your preference.

h3{font-family:'Trebuchet MS',Helvetica,sans-serif;}
.dsq-widget-user{text-decoration:none; display:block; font-family:calibri; color:#0EAB2A;}
.dsq-widget-comment{font-family:calibri; display:block;}
.dsq-widget-meta a{text-decoration:none; font-family:calibri;}
.dsq-widget-item{border-left:3px solid #16B560; padding-left:10px; transition-property:background-color, color;  transition-duration:1s;  transition-timing-function:ease-out;}
.dsq-widget-item p a{text-decoration:none; color:#0EAB2A;}
.dsq-widget-item:hover{border-left:3px solid #16B560; padding-left:10px; background-color:#EDFAF3;}
.dsq-widget-avatar{border-radius:100px;}
.dsq-widget ul.dsq-widget-list{padding:0; margin:0; text-align:left;}
img.dsq-widget-avatar{width:32px; height:32px; border:0px; margin:0px; padding:0px 3px 3px 0px; float:left;}
a.dsq-widget-user{font-weight:bold;}
a.dsq-widget-thread{font-weight:bold;}
p.dsq-widget-meta{clear:both; font-size:80%; padding:0; margin:0;}
li.dsq-widget-item{margin:15px 0; list-style-type:none; clear:both;}
span.dsq-widget-clout{padding:0 2px; background-color:#ff7300; color:#fff;}
table.dsq-widget-horiz td{padding-right:15px;}
.dsq-widget-comment p{display:inline;}

Then save your work and enjoy!

before

after

So that's all. If you've followed the given procedures above on how to customize the design of your recent comments widget, then you should have now a nice looking design based on your preference. If you need any help with the design customization, feel free to leave a comment below.