Styling SharePoint Blog Comments

Out of the box the comments on SharePoint blogs dont look that good. 

Standard SharePoint blog comments

Standard SharePoint blog comments

 Here is a way to fix that problem. Just add this CSS to the page and things should start looking alot better.

<style type="text/css">
/* wraps the title of each comment */
.ms-commenttable {border:0px;}
/* the title of each comment */{font-size:x-small;border:0px;}
/* wraps the body of each comment */ {
	background:url('../../images/comm_top.gif') top 0px no-repeat;
	padding:18px 0 0 0;
/* wraps the text of each comment */ div {
	border:1px solid #ccc;
/* wraps the meta info (author, date, etc.)	for each comment */
.ms-CommentFooter {
	background:url('/_layouts/images/square.gif') 5px 50% no-repeat;
	border-top:1px dotted #ccc;
	border-bottom:1px dotted #ccc;
.ms-CommentFooter span {padding-left:18px;}

/* wraps all comments */
.ms-commentsWrapper {
/* header style for 'Comments' and 'Add a Comment' */{
	background:url('/_layouts/images/menunewdiscussion.gif') top left no-repeat

Without editing the code of the page there are some limitations on what can be done. I did not make too many drastic changes but this code should be a good starting point for making your ShaerPoint blogs look better.


Better looking comments

Here is the image I used in the CSS (right click save as). The other two images are referenced from the 12 hive and should work automatically on any WSS or MOSS installation. 

In a future post I will try to do something about the comment form.

6 Responses

Add a Comment

Your email address will not be published. Required fields are marked *