freebies: PSD to XHTML :Create a Chalkboard Style Wordpress Layout

In this tutorial you will learn how to convert the Chalkboard Style Wordpress Layout PSD to XHTML. If you have any questions about this tutorial be sure to ask in the comments. Also, remember with all the tutorials, the source files are available for download.

Coded Preview

Tutorial Resources

Create a Chalkboard Style WordPress Layout in Photoshop

Lets Get Started

1. The first thing we need to do is set up our folders. Create a folder called “xhtml”, and then create another folder inside it named “images”. The xhtml folder is where we will be saving our html and css files. So next open up Dreamweaver and create a new html document. Choose XHTML 1.0 Strict.dtd from the doc type option – then save it as index.html.

2. Next create a CSS file in the same fashion, and save it to your xhtml folder with the name “style.css”. You could save it to a separate folder, but for this tutorial it will be easiest to keep in the same directory as your html file.
3. So far your file structure will look something like the following:

4. We want the CSS file to link to our index file, so we need to add the following link tag in our header before the closing head tag.

5. Before we get into the coding, lets go ahead and get all our images ready for the design. Open up your template in Photoshop and then proceed to crop or slice the following images in your design. Images that are saved with “.png” need to be transparent, so hide all layers under given item. Filenames are above each image.

“home.jpg”

“home_active.jpg”

“about.jpg”

“about_active.jpg”

“contact.jpg”

“contact_active.jpg”

“background_pattern.jpg”

“border.jpg”

“category_hover.png”

“comment.png”

“date_back.jpg”

“facebook_icon.jpg”

“flickr_icon.jpg”

“rss_icon.jpg”

“footer.jpg”

“frame_btm.jpg”

“frame_top.jpg”

“green_board.jpg”

“latest_articles.jpg”

“logo.jpg”

“search.png”

“search_field.jpg”

“sponsors.png”

“title_back.png”

“twitter_icon.jpg”

6. Now that you have your images prepared and ready, we want to get into the code. Starting with the header, copy and paste the following CSS into your CSS file.

body {
font: 11pt Arial, Helvetica, sans-serif;
background: url(images/background_pattern.jpg) repeat;
margin: 0;
padding: 0;
}

img {
border: 0;
}

#wrapper {
width: 940px;
margin: auto;
}

#logo {
display: inline-block;
float: left;
width: 272px;
height: 171px;
text-indent: -999999px;
background: url(images/logo.jpg) no-repeat;
}

#header {
height: 112px;
margin: 20px 0 0 0;
overflow: hidden;
}

#header ul{
float: right;
margin-top: 22px;
}

#header ul li{
display: inline-block;
float: left;
height: 48px;
margin: 0px 0px 0px 5px;
}

#home_btn a {
display: block;
width: 102px;
height: 48px;
text-indent: -999999px;
background: url(images/home.jpg) no-repeat;
}

#home_btn a:hover {
background: url(images/home_active.jpg) no-repeat;
}

#about_btn a {
display: block;
width: 102px;
height: 48px;
text-indent: -999999px;
background: url(images/about.jpg) no-repeat;
}

#about_btn a:hover {
background: url(images/about_active.jpg) no-repeat;
}

#contact_btn a {
display: block;
width: 102px;
height: 48px;
text-indent: -999999px;
background: url(images/contact.jpg) no-repeat;
}

#contact_btn a:hover {
background: url(images/contact_active.jpg) no-repeat;
}

.replace{
position:relative;
/* \*/
overflow:hidden;
/* */
}

.replace span{
display:block;
position:absolute;
top:0;
left:0;
z-index:1;
}

7. Then in your HTML File you will have something that looks like the following:

8. Next we want to set up our chalkboard. Add the following chunk of code to your CSS file. You will notice an “@media screen” option in this stylesheet. What this does is gives a different set of styles for users using Safari in order to make it look the same across all browsers.

#content {
display: block;
}

#categories {
height: 58px;
width: 940px;
background: url(images/frame_top.jpg) no-repeat;
}

