PSD to XHTML: Create a Chalkboard Style

Wordpress Layout
Matthew Heidenreich in Tutorials with 33 comments

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;

12. When your CSS is finished, you want your html to look something like the following:
Final Result