Some minor design fixes for my new wordpress theme

In this tutorial I’ll make some minor design fixes to my page. First I’ll add some border to my posts then some icons to my sidebar. Watch the video to see how I have plan my little design fixes and drawing a small arrow pixel icon.

So after i have made this little plans I show in the video let me tell you what I have changed in my design.

First I added 1 px border to the posts in my CSS:

.post{padding: 5px 5px 5px 5px;min-height:100px;

width:600px;

float:left;

background:#eeeeee;

margin-top:7px;

border:1px dashed #ced8d9; – 1px border all around my post is here

border-bottom:3px solid #83b639;

}

Next I added a 1px dotted border bottom for all my lists in the sidebar and the arrow image from CSS again:

.sidebar ul ul li{padding: 0; line-height: 24px;border-bottom: 1px dotted #888888;  – dotted border

text-decoration:none;

background-image:url(images/sidebar/arrow.jpg);  – and the arrow image

background-repeat:no-repeat; – no repeat is important here

padding-left:10px;

}

After this is done, I added the folder icon also in my CSS:

.sidebar ul li h2{ height:25px;font-family: Georgia, Sans-serif;

font-size: 15px;

padding-left:25px;

text-decoration:none;

background-image:url(images/sidebar/folder.jpg);  – the folder icon image is here

background-repeat:no-repeat;

}

Well that’s all, I hope you’ve liked this tutorial and you learned some useful thing here.

I’ll wait for your comments If any. Stay with us folks next time I am planing to design 404 web page.