#categories li {
display: inline-block;
margin: 20px 0 0 5px;
}

#categories li a {
display: inline;
color: #d8c0a8;
padding: 7px 17px 15px 13px;
text-decoration: none;
}

#categories li a:hover {
height: 31px;
width: 87px;
padding: 7px 17px 15px 13px;
background:url(images/category_hover.png) no-repeat;
}

#content_frame {
display: block;
position: relative;
height: 850px;
margin: -13px 0 0 0;
background: url(images/border.jpg) repeat-y;
}

#content_area {
display: block;
height: 100%;
width: 875px;
margin-left: 33px;
padding: 20px;
background: url(images/green_board.jpg) repeat-y;
}

#latest_articles {
display: block;
width: 183px;
height: 38px;
background:url(images/latest_articles.jpg) no-repeat;
}

/* LEFT COLUMN */

.left {
float: left;
width: 560px;
}

.left ul {
position: relative;
margin: 0 0 0 -30px;

}

.left ul li {
display: inline-block;
list-style: none;
margin: 10px 20px 20px 0;
}

.left ul .comment {
position: relative;
float: right;
margin: -3px 0 0 -25px;
width: 29px;
height: 32px;
background:url(images/comment.png) no-repeat;
}

@media screen and (-webkit-min-device-pixel-ratio:0) {
/*These are alternate styles for Safari */

.left ul .comment {
position: relative;
float: right;
margin: -243px 0 0 -25px;
width: 29px;
height: 32px;
background:url(images/comment.png) no-repeat;
}

}

.left ul li .comment a {
color: #000;
font-weight: bold;
text-align: center;
text-decoration: none;
margin: 0px 6px 0px;
}

.left ul li img {
float: left;
}

.datetitle {
float: left;
position: relative;
margin: 160px 0 0 -234px;
}

.title {
width: 207px;
height: 37px;
background: url(images/title_back.png) no-repeat;
}

.title span {
display: block;
padding: 10px;
font: 13pt Arial, Helvetica, sans-serif;
color: #FFFFFF;
}

.date {
width: 90px;
height: 17px;
background:url(images/date_back.png) no-repeat;
}

.date span {
color: #FFFFFF;
padding: 6px;
}

/* RIGHT SIDEBAR */

#right {
width: 290px;
height: 100%;
float: left;
padding: 12px;
margin: -20px 1px 0 0;
position: relative;
}

#sponsors {
display: block;
width: 167px;
height: 52px;
background:url(images/sponsors.png) no-repeat;
}

#search_title {
display: block;
width: 127px;
height: 32px;
margin: 15px 0 10px 0;
background:url(images/search.png) no-repeat;
}

#search_field {
width: 283px;
height: 49px;
margin: 0 0 0 -9px;
postion: relative;
background: url(images/search_field.jpg) no-repeat;
}

#search_field input {
width: 170px;
height: 20px;
border: 0px;
color: #515151;
margin: 10px 0 0 50px;
}

.social ul {
margin: 30px 0 0 -35px;
}

.social ul li {
display: inline;
}

9. Now your HTML will look like the following for the chalkboard area of your design (the content area).

10. In our unordered list, each “li” tag will look like the following for each individual post.

11. The last thing we need to create is our footer. Add the following to your CSS file for your footer styles:

/* FOOTER AREA */

#frame_btm {
height: 83px;
background: url(images/frame_btm.jpg);
}

#footer {
font: 10pt Arial, Helvetica, sans-serif;
display: block;
height: 84px;
padding: 15px 0 0 0;
background: url(images/footer.jpg) no-repeat;
}

#footer ul li {
color: #D5D5D5;
display: inline-block;
}

#footer ul li a {
color: #D5D5D5;
text-decoration: none;
}

#footer ul li a:hover {
color: #D5D5D5;
text-decoration: underline;
}

#footer ul li span {
color: #D5D5D5;
margin: 0 11px 0 11px;
}

#copyright {
display: block;
float: right;
text-align: right;
margin: 0 30px 0 0;

}