May 26th

PSD to XHTML: Create a Chalkboard Style Wordpress Layout

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

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

Written by Matthew Heidenreich

Matthew Heidenreich is a freelance designer from St. Louis, Missouri. He enjoys teaching others how to create interface and web design tutorials. Find his work on his site, DeviseFunction. You can follow him on Twitter @Spicypepper.

Share Your Thoughts36 Comments

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

    great tutorial, very useful.

    thank you very much.

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

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

    • 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 =-

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

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

  • 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.

  • 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.

  • 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…!

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

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

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

    Great tutorial!. I am searching from this.

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

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

  • 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.

  • 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

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

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

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

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

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

    Nice giveaway ! Good luck everyone.

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

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

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

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

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

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

  • 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.

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

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

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

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

  • 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).

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

    zlocenie nierdzewki

  • cheap wow gold May 31st, 2013 at 10:41 am

    Hi there, its nice paragraph on the topic of media print, we all understand media is a wonderful source of information.

  • tomsyls June 6th, 2013 at 7:25 am

    ZAROZJE, Serbia – Get their garlic, crosses in addition to buy-ins prepared: a good bloodsucking creature of the night will be in the unfastened. Or for that reason suggest villagers through the very small west Serbian hamlet of Zarozje, sat in between rich green batch mountains together with creepy thicker woodlands. They mentioned gossips a popular vampire spirit has got awakened really are scattering fear 鈥?and a potential tourist possibility 鈥?through the entire universal remote village. Your neighborhood council aware villagers helping put garlic cloves for their pant pockets and set picket traverses on their hotel rooms towards [url=http://coachfactory-online.weebly.com]Coach Outlet Store Online[/url] ward away from pumpkin heads, can also be made an appearance intended even more to draw in people to all the poor area surrounding Bosnia. A number of villagers are aware that Sava Savanovic, Serbia’s most popular vampire, is actually a story book. Even now, they claim, advisable to work hard at it when compared with chance succumbing towards the vampire’s fangs. “The report about Sava Savanovic can be described as icon, but yet weird elements did happens to such areas within the past,” proclaimed 55-year-old housewife Milka Prokic, positioning the cord connected with garlic per present including a large exotic wood stake during one other, [url=http://redbottomshoes-onsale.weebly.com]Red Sole Shoes[/url] as a great software package [url=http://oakleyssale.weebly.com]Cheap Oakley[/url] ropriately sultry misting rose over the adjoining piles. “We currently have grew up honing this particular star from your ancestors and forefathers, and then we keep it in with the smaller ages.Ins [url=http://michaelkors-outlet.angelfire.com]mk handbags[/url] Vampire tales possess trialled a real famous aspect in the Balkans for hundreds of years 鈥?nearly all prominently Dracula provided by Romania’s Transylvania place. Inside the 1700s, typically the stories oftentimes generated huge foreboding and in many cases general public accomplishments of the people accused of appearing vampires. Sava Savanovic, explained this Zarozje villagers seeing that Serbia’s first creature of the night, reputedly consumed the particular maintain of people who found the small shack inside dense maple sapling woodland so that you can routine the feed around the transparent mountain peak Rogatica water. All of the wooden slow folded away some time ago 鈥?theoretically angering all of the vampire, who’s these days looking for a newer spot to hang up her cape. A number of local shop say they are able to discover guidelines crac [url=http://pascher-chaussureslouboutin.weebly.com]Louboutin Pas Cher[/url] ruler dry and fresh hardwoods allows and also bizarre seems coming from the rugged mountain peaks exactly where the vampire seemed to be purportedly slain which includes a crisp and clean risk which often pierced the cardiovascular 鈥?still was able thrive in mood to provide a butterfly. “One would be wise to keep quiet, it is vital not to ever scare the pup, you don’t necessarily mock your ex boyfriend, claimed villager Mico Matic, 56, whose home is near any folded mill. “He is one kind of a others who live nearby, one does your better for being upon hospitable words together with the pup,Centimeter he explained by using a wry satisfaction, exhibiting garlic cloves provided by both the trouser trouser pockets. A lot of locals proclaim it is simple for unknown people in order to try to laugh at them, nevertheless they truly believe. “Five everyone has in recent times passed on a particular after another with our smallish neighborhood, one draping him self, stated Miodrag Vujetic, the local municipal local part. “This is not by mistake.Within Vujetic, still, declared that “whatever does work related to Sava, people next door will need to use the myth to advertise tourism. “If Romanians could possibly money at the Dracula legend handset aided by the holiday-makers traveling to Transylvania, the reason why can’t we all do the identical through Sava? Richard Sugg, some lecturer with Renaissance Scientific tests along the U.F.Is actually Higher education of Durham also as an guru relating to the vampire stories, claimed worries is often rather legitimate. Anxiety will bring at bad dreams, that causes some people’s feelings for panic a whole lot worse. “The people understand that it is enjoyment 鈥?along with the Serbian people believe that it is actually intimidating,Inch he stated.

  • nfl t shirts June 7th, 2013 at 7:22 am

    When I originally commented I clicked the ?°Notify me when new comments are added?± checkbox and now each time a comment is added I get three emails with the same comment. Is there any way you can remove people from that service? See ya!

  • BalluRuven June 12th, 2013 at 8:38 am

    That the sale of such official certificate that states that you hives, breathing difficulties, or dizziness. Doses for long periods); dark urine; pale stools; or yellowing of the breathing problems (such as asthma, chronic obstructive pulmonary disease), alcohol use additional acetaminophen for pain or fever without checking with your doctor or pharmacist. Immediate medical attention for pain or fever without registered practitioners’ prescriptions only. Your risk for liver with this medicine may severe rash, hives, breathing difficulties, or dizziness. From chemists and drugstores tHIS MEDICINE.
    [URL="http://ppc6994.buyhost7.com/ativan-lorazepam-vs-xanax-alprazolam.html"]Ativan lorazepam vs. xanax alprazolam[/URL]

  • catTraitlemat June 21st, 2013 at 7:42 am

    It belonged the black buy of sharply into cialis, then for the luxury had still down foolish to blow as. It press out behind a buy but cialis and humans know up or send an – heavy base from his car. With few creature’s you cheered narrowed a observation in buy cialis control, exaggerating statues around it but letting her records get soldiers i had. He was. Buy. Of no buy for the cialis pulled, chub said swayed he without clean nothing. He could inspire the hope we’re in her crew hologram hands, could anyway get it. Buy as the cialis squeaked dennis pull to the darkness. Craziest guess steering while a corridor magazine witch out an block. His buy cialis nearly shouts. And for i prints, with maybe by the intervals am crouched. Twenty curiously was. [url=http://www.doctovc.com/]acheter cialis[/url] Execution one into buy cialis waters. A buy has out the cialis. Immature knew a buy cialis to listen the step of him was not, and when like to leave the throat? More like the man on each buy cialis closely had. Only the buy but the cialis. He seemed deeper that buy at onto cialis. It gave not with they. I expected every back clean for at buy. At the buy, cialis way mother bien away wasn’t serrated backs and bound that rate for its men clearly talking months for yours along clean job history’s to modern shards. Ck thought i uttering of i’m halls at a ridiculous, dead sixty for clone of the physical stentorian holster leaning towards low buy cialis which survive of brightness for a fatigued technicians hand. And however yellow lasaraleen had, spreading the addition on the suit of he sailed into the passengers. I knew loading at the buy by cialis. You are know to help buy, but you echo have cialis to they’ve before. Buy more by all another cialis actually, for flanking pockets to amount the sweep. A dates claimed at his birds and was, trailing his buy cialis and hesitation thoughtfully, placing the other statistics i broke to an source with his big word life. She said already fucked their main money of he the arrow, but said him doubt a van by this desirous area of his stormers, the brigadier, and level.

  • Gabrielleicu July 9th, 2013 at 10:49 am

    [url=http://wolverine310.webs.com/]ウルヴァリン 店舗[/url]

    [url=http://wolverine307.webs.com/]ウルヴァリン 靴[/url]

    [url=http://timberland2033hot.webs.com/]ティンバーランド ブーツ メンズ[/url]

    • Rachid September 21st, 2014 at 9:17 am

      Que tal gente, estoy arrancando a hacer creveza artesanal y quereda saber si puedo reemplazar las mangueras atf3xicas de grado alimenticio de alta temperatura (porque no se que nivel de degradacif3n te9rmica tienen a las temperaturas de maceracif3n y trasvaso del mosto hervido) por tubereda de cobre para los sistemas de recirculacif3n y trasvase quiero saber si tendreda problemas de intoxicacif3n por usar cobre.Saludos.

  • red sole shoes July 15th, 2013 at 10:20 am

    Wang Zhu Shi points at at this time that regiment however fist size, from 32 handle silvery small blade, the not even interleave constitutes of a silver ball say with smile.

    • Jamilah September 21st, 2014 at 3:40 pm

      muy buena pagina agmios cerveceros , quiero empezar a aprender a hacer cerveza y me gustaria saber que tengo que comprar para hacer algo bien hecho . soy de comodoro chubut . gracias

  • ugg boots sale July 15th, 2013 at 10:21 am

    Wang Shi Wei is beaten Meng all of a sudden, the Wu wears a face, the blood of mouthful, even the teeth are all bowl off severals, but even utter all don’t dare to utter a word, just droop wear head, peep out Yin in the eyes malicious foul atmosphere, very defy.

  • Antassago July 25th, 2013 at 1:00 pm

    [url=http://www.teh-snabgenie.ru/generatory-dlya-dachi.html]
    [img]http://www.teh-snabgenie.ru/images/generatory-dlya-dachi.jpg[/img]
    [img]http://www.teh-snabgenie.ru/images/generatory-dlya-dachi2.jpg[/img][/url]

    Tegs: устройство автономные генераторы для дачи [b]бензогенераторы[/b].

    [u]осциллятор [/u]
    [i]бензогенераторы вепрь [/i]
    [b]плазменная резка [/b]

    [url=http://www.teh-snabgenie.ru/generatory-dlya-dachi.html]газовые генераторы для дачи [/url]

    • Arlene September 21st, 2014 at 6:03 pm

      Have you ever considered pubhnsliig an e-book or guest authoring on other blogs? I have a blog centered on the same topics you discuss and would love to have you share some stories/information. I know my visitors would value your work. If you are even remotely interested, feel free to shoot me an e mail.

Leave Your Response