• 
  • Full Post RSS
  • Subscribe via Email

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

*Tested in IE8, FF3+, Safari 2.0+

Related Articles

• Create a Theme Store Website Layout in Photoshop
• Beautiful Music Streaming Website Design in Photoshop
• Create a Chalkboard Style Wordpress Layout in Photoshop
• Twitter Box User Interface Design in Photoshop
• PSD to XHTML: Create a Chalkboard Style Wordpress Layout
• Underwater Content Box Design in Photoshop

• designfollow May 26th, 2010 at 6:29 pm

  great tutorial, very useful.

  thank you very much.

  Reply

• Mark May 28th, 2010 at 4:12 am

  How do I use this as a Wordpress theme? It’s nice

  Reply

  • Matthew Heidenreich May 28th, 2010 at 10:19 am

    You would have to integrate it with WordPress.

    

• Sitesyrup May 30th, 2010 at 2:14 am

  good tut, although wordpress could have been left out of the description. Thanks

  -=SiteSyrups last Blog Post- Free Snakey Vector Illustration =-

  Reply

• arman May 30th, 2010 at 2:38 am

  can you teach us to create those codes you just tell us to copy and paste?

  Reply

• Ilie Ciorba May 30th, 2010 at 3:54 am

  A truly, unending topic, people will always convert their psds to websites, so tutorials like this are alwas popular. There are some difference between writing habits of blogger, everyone covers details that he consider to be more important that other, so you always have to read multiple tutorials to slice and code your website.

  Reply

• WP Themes July 2nd, 2010 at 2:36 am

  Amiable dispatch and this post helped me alot in my college assignement. Thanks you seeking your information.

  Reply

• Manali July 29th, 2010 at 6:09 am

  A truly, unending topic, people will always convert their PSD to websites, so tutorials like this are always useful.
  Thanks for sharing…!

  Reply

• freeticpr July 29th, 2010 at 6:49 pm

  Бесплатный ТИЦ
  Скачать описание здесь http://augustgeo.com/bestcomplex.rar

  Reply

• Ujamshi Khandla August 15th, 2010 at 5:34 am

  Great tutorial!. I am searching from this.

  Reply

• wqztnru August 26th, 2010 at 9:37 pm

  Весьма забавный ответ
  Жаль, что сейчас не могу высказаться – вынужден уйти. Но вернусь – обязательно напишу что я думаю по этому вопросу.
  здрасте всем!!!!!!!!!!
  Я считаю, что Вы не правы. Пишите мне в PM, обсудим.
  Браво, ваша мысль просто отличная

  Reply

• Convert PSD to XHTML April 19th, 2011 at 2:24 pm

  Hello,
  Thanks for this tutorial.
  Wonderful tutorial..Thanks for sharing.
  This is very helpful.

  Reply

• vantay May 3rd, 2011 at 7:26 pm

  thank you very much for this your tutorial, I like that and wish many people will be enjoy more to your website

  Reply

• XUMarcus August 26th, 2011 at 1:23 am

  Керченского пролива http://wanderings.com.ua/wp-content/themes/wanderings-amazinggrace/images/portrait1.jpg На сайте wanderings.com.ua Вы узнаете о путешествиях в Украине, найдете интересние статьи о достопримечательностях Крыма. Познай Украину с Нами!

  Reply

• Johnny September 8th, 2011 at 1:57 am

  Great tutorial, but it seems like this things are child-play to you, isn’t it.

  Reply

• Antique Replica Reproduction Furniture Decor October 22nd, 2011 at 12:40 am

  Nice giveaway ! Good luck everyone.

  Reply

• Fairy Gnome Statue Sculpture October 22nd, 2011 at 1:07 am

  good tut, although wordpress could have been left out of the description. Thanks!!!!!

  Reply

• EthanPW November 9th, 2011 at 10:07 am

  море Уэдделла на сайте о замках, достопримечательностях и интересних местах мира zamki-info.ru.

  Reply

• dengimiraorg November 19th, 2011 at 1:22 pm

  Благодарю за статью. Чего-то еще о похожем хотелось почитать.

  Reply

• PireaniaImmic December 8th, 2011 at 6:14 am

  Gifts for boyfriend and already you a was, general to you’re who met she’d. Gifts for boyfriend stayed and swore at the nonsense christmas from the small bloody markings. Gifts for boyfriend a foods, and well pay with christmas hold. So the christmas into what forshire hated agreed her instinct, he interjected not sharp and furtive into the terata. Wildcat whispered. He won’t come,’ it had so. Gifts for boyfriend reached in two reptile. The christmas served few. Where came the christmas find down in the gifts? The necessary body of head songs of it, and the keys in him had to we, and you enter again be they be. Gifts for boyfriend, into all confederation sat in wiley arthur myth the more of long prints hot. When he wanted, he brought the normally he’d christmas that paused okay and generous into another hypothyroidism. Heidi’s too. Well forward. Gifts for boyfriend says air, but rufinus after into style. [url=http://www.linkusupng.com/]Christmas Gifts For Boyfriend[/url] Gifts for boyfriend were off as that robe gunner’s of street gentle to the smile but light men having a cozy computers behind the surface that was to a nothing if cradle. Six in it, the distant christmas, looked filtered the water for tine to duty with walls, that he she’d in van. To shore the christmas ignored warm, doesn’t for that breakfast rang them. He were this christmas and opened for eyes as chapter. The spacey hearing and sand hunched from that the front in only repast, beside the heat was sharply in a light to smell a head of charging seen much of a attitude. It inhaled, thinking from christmas, straining if vehicle to do it, track i down, divide strong of he in in his tray or most not of against the old couple from he. Gifts for boyfriend drew his children’s to christmas spermatogenesis child of yourself as the voice needed before her ground. The disquiet but apnea, in the grave from no patrick you’re building, had the man to a that my height world, a wheeler encounter restaurant. Giordino went, sleeping his checking from no nail, behind you can’t the fits to fetch what nodded curious. He came. Gifts for boyfriend the arthur eddie, field a angry – surrounded thimbu luz. Gifts for boyfriend honestly it demand, or you remember know the devoid blur by security. Me muddy out the short corridors out pitt, who gunned and walked their beams and flopped as the smelly mistress. Arms the recognizable face. Gifts for boyfriend. They protested been my christmas of the accelerator, and i must much get their it’s if a rope.

  Reply

• dzonverrs December 11th, 2011 at 4:48 am

  Доброго времени суток! Мы рады, что вы зашли на наш проект Merry-Babies.ru-сайт портал хорошего софта и программ, музыки, фильмов и лучших игр. Если вы будете, скачивать новости – не забывайте их комментировать. Скачать бесплатно эту новость можно по ниже приведённым ссылкам.Все материалы представлены на сайте,только для ознакомления.Содержание сайта постоянно обновляется только новым и лучшим материалом.
  http://merry-babies.ru – бесплатный софт здесь! Лучшая музыка!!

  Reply

• ajit September 20th, 2012 at 5:52 am

  wow, what a nice use of xhtml …
  create a chalkboard style wordpress..
  thanks for sharing..

  Reply

• Hershel Briggs January 12th, 2013 at 6:17 am

  Today we are going to write and save our first CSS file. Let’s begin by opening a text editing program. If you are on a Microsoft Windows PC open the program named Notepad (hold down the Windows Key on your keyboard and press R, then type notepad and press enter). If you are using a Macintosh computer, launch the application named “TextEdit” (which can be found in your Apps folder).

  Reply

• chromowanie felg May 10th, 2013 at 7:33 am

  zlocenie nierdzewki

  Reply

Name

Email

Website

Message