Create a Chalkboard Style Wordpress by foxnrocks

VIEWS: 15 PAGES: 17

									      Home
      About
      Contact Us

      Home
      Graphics
      Inspiration
      Design
      Tutorials




                                        May 26th
 Advertise Here       Advertise Here


                                        PSD to XHTML: Create a Chalkboard Style
                                        Wordpress Layout
Matthew Heidenreich in Tutorials with 13 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.

           1    body {
           2      font: 11pt Arial, Helvetica, sans-serif;
           3      background: url(images/background_pattern.jpg) repeat;
           4      margin: 0;
           5      padding: 0;
           6    }
           7
           8    img {
           9      border: 0;
          10    }
          11
          12    #wrapper {
          13      width: 940px;
          14      margin: auto;
          15    }
          16
          17    #logo {
          18      display: inline-block;
          19      float: left;
          20      width: 272px;
          21      height: 171px;
          22      text-indent: -999999px;
          23      background: url(images/logo.jpg) no-repeat;
          24    }
          25
          26    #header {
          27      height: 112px;
          28      margin: 20px 0 0 0;
          29      overflow: hidden;
          30    }
          31
          32    #header ul{
          33      float: right;
          34      margin-top: 22px;
          35    }
          36
          37    #header ul li{
          38      display: inline-block;
          39      float: left;
          40      height: 48px;
          41      margin: 0px 0px 0px 5px;
          42    }
          43
          44    #home_btn a {
          45      display: block;
          46      width: 102px;
          47      height: 48px;
          48      text-indent: -999999px;
          49      background: url(images/home.jpg) no-repeat;
          50    }
          51
          52    #home_btn a:hover {
          53      background: url(images/home_active.jpg) no-repeat;
          54    }
          55
          56    #about_btn a {
          57      display: block;
          58      width: 102px;
          59      height: 48px;
          60      text-indent: -999999px;
          61      background: url(images/about.jpg) no-repeat;
          62    }
           63
           64   #about_btn a:hover {
           65    background: url(images/about_active.jpg) no-repeat;
          66   }
          67
          68   #contact_btn a {
          69     display: block;
          70     width: 102px;
          71     height: 48px;
          72     text-indent: -999999px;
          73     background: url(images/contact.jpg) no-repeat;
          74   }
          75
          76   #contact_btn a:hover {
          77     background: url(images/contact_active.jpg) no-repeat;
          78   }
          79
          80   .replace{
          81     position:relative;
          82     /* \*/
          83     overflow:hidden;
          84     /* */
          85   }
          86
          87   .replace span{
          88     display:block;
          89     position:absolute;
          90     top:0;
          91     left:0;
          92     z-index:1;
          93   }

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.

           1   #content {
           2     display: block;
           3   }
           4
           5   #categories {
           6     height: 58px;
           7     width: 940px;
           8     background: url(images/frame_top.jpg) no-repeat;
           9   }
          10
          11   #categories li {
          12     display: inline-block;
          13     margin: 20px 0 0 5px;
          14   }
          15
          16   #categories li a {
          17     display: inline;
          18     color: #d8c0a8;
          19     padding: 7px 17px 15px 13px;
          20     text-decoration: none;
          21   }
          22
          23   #categories li a:hover {
          24     height: 31px;
          25     width: 87px;
          26     padding: 7px 17px 15px 13px;
          27     background:url(images/category_hover.png) no-repeat;
          28   }
          29
          30   #content_frame {
          31    display: block;
          32    position: relative;
          33    height: 850px;
34
35        margin: -13px 0 0 0;
          background: url(images/border.jpg) repeat-y;
