Styling SharePoint Blog Comments: Part 2

As promised I went ahead and styled the comment form on a standard SharePoint blog.  I wanted to make it look better than this but there are some limitations because of the way the page is coded with so many nested tables. 

Better looking comment form
Better looking comment form

I kept the styles pretty simple but this should be a good starting point for someone wanting to do something more complex.

This code includes the code from part 1 with some minor changes. The new styles for the comment form are commented.

<style type="text/css">
.ms-commenttable td {border:0px;}
h4.ms-CommentTitle{border:0px; font:italic normal small Georgia;}
div.ms-CommentBody {
	background:url('../../images/comm_top.gif') top 0px no-repeat;
	margin-bottom:12px;
	padding:18px 0 0 0;
}
div.ms-CommentBody div {
	border:1px solid #ccc;
	border-top:0px;
	padding:15px;
	line-height:18px;
	}
.ms-CommentFooter {background:url('/_layouts/images/square.gif') 5px 50% no-repeat;
	padding:3px;
	margin:0px;
	border-top:1px dotted #ccc;
	border-bottom:1px dotted #ccc;
}
.ms-CommentFooter span {padding-left:18px;}
.ms-commentsWrapper {background:#fff; margin:5px; border:0px;}
.ms-blogedit a{	background:transparent; border:0px;}
.ms-blogedit a:hover{background:#ccc; border:0px;}
h3.ms-CommentHeader{padding-left:35px;
	background:url('/_layouts/images/menunewdiscussion.gif') top left no-repeat}
.ms-formtable {	border-top:1px dotted #ccc;	border-bottom:1px dotted #ccc;	padding:5px;}
/* cell holding the labels */
.ms-formlabel {	border:0px ;width:100px;}
/* label text */
.ms-formlabel h3.ms-standardheader{	padding-top:5px; font-weight:normal; text-align:right;}
/*wraps the form elements */
.ms-formbody {background:transparent;	border:0px;}
/* the title input field */
.ms-formbody span input{
background:#FEFFE2;
padding:2px 5px 1px 5px;
height:28px;
border:1px solid #ccc;
font:italic normal normal small/18px Arial;
margin:5px 0 5px 0;
}
/* text area for the comment body */
.ms-formbody span textarea{
font:italic normal normal small/18px Arial;
background:#FEFFE2;
padding:5px;
border:1px solid #ccc;
margin:0 0 5px 0;
}
/* submit button */
.ms-toolbar input.ms-ButtonHeightWidth2 {
	height:26px;
	border:2px solid #317A0C;
	background:#51AA25;
	color:#fff;
	font:italic normal x-small Georgia;
}
</style>

Note: To be sure this code does not affect the styling of other forms on the page and other web parts it would be best to open the page in SharePoint Designer and wrap the web part in a div some the styles can be targeted to affect only items inside the div.

davecavins

Dave is a SharePoint developer and graphic designer based in the DC area.

Leave a Reply

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