I've broken this tutorial down into two parts. First is the basic installation of a short javascript and style information for the comment count. You may modify the look of your comments manually by editing these settings. Second, I've included an Advanced Configuration option which extends the Template Designer with several key color options used by this feature. It's optional, but if you're unaccustomed to manually modifying color codes it's a handy option to have. So, let's begin. Note: Internet Explorer prior to version 9 does not support some of the styles, while Firefox 3.5+ and Google Chrome do.
Installing Stylish Comment Counts to your Blog
Installation of this modification is one simple step. Open your Template in Edit HTML view and insert the following just below the <head> tag. Note: if you already include JQuery elsewhere you may omit the first line.
<script src='http://code.jquery.com/The above javascript does the work inserting a simple comment count at the top of each comment on a page, while the style information provides a starting point using CSS3 features for modern browsers to spice up the look. This includes rounded corners, with a color gradient background and box shadow effect making the counts stand out much as those on this blog currently do. I've even included custom coloring for comments by the blog author Older less advanced browsers degrade gracefully to a simple solid background color and text.You may tweak the style settings to your hearts content manually or take things a step further with the advanced configuration options belowjquery-latest.js'></script> <style type='text/css'>
.js-comment-count {
text-align: center;
font-size: 1.4em;
line-height: 1;
font-weight: bold;
float: right;
padding: 5px 10px;
margin: 0px 0px 10px 10px;
color: #333333;
background-color: #ffffff;
background-image: linear-gradient(#ffffff, #cccccc);
background-image: -moz-linear-gradient(#ffffff, #cccccc);background-image: -webkit-linear-gradient(#ffffff, #cccccc);box-shadow: 0px 0px 5px #999999;
-moz-box-shadow: 0px 0px 5px #999999;
-webkit-box-shadow: 0px 0px 5px #999999;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
.blog-author .js-comment-count {
margin: 0px 0px 10px 10px;
background-color: #cccccc;
background-image: linear-gradient(#cccccc, #aaaaaa);
background-image: -moz-linear-gradient(#cccccc, #aaaaaa);
background-image: -webkit-linear-gradient(#cccccc, #aaaaaa);
}
</style>
<script type='text/javascript'>
//<![CDATA[
var jsCommentCount = function(){
var init = function(){
var $template = $("<div class='js-comment-count'></div>");
$("dt.comment-author").each(function(i){
var $curCount = $template.clone();
$curCount.html(i+1);
$(this).prepend($curCount);
});
}
$(document.ready).ready(init);
}();
//]]></script>
Advanced Configuration: Extending Template Designer
The next two additions are entirely optional, but provide easy color customization through the Template designer. This first modification adds five options with one more set manually within the template. To install open Edit HTML view and search for Variable definitions and place this code two lines below. This places the Comment Counts as the first Advanced Option group in template designer, however you may adjust this by carefully placing the code further down after a </group> tag of your choice.
<Group description="Comment Counts" selector=".js-comment-count">Now, you have five brand new options in your template designer. To take advantage of those styles and finalize the look of the customized comment count we must add the below CSS. Search for body { and place the following CSS on the line above.
<Variable name="comment.count.text.color" description="Text Color" type="color" default="#ffffff" value="#ffffff"/>
<Variable name="comment.count.bg.color" description="Background Color" type="color" default="#ffffff" value="#ffffff"/>
<Variable name="comment.count.bg.color.end" description="Second Background Color" type="color" default="#cccccc" value="#cccccc"/>
<Variable name="comment.count.author.bg.color" description="Author Background Color" type="color" default="#cccccc" value="#cccccc"/>
<Variable name="comment.count.author.bg.color.end" description="Second Author Background Color" type="color" default="#aaaaaa" value="#aaaaaa"/>
</Group>
<Variable name="comment.count.border.radius" description="Comment Count Border Radius" type="length" default="5px" value="5px"/>
.js-comment-count {This completes the Advanced Configuration installation. You may now customize the look of the comment count by saving your changes and visiting the Template Designer to set your color preferences. Note that the "Second" color options are the second option in the linear gradient feature of modern browsers. Gradients gracefully transition a color from the first to the second for a pleasing effect once reserved for custom graphics. Play around with the settings to find what works well for you.
text-align: center;
font-size: 1.4em;
line-height: 1;
font-weight: bold;
float: right;
padding: 5px 10px;
margin: 0px 0px 10px 10px;
color: $(comment.count.text.color);
background-color: $(comment.count.bg.color);
background-image: linear-gradient($(comment.count.bg.color), $(comment.count.bg.color.end));
background-image: -moz-linear-gradient($(comment.count.bg.color), $(comment.count.bg.color.end));
background-image: -webkit-linear-gradient($(comment.count.bg.color), $(comment.count.bg.color.end));
box-shadow: 0px 0px 5px #999999;
-moz-box-shadow: 0px 0px 5px #999999;
-webkit-box-shadow: 0px 0px 5px #999999;
border-radius: $(comment.count.border.radius);
-moz-border-radius: $(comment.count.border.radius);
-webkit-border-radius: $(comment.count.border.radius); }
.blog-author .js-comment-count {
background-color: $(comment.count.author.bg.color);
background-image: linear-gradient($(comment.count.author.bg.color), $(comment.count.author.bg.color.end));
background-image: -moz-linear-gradient($(comment.count.author.bg.color), $(comment.count.author.bg.color.end));
background-image: -webkit-linear-gradient($(comment.count.author.bg.color), $(comment.count.author.bg.color.end));
}
Conclusion
As you can see in the more active posts I've included this feature into my own blog. I think it brings a nice new life to the comment section and further differentiates my own comments from those of visitors. I hope you enjoy this new addition and please feel free to ask any questions about customizing your comments count.
4 comments :
No screenshots? :o I wanna see what this looks like :3
Hehe, there we go! I can see it in your comment area.
It was all a dirty ploy fishing for comments I tell ya! Actually I forgot ;0
nice! you hit me again with this cool tuts! ;)
Post a Comment