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.

Related posts:

1. Styling SharePoint Blog Comments
2. Styling the MOSS horizontal navigation menu
3. Switch List Displays with JQuery and CSS

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 */
h4.ms-CommentTitle{font-size:x-small;border:0px;}
/* wraps the body of each comment */
div.ms-CommentBody {
	background:url('../../images/comm_top.gif') top 0px no-repeat;
	margin-bottom:12px;
	padding:18px 0 0 0;
}
/* wraps the text of each comment */
div.ms-CommentBody div {
	border:1px solid #ccc;
	border-top:0px;
	padding:15px;
	line-height:18px;
	}
/* wraps the meta info (author, date, etc.)	for each comment */
.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;}

/* wraps all comments */
.ms-commentsWrapper {
	background:#fff;
	margin:5px;
	border:0px;
}
/* header style for 'Comments' and 'Add a Comment' */
h3.ms-CommentHeader{
	padding-left:35px;
	background:url('/_layouts/images/menunewdiscussion.gif') top left no-repeat
}
</style>

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.

Related posts:

1. Styling SharePoint Blog Comments: Part 2
2. Adding Comments to a List Part 1
3. Styling the MOSS horizontal navigation menu