36    }
37
38    #content_area {
39      display: block;
40      height: 100%;
41      width: 875px;
42      margin-left: 33px;
43      padding: 20px;
44      background: url(images/green_board.jpg) repeat-y;
45    }
46
47    #latest_articles {
48      display: block;
49      width: 183px;
50      height: 38px;
51      background:url(images/latest_articles.jpg) no-repeat;
52    }
53
54    /* LEFT COLUMN */
55
56    .left {
57      float: left;
58      width: 560px;
59    }
60
61    .left ul {
62     position: relative;
63     margin: 0 0 0 -30px;
64
65    }
66
67    .left ul li {
68      display: inline-block;
69      list-style: none;
70      margin: 10px 20px 20px 0;
71    }
72
73    .left ul .comment {
 74       position: relative;
 75       float: right;
 76       margin: -3px 0 0 -25px;
 77       width: 29px;
 78       height: 32px;
 79       background:url(images/comment.png) no-repeat;
 80   }
 81
 82   @media screen and (-webkit-min-device-pixel-ratio:0) {
 83   /*These are alternate styles for Safari */
 84
 85   .left ul .comment {
 86     position: relative;
 87     float: right;
 88     margin: -243px 0 0 -25px;
 89     width: 29px;
 90     height: 32px;
 91     background:url(images/comment.png) no-repeat;
 92   }
 93
 94   }
 95
 96   .left ul li .comment a {
 97     color: #000;
 98     font-weight: bold;
 99     text-align: center;
100     text-decoration: none;
101     margin: 0px 6px 0px;
102   }
103
104   .left ul li img {
105     float: left;
106   }
107
108   .datetitle {
109     float: left;
110     position: relative;
111     margin: 160px 0 0 -234px;
112   }
113
114   .title {
115     width: 207px;
116     height: 37px;
117     background: url(images/title_back.png) no-repeat;
118   }
119
120   .title span {
121     display: block;
122     padding: 10px;
123     font: 13pt Arial, Helvetica, sans-serif;
124     color: #FFFFFF;
125   }
126
127   .date {
128    width: 90px;
129    height: 17px;
         130
         131   } background:url(images/date_back.png) no-repeat;
         132
         133   .date span {
         134     color: #FFFFFF;
         135     padding: 6px;
         136   }
         137
         138   /* RIGHT SIDEBAR */
         139
         140   #right {
         141    width: 290px;
         142    height: 100%;
         143    float: left;
         144       padding: 12px;
         145       margin: -20px 1px 0 0;
         146       position: relative;
         147   }
         148
         149   #sponsors {
         150     display: block;
         151     width: 167px;
         152     height: 52px;
         153     background:url(images/sponsors.png) no-repeat;
         154   }
         155
         156   #search_title {
         157     display: block;
         158     width: 127px;
         159     height: 32px;
         160     margin: 15px 0 10px 0;
         161     background:url(images/search.png) no-repeat;
         162   }
         163
         164   #search_field {
         165     width: 283px;
         166     height: 49px;
         167     margin: 0 0 0 -9px;
         168     postion: relative;
         169     background: url(images/search_field.jpg) no-repeat;
         170   }
         171
         172   #search_field input {
         173     width: 170px;
         174     height: 20px;
         175     border: 0px;
         176     color: #515151;
         177     margin: 10px 0 0 50px;
         178   }
         179
         180   .social ul {
         181     margin: 30px 0 0 -35px;
         182   }
         183
         184   .social ul li {
         185    display: inline;
         186   }

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:

            1   /* FOOTER AREA */
            2
            3   #frame_btm {
            4    height: 83px;
            5       background: url(images/frame_btm.jpg);
            6   }
            7
            8   #footer {
            9     font: 10pt Arial, Helvetica, sans-serif;
           10     display: block;
           11     height: 84px;
           12     padding: 15px 0 0 0;
           13     background: url(images/footer.jpg) no-repeat;
           14   }
           15
           16   #footer ul li {
           17     color: #D5D5D5;
           18     display: inline-block;
           19   }
           20
           21   #footer ul li a {
           22     color: #D5D5D5;
           23     text-decoration: none;
           24   }
           25
           26   #footer ul li a:hover {
           27    color: #D5D5D5;
           28    text-decoration: underline;
          29
          30   }
          31   #footer ul li span {
          32     color: #D5D5D5;
          33     margin: 0 11px 0 11px;
          34   }
          35
          36   #copyright {
          37    display: block;
          38    float: right;
          39    text-align: right;
          40    margin: 0 30px 0 0;
          41
          42   }

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
      PSD to XHTML: Create a Chalkboard Style Wordpress Layout
      Create a Chalkboard Style Wordpress Layout in Photoshop
      Underwater Content Box Design in Photoshop
      Create a Colorful Candy Store Website Layout in Photoshop
      40 Beautiful & Creative Poster Designs for Your Inspiration
      Beautiful Music Streaming Website Design in Photoshop




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.

      Digg
      designfloat
      dell
      stumble
      twitter
      rss
      facebook

Share Your Thoughts13 Comments
      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

Leave Your Response
Name
Email
Website


Message



Subscribe
Get the latest updates via our RSS, Email, or twitter feed.

0
Subscribers

1366
Followers
                                     Popular Posts
                    Advertise Here
                                       PSD to XHTML: Create a Chalkboard Style Wordpress Layout
                                       Create a Chalkboard Style Wordpress Layout in Photoshop
                                       Underwater Content Box Design in Photoshop
                                       Create a Colorful Candy Store Website Layout in Photoshop
    40 Beautiful & Creative Poster Designs for Your Inspiration
    Beautiful Music Streaming Website Design in Photoshop

Other Resources
    1stwebdesigner
    Design Bump
    DesignM.ag
    Designerslist
    InstantShift
    HV-Designs
    Noupe
    PSD Vault
    reADactor
    [Re]Encoded
    Smashing Magazine
    Six Revisions
    Text Effects
    WebDesign Ledger
    Royalty Free Images

Affiliates
    Flyer Printing
    best website hosting
    Free Business Cards
    cheap hosting plans
    PSD to HTML
    Free Business Cards
    GreenGeeks Review
    web hosting
    website host services
    VoIP
    Coupon Codes
    Your Link Here?




Stay in Touch
   RSS Feed
   Email Subscription
   Twitter

Find Out More
   About
   Advertise
   Contact us

								
To top