CSS -How I Did It:Part 3

Posted on Oct 2nd 2009 | 0comments

We have arrived on the final part of this series on CSS. In my previous posts, I defined the blog structure in layout.css while web typography was defined in typography.css. In this concluding part, I will show you how I styled the remaining features of my blog.

Let us first look at styling forms on this blog.

 
   /* Forms */
form {
	clear: both;
	margin-right: 20px;
	padding: 0;
	width: 80%;
}
fieldset {
	border: 1px solid #ccc;
	margin-top: 30px;
	padding: 16px 20px;
}
fieldset legend {
	background:#fff;
	color: #e32;
	font-size: 160%;
	font-weight: bold;
}
fieldset fieldset {
	margin-top: 0px;
	margin-bottom: 20px;
	padding: 16px 10px;
}
fieldset fieldset legend {
	font-size: 120%;
	font-weight: normal;
}
fieldset fieldset div {
	clear: left;
	margin: 0 20px;
}
form div {
	clear: both;
	margin-bottom: 1em;
	padding: .5em;
	vertical-align: text-top;
}
form div.input {
	color: #444;
}
form div.required {
	color: #333;
	font-weight: bold;
}
form div.submit {
	border: 0;
	clear: both;
	margin-top: 10px;
	margin-left: 140px;
}
label {
	display: block;
	font-size: 110%;
	padding-right: 20px;
	text-align:left;
}
input, textarea {
	clear: both;
	font-size: 140%;
	font-family: "frutiger linotype", "lucida grande", "verdana", sans-serif;
	padding: 2px;
	width: 100%;
}
select {
	clear: both;
	font-size: 120%;
	vertical-align: text-bottom;
}
select[multiple=multiple] {
	width: 100%;
}
option {
	font-size: 120%;
	padding: 0 3px;
}
input[type=checkbox] {
	clear: left;
	float: left;
	margin: 0px 6px 7px 2px;
	width: auto;
}
input[type=radio] {
	float:left;
	width:auto;
	margin: 0 3px 7px 0;
}
div.radio label {
	margin: 0 0 6px 20px;
}
input[type=submit] {
	display: inline;
	font-size: 110%;
	padding: 2px 5px;
	width: auto;
	vertical-align: bottom;
}

I developed something like a personal CMS so that it becomes easy for me to add and edit blog posts. Hence, it was necessary to style forms so as to make everything more easy and systematic.

Most of the form styling has been taken from CSS provided by CakePHP. I just modified it according to my blog structure.

Now, let us take a look at comment section styling.

 
/* Comment System Styling */

.comment {
	width:500px;
	position:relative;
	border: 1px dotted #ccc;
	border-width: 1px 0px 0px 0;
	clear: both;
	display:block;
	margin-left:20px;

}

.comment p {
	float: left;
	clear: left;
}

.vote {
	width: 50px;
	height: 20px;
	background-color:#f2f2f2;
	text-align: center;
	font-size: 20px;
	font-weight: bold;
	padding: 15px 0 15px 0;
	float: right;
}

.cast_vote {
	width:50px;
	height:50px;
	float: right;
	font-family:"Times New Roman", Times, serif;
	overflow:hidden;
}

.cast_vote a {
	color:#E56717;
	font-size:8px;
	font-weight:bold;
	text-transform:uppercase;
}

.cast_vote a:hover {
	color:#06C;
	text-decoration:underline;
	
}

.paginate{
	position:relative;
}

.userinfo{
	text-align:center;
	display:block;
	color:#06C;
	}

.usercomment{
	width:300px;
	position:relative;
	margin-top:2px;
	text-align:left;
}	

.username {
	font-family:"Times New Roman";
	font-weight:bold;
	
}

p.commentdate{
	line-height:2px;	
}

.thumbsup {
	width:20px;
	height:20px;
	color:#E56717;
	padding-right:50px;
}

.thumbsdown {
	
	width:20px;
	height:20px;
	color:#ffffff;
	color:#E56717;
	padding-right:50px;
}

Comment section styling was basically divided into three parts:

Gravatar image and username styling

Comment styling

Vote system styling

However, I am not quite satisfied with the current comment section styling. I will surely improve it in the near future.

Finally, let us take a look at sidebar styling

 
/* Sidebar Styling */

.sideimage {
	margin-left:25px;
	margin-right:10px;
	
}

.sidelink{
	font-family:"Times New Roman", Times, serif;
	font-size:12px;
	font-weight:bold;
	color:#E56717;
	text-decoration:underline;
	margin-left:30px;
	margin-right:10px;
}

.sidelinkbrowsers{
	font-family:"Times New Roman", Times, serif;
	font-size:12px;
	font-weight:bold;
	color:#E56717;
	text-decoration:underline;
	margin-left:35px;
	margin-right:25px;
}

My main aim in sidebar styling was to have equidistant icons and links so as to give a more neat look to the blog

So, that's it guys! This is how I went about styling my blog. I am looking forward for your suggestions to improve my blog. Do tell me about them in the comments section below.

See you in my next post!..Adios!

Share