Webdevtuts » series http://www.webdevtuts.net Making tutorials fun and easy! Mon, 06 Sep 2010 17:54:04 +0000 en hourly 1 http://wordpress.org/?v=3.0.1 PSD to WordPress Series Part 3: Final Tutorial http://www.webdevtuts.net/wordpress/psd-to-wordpress-series-part-3-final-tutorial/ http://www.webdevtuts.net/wordpress/psd-to-wordpress-series-part-3-final-tutorial/#comments Mon, 30 Nov 2009 22:19:57 +0000 Marcell http://www.webdevtuts.net/?p=635

Ok Were finally on the last step on how to transform a photoshop mockup into a working wordpress theme. For this tutorial you will need

1.Stalker Naked WordPress theme!-By Elliot Jay Stocks
2. Local Server to run wordpress xxamp
3. The html file fromPSD to wordpress part 2

Ok so now we will begin the final part to PSD to WordPress series. You should now have the stalkers wordpress downloaded and ready to use. Also before we begin make sure you have xxamp or a local server up and running so you can see changes we make to our wordpress theme.

Open up your primary code editor. I will used dreamweaver for this tutorial. If you do not have dreamweaver then you can download the free trial or use a free code editor like
notepad++ for windows and for Komondo for mac

Now inside the stalker folder you should have 15 PHP files but we will only use 7 of them. The reason we will only use 7 because most of the steps we will cover today can be used on other pages. So after this tutorial you should have and idea or clear vision on what to do for the other wordpress pages.

Note: You do not have to delete the ones we do not use

The files we will use/need for this tutorial are

  • archive.php
  • footer.php
  • header.php
  • index.php
  • page.php
  • sidebar.php
  • single.php

archive.php – The page that shows after you’ve click on a category name
header.php – for all JavaScript or Stylesheet imports
index.php Main/Home page
page.php Single page
sidebar.php sidebar
single.php after you click on a post its takes you to the single.php page

Since we’ve already coded the theme into xhtml/css we will just be copying and pasting a lot of things and changing some of our HTML markup into php functions.

Step 1

First thing is first. copy your entire style.css to your wordpress style.css

Note: Copy everything after Code start. Everything above that is the css reset and has to go into another style sheet
copy style

Step 2

Now lets place the css reset code into the right file. Click on the Style>>Css>>Reset.
delete reset wordpress

Delete everything in the reset file.
reset before

Now copy everything above code starts and place it into the wordpress reset file then save it.
reset after

You should have something like this so far
preview

Step 3

Now that our css and reset files is taken care of its time to get the ball rolling and get our wordpress theme looking good. Open up your index.html file (From part2 psd wordpress series) and header.php file. Copy the highlighted code into your header.php file.

copy code

<div id="header">

<div id="main_nav">
<ul>
<li><a href="http://www.webdevtuts.net">Home</a></li>
<?php wp_list_categories('title_li='); ?>
</ul>
</div><!--end main_nav-->

<div class="clear"></div>

<div id="logo"></div><!--end logo-->

</div><!--end header-->

<div class="clear"></div>

<div id="Container">

Step 4

Now open your index.php file.

First thing you should do is add

right below the header tag then close it right above the sidebar tag.
add wrap

This code below is our post section. We will substitute some XHTML markup into wordpress php functions

Below is the entire section for the post area (Just the normal HTML)
normal html

Below is the wordpress markup that we will be using
Wordpress html

Copy the code below into your index.php

<div class="post_break">
<div id="post_thumb"><img src="<?php echo get_post_meta($post->ID, 'Thumbnail',true) ?>" alt="Post Image" id="postbreakimg" /></div>
<h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
<div id="post_info"><p>Posted in <?php the_category(', ') ?> <?php the_time('F jS, Y') ?> by <?php the_author_posts_link(); ?></p></div>
<div id="post_text"><?php the_excerpt('Read the rest of this entry &raquo;'); ?></div>
<a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>" class="post_more">Read More</a>
</div><!--end post break-->

<div class="clear"></div>

Note: Below is information to help you better understand what I did and what changes I made.

So I will start off with the div class=”Post_break”. I used div class because there are mutiple post, and when you have mutiple things using the same styling then it is good to use class
instead of

plus it will keep your code vaild.

For the image I kept the div id=”post_thumb but I changed the inside to

<img src="<?php echo get_post_meta($post->ID, 'Thumbnail',true) ?>" alt="Post Image" id="postbreakimg" />

The code above tells wordpress to grab the thumbnail image. Whenever you would create a new post you would insert the word Thumbnail into your custom fields and link to the direct image and there is where your image will appear.

For the second level heading(H2) I change the inside of the h2 tags to

<a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a>

For the post info section I changed the inside of the div to

<p>Posted in <?php the_category(', ') ?> <?php the_time('F jS, Y') ?> by <?php the_author_posts_link(); ?></p>

The code above basically tells wordpress to find out what category the post was written for then the date of publish and finally the author name that has written that post.

For div id=”post_text” I’ve added

<?php the_excerpt('Read the rest of this entry &raquo;'); ?>

which tells wordpress to get the short description of the post instead of the entire post

For the read more link I’ve added

<a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>" class="post_more">Read More</a>

which tells wordpress that you would like to read more and it will take you to the single page.

Finally I ended the post section then cleared the floats.

The index.php page is finally completed in here is what your page should like.
preview 2

Step 5

Now that our header.php, index.php are completed we will now work on our sidebar.php page. Open your sidebar.php page.

Note: remember that most of the divs and markup codes are codes/tags I grab are from the original index.html file

Scroll down the index.html page until you see the sidebar tag. Copy div id=”sidebar” into your sidebar.php file. Add the code right below the php header tag
sidebar example

Now lets add our advertisement 125×125 into our wordpress layout.
sidebar layout

Copy the code below

<h2>Sponsors</h2>
<ul id="adverts">
<li><a href="<?php bloginfo('url'); ?>"><img src="<?php bloginfo('stylesheet_directory'); ?>/images/ad125.jpg" alt="125x125 banner ad" /></a></li>
<li><a href="<?php bloginfo('url'); ?>"><img src="<?php bloginfo('stylesheet_directory'); ?>/images/ad125.jpg" alt="125x125 banner ad" /></a></li>
<li><a href="<?php bloginfo('url'); ?>"><img src="<?php bloginfo('stylesheet_directory'); ?>/images/ad125.jpg" alt="125x125 banner ad" /></a></li>
<li><a href="<?php bloginfo('url'); ?>"><img src="<?php bloginfo('stylesheet_directory'); ?>/images/ad125.jpg" alt="125x125 banner ad" /></a></li>
</ul><!--adverts-->

<a class="side_more" href="">Advertise here</a>

<div class="clear"></div>

Note: Below is information to help you better understand what I did and what changes I made.

In the normal HTML I just linked the images to the image folder but with wordpress you have to use a custom php function which calls the images.

Now lets add the Flickr images to our theme. Copy the code below

<h2>Flickr</h2>
<ul id="flickr">
<li><a href="<?php bloginfo('url'); ?>"><img src="<?php bloginfo('stylesheet_directory'); ?>/images/flk_samp.jpg" alt="flickr" /></a></li>
<li><a href="<?php bloginfo('url'); ?>"><img src="<?php bloginfo('stylesheet_directory'); ?>/images/flk_samp.jpg" alt="flickr" /></a></li>
<li><a href="<?php bloginfo('url'); ?>"><img src="<?php bloginfo('stylesheet_directory'); ?>/images/flk_samp.jpg" alt="flickr" /></a></li>
<li><a href="<?php bloginfo('url'); ?>"><img src="<?php bloginfo('stylesheet_directory'); ?>/images/flk_samp.jpg" alt="flickr" /></a></li>
<li><a href="<?php bloginfo('url'); ?>"><img src="<?php bloginfo('stylesheet_directory'); ?>/images/flk_samp.jpg" alt="flickr" /></a></li>
<li><a href="<?php bloginfo('url'); ?>"><img src="<?php bloginfo('stylesheet_directory'); ?>/images/flk_samp.jpg" alt="flickr" /></a></li>
<li><a href="<?php bloginfo('url'); ?>"><img src="<?php bloginfo('stylesheet_directory'); ?>/images/flk_samp.jpg" alt="flickr" /></a></li>
<li><a href="<?php bloginfo('url'); ?>"><img src="<?php bloginfo('stylesheet_directory'); ?>/images/flk_samp.jpg" alt="flickr" /></a></li>
<li><a href="<?php bloginfo('url'); ?>"><img src="<?php bloginfo('stylesheet_directory'); ?>/images/flk_samp.jpg" alt="flickr" /></a></li>
</ul><!--end flickr-->

The code above does the same thing as the ads. WordPress calls for the images. If you wanted to turn these images into live working images from your flickr account then the best thing to do is use a wordpress plugin.

You should now have something like this
preview3

Step 6

Now that are header.php, index.php, and sidebar.php are completed it is time to complete our single.php page. The single.php is very simple to complete.

All we have to do is add the main col tag after the header tag(Very first tag at the top) then delete this tag

<?php previous_post_link('&laquo; %link') ?> | <?php next_post_link('%link &raquo;') ?>

Code explanation

Finally lets add this code after the end tag of main col
bottom code

<?php get_sidebar(); ?>

Your single page should now look like this
preview 4

Step 7

Open your archive.php. For our archive page we will just be adding the main col tags and using the post code from index.php. Hope that made sense!
Below is the archive page untouched!
archive

Add the div id=”main_col” to the top of your archive.php page and place it right under the get header function. Then replace the post area code
with the post area code from your index.php file. Do not forget to close the main col div.
Archive Top

Here is an example of what your archive.php should actually look like.
archive example

step 8

Now we will work on the footer page Open your footer.php and copy the footer tag from the index.html into your footer.
footer tag

CONGRATULATION! You are now finish and should have your first wordpress theme completed. I did not go over some of the pages because what you’ve learn from this tutorial can be applied to other pages in wordpress. If you would like for me to create a screencast for part 3 please leave a comment letting me know and will create a screen cast for part 3. Hard work was put into this series and I truly hope it helped you beginners out there understand wordpress better. I did not go over the comment.php page but you can check this article from Darren Hoyt and it will teach you all about the comment.php page. Thanks for following this tutorial, if you have any question leave a comment and I will respond asap.

Download

]]> http://www.webdevtuts.net/wordpress/psd-to-wordpress-series-part-3-final-tutorial/feed/ 6 PSD to WordPress Series Part 2 http://www.webdevtuts.net/wordpress/psd-to-wordpress-series-part-2/ http://www.webdevtuts.net/wordpress/psd-to-wordpress-series-part-2/#comments Sat, 05 Sep 2009 02:49:13 +0000 Marcell http://www.webdevtuts.net/?p=304 I know there are many developers and normal people who want to know how to design a wordpress theme from scratch. Well today is your lucky day. In this series, PSD to WordPress we will design a Mockup in Photoshop, then code it for wordpress. If everyone likes this tutorial then we will also do a theme option for it. So let’s get this thing started

Here’s what we’re going to create today! Click image to enlarge

Welcome to part 2 of PSD to WordPress Series. In this part of the tutorial we’re going to slice and code our theme for valid Xhtml/css.

Note: I do not slice my layouts because I end up having soo many unused images so in this tutorial we’re going to crop everything. Also When you have a cropped image I will not go over how to save

Step 1

Open Photoshop ( Continue where we left of from previous tutorial )

Step 2

Select the crop tool
crop tool

Step 3

First thing we’re going to crop will be the header top. ( Press enter key when you feel you have the appropriate crop. ) Save as body-bg.jpg

crop header top

after crop

Note: After you crop an image go to File>>Revert or press F12 to go back to last save point

Step 4

Now we will crop our logo. ( save as logo.jpg )
crop logo

Step 5

To speed things up so we can get to coding this thing, I will go over the next 3 objects we will need to crop.

  1. Post Thumbnail

    2. Save as Post_thumb.jpg
    crop thumbnail

  2. Sample ad 125×125

    3. 125 ad
    Save as ad125.jpg

  3. Flickr image

    4. Save as flk_samp.jpg

flickr thumb

Now that we’ve finished cropping the images that well need for our layout, we can get to coding it.( Woooooooooooooo! )

Note: Before we begin this tutorial Make sure you create a new folder so you can store files.

Step 1

Open dreamweaver ( Other text editors are fine! ) File>>New>>HTML>none
open dreamweaver

Step 2

We will first begin by creating our header section. Go ahead and copy & paste it . I will explain it below.

<div id="header">
<div id="main_nav">
<ul>
<li><a href="">Home</a></li>
<li><a href="">Articles</a></li>
<li><a href="">Photoshop</a></li>
<li><a href="">Resources</a></li>
<li><a href="">Flash</a></li>
<li><a href="">Freebies</a></li>
</ul>
</div><!--end main_nav-->

<div class="clear"></div>

<div id="logo"></div><!--end logo-->

</div><!--end header-->

<div class="clear"></div>

Step 3

For the navigation I used an unordered list with links inside. Also we will take care of the logo and clear class when we begin styling our theme.

Note: If you're not familiar with that it is basically a push down for our theme. For example if you do not clear the floats the theme and everything will be completely disorder.

Step 4

Now we will begin adding the content. First we will create the page wrap to contain all of our content.

<div id="Container">

</div><!--end container-->

Step 5

Now we will create our main column which will hold all of our post, thumbnails and etc. The code below will go inside of the container tags.

<div id="main_col">

</div><!--end main_col-->

Step 6

Ok so we have our main_col wrap created, we can now start to add our post to our theme.
div class="post_break" holds our posts information. When working with divs id can not be repeated so we used a class so that we can repeat it and have valid code.

div id="post_thumb" is our thumbnail for our

div id="post_info" is what we will used to define the author and tags.

div id="post_text" will be used for our wordpress excerpt.
div id="post_more" will be used to link our front page to the actual post. The will keep everything from overlapping and pushed the divs down. Now it's time to Add the code below inside of the main_col div.

<div class="post_break">
<div id="post_thumb"><img src="images/post_thumb.jpg" alt="thumbnail"/></div><!--end post_thumb-->
<h2>10 WordPress Theme You Probably Won't Forget</h2>
<div id="post_info"><p>Posted in <a href="">Articles</a>, by <a href="">Marcell</a>, on May 5th | <a href="">19 comments</a></p></div><!--end post_info-->
<div id="post_text">
<p>
vitae mattis turpis nunc sed lectus. Integer vitae massa nisi, sed adipiscing enim. Etiam semper suscipit nunc, vel condimentum elit mollis ut. Duis scelerisque lacus quis dui sodales tincidunt. Nulla consectetur imperdiet eros vitae vestibulum.
</p>
<a href="" class="post_more">Read More</a>
</div><!--end post_text-->
</div><!--end post_break-->

<div class="clear"></div>

Note: Copy and paste the code above 4 times.

Step 7

Now it's time to create our sidebar. For the sidebar I used an unordered list for advertising since most people want to run ads on their blog. Copy & paste the code below inside of the main_col div.

<div id="sidebar">
<h2>Sponsors</h2>
<ul id="adverts">
<li><a href=""><img src="images/ad125.jpg" alt="ad"/></a></li>
<li><a href=""><img src="images/ad125.jpg" alt="ad"/></a></li>
<li><a href=""><img src="images/ad125.jpg" alt="ad"/></a></li>
<li><a href=""><img src="images/ad125.jpg" alt="ad"/></a></li>
</ul><!--adverts-->

<a class="side_more" href="">Advertise here</a>

<div class="clear"></div>

<h2>Flickr</h2>
<ul id="flickr">
<li><a href=""><img src="images/flk_samp.jpg" alt="flickr"/></a></li>
<li><a href=""><img src="images/flk_samp.jpg" alt="flickr"/></a></li>
<li><a href=""><img src="images/flk_samp.jpg" alt="flickr"/></a></li>
<li><a href=""><img src="images/flk_samp.jpg" alt="flickr"/></a></li>
<li><a href=""><img src="images/flk_samp.jpg" alt="flickr"/></a></li>
<li><a href=""><img src="images/flk_samp.jpg" alt="flickr"/></a></li>
<li><a href=""><img src="images/flk_samp.jpg" alt="flickr"/></a></li>
<li><a href=""><img src="images/flk_samp.jpg" alt="flickr"/></a></li>
<li><a href=""><img src="images/flk_samp.jpg" alt="flickr"/></a></li>
</ul><!--end flickr-->

</div><!--end sidebar-->
<div class="clear"></div>

Step 8

For the last html markup we will now add the footer

<div id="footer">
<p>Copyright 2009 Your Website.com All rights reserved</p>
</div><!--end footer-->

Step 9

Here is the final HTML code.

<div id="header">
<div id="main_nav">
<ul>
	<li><a>Home</a></li>
	<li><a>Articles</a></li>
	<li><a>Photoshop</a></li>
	<li><a>Resources</a></li>
	<li><a>Flash</a></li>
	<li><a>Freebies</a></li>
</ul>
</div>
<!--end main_nav-->

<!--end logo--></div>
<!--end header-->
<div id="Container">
<div id="main_col">
<div class="post_break">
<div id="post_thumb"><img src="images/post_thumb.jpg" alt="thumbnail" /></div>
<!--end post_thumb-->
<h2>10 WordPress Theme You Probably Won't Forget</h2>
<div id="post_info">

Posted in <a>Articles</a>, by <a>Marcell</a>, on May 5th | <a>19 comments</a></div>
<!--end post_info-->
<div id="post_text">

vitae mattis turpis nunc sed lectus. Integer vitae massa nisi, sed adipiscing enim. Etiam semper suscipit nunc, vel condimentum elit mollis ut. Duis scelerisque lacus quis dui sodales tincidunt. Nulla consectetur imperdiet eros vitae vestibulum.

<a class="post_more">Read More</a></div>
<!--end post_text--></div>
<!--end post_break-->
<div class="post_break">
<div id="post_thumb"><img src="images/post_thumb.jpg" alt="thumbnail" /></div>
<!--end post_thumb-->
<h2>10 WordPress Theme You Probably Won't Forget</h2>
<div id="post_info">

Posted in <a>Articles</a>, by <a>Marcell</a>, on May 5th | <a>19 comments</a></div>
<!--end post_info-->
<div id="post_text">

vitae mattis turpis nunc sed lectus. Integer vitae massa nisi, sed adipiscing enim. Etiam semper suscipit nunc, vel condimentum elit mollis ut. Duis scelerisque lacus quis dui sodales tincidunt. Nulla consectetur imperdiet eros vitae vestibulum.

<a class="post_more">Read More</a></div>
<!--end post_text--></div>
<!--end post_break-->
<div class="post_break">
<div id="post_thumb"><img src="images/post_thumb.jpg" alt="thumbnail" /></div>
<!--end post_thumb-->
<h2>10 WordPress Theme You Probably Won't Forget</h2>
<div id="post_info">

Posted in <a>Articles</a>, by <a>Marcell</a>, on May 5th | <a>19 comments</a></div>
<!--end post_info-->
<div id="post_text">

vitae mattis turpis nunc sed lectus. Integer vitae massa nisi, sed adipiscing enim. Etiam semper suscipit nunc, vel condimentum elit mollis ut. Duis scelerisque lacus quis dui sodales tincidunt. Nulla consectetur imperdiet eros vitae vestibulum.

<a class="post_more">Read More</a></div>
<!--end post_text--></div>
<!--end post_break-->
<div class="post_break">
<div id="post_thumb"><img src="images/post_thumb.jpg" alt="thumbnail" /></div>
<!--end post_thumb-->
<h2>10 WordPress Theme You Probably Won't Forget</h2>
<div id="post_info">

Posted in <a>Articles</a>, by <a>Marcell</a>, on May 5th | <a>19 comments</a></div>
<!--end post_info-->
<div id="post_text">

vitae mattis turpis nunc sed lectus. Integer vitae massa nisi, sed adipiscing enim. Etiam semper suscipit nunc, vel condimentum elit mollis ut. Duis scelerisque lacus quis dui sodales tincidunt. Nulla consectetur imperdiet eros vitae vestibulum.

<a class="post_more">Read More</a></div>
<!--end post_text--></div>
<!--end post_break--></div>
<!--end main_col-->
<div id="sidebar">
<h2>Sponsors</h2>
<ul id="adverts">
	<li><a><img src="images/ad125.jpg" alt="ad" /></a></li>
	<li><a><img src="images/ad125.jpg" alt="ad" /></a></li>
	<li><a><img src="images/ad125.jpg" alt="ad" /></a></li>
	<li><a><img src="images/ad125.jpg" alt="ad" /></a></li>
</ul>
<!--adverts-->

<a class="side_more">Advertise here</a>
<h2>Flickr</h2>
<ul id="flickr">
	<li><a><img src="images/flk_samp.jpg" alt="flickr" /></a></li>
	<li><a><img src="images/flk_samp.jpg" alt="flickr" /></a></li>
	<li><a><img src="images/flk_samp.jpg" alt="flickr" /></a></li>
	<li><a><img src="images/flk_samp.jpg" alt="flickr" /></a></li>
	<li><a><img src="images/flk_samp.jpg" alt="flickr" /></a></li>
	<li><a><img src="images/flk_samp.jpg" alt="flickr" /></a></li>
	<li><a><img src="images/flk_samp.jpg" alt="flickr" /></a></li>
	<li><a><img src="images/flk_samp.jpg" alt="flickr" /></a></li>
	<li><a><img src="images/flk_samp.jpg" alt="flickr" /></a></li>
</ul>
<!--end flickr--></div>
<!--end sidebar--></div>
<!--end Container-->

<div id="footer">
<p>Copyright 2009 Your Website.com All rights reserved</p>
</div><!--end footer-->

Step 10

Now it's time to style our HTML. We will begin by linking our stylesheet with our HTML document. Place the following code in the head section of the HTML.
stylesheet

<link rel="stylesheet" type="text/css" href="style.css" />

Step 11

First let's add our css reset into the top part of our stylesheet.

body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre,
form, fieldset, input, p, blockquote, table, th, td, embed, object {
padding: 0;
margin: 0;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
fieldset, img, abbr {
border: 0;
}
address, caption, cite, code, dfn, em,
h1, h2, h3, h4, h5, h6, strong, th, var {
font-weight: normal;
font-style: normal;
}
ul {
list-style: none;
}
caption, th {
text-align: left;
}
h1, h2, h3, h4, h5, h6 {
font-size: 1.0em;
}
q:before, q:after {
content: '';
}
a, ins {
text-decoration: none;
}

Step 12

Now lets add our basic typography into our stylesheet.

.clear							{ clear:both; }
a,a:hover,a:visited				{ color:#b8bab6; }
p							   { line-height:18px; }

Step 13

Ok we will now style our main divs.
style main div tags

body							{ background: #72434d url(images/body-bg.jpg) repeat-x ; font-family:arial; }
#Container						{ width:972px; margin:0 auto; }
#header							{ width:972px; margin:auto; }
#logo							{ width:317px; height:98px; background:url(images/logo.jpg); }
#main_col						{ width:640px; float:left; padding:15px; font-family:arial; }
#main_col p						{ font-size:12px; text-align:left; padding-bottom:2em }

Step 14

It's time to style the navigation.
style navigation


/*
Navigation
*/
#main_nav						{ float:left; margin:10px 0 21px 0;}
#main_nav li						{ display:inline; font-weight:bold; font-size:12px;}
#main_nav li a					{ color:#fff;}

Step 15

Post_break>The code below will style our post.
style post area

/*
Post
*/
.post_break						{ float:left; margin:10px 0 10px 0; }
.post_break h2					{ color:#222226; font-family: arial; font-weight:bold; font-size:24px; }
#post_text						{ padding:40px 0; font-size:12px; font-family:arial; }
#post_info						{ background:#000; float:left; color:#fff; font-size:12px; padding:5px;  margin:5px 0 5px 0;}
#post_info p						{ padding:0;}
#post_thumb						{ float:right;}
a.post_more						{ font-size:12px; color:#fff; float:right; margin-right:20em;}

Step 16

adverts This will style the code thumbnails in our sidebar
style thumbnails in sidebar

/*
Adverts
*/
#adverts						{ margin:0 0 0 10px;}
#adverts li						{ display:block; float:left; margin:5px 5px; }
#adverts 						{ }
#adverts						{ }
#flickr							{ margin:10px 0 0 10px;	}
#flickr li 						{ display:block; float:left; margin:5px;}

Step 17

sidebar This will style out sidebar and sidebar headings
style side heading

/*
sidebar
*/
#sidebar						{ width:290px; float:right; background:#000;  }
#sidebar  h2						{ color:#fff; font-family: arial; font-weight:bold; font-size:31px; background:#71434b; padding:5px; margin:30px 40px 0 0; }
.side_more						{ font-size:12px; color:#fff; margin:0 15px; float:right;}

Step 18

footer The final code below will style our wonderful, but simple footer.
footer

/*
Footer
*/
#footer							{ margin: auto; background:#000; height:50px; color:#fff; text-align:center; font-size:12px; font-weight:bold; }
#footer p						{ padding:15px;}

Here is the final css code! Hope this tutorial helps. Please leave comments giving feedback

body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre,
form, fieldset, input, p, blockquote, table, th, td, embed, object {
padding: 0;
margin: 0;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
fieldset, img, abbr {
border: 0;
}
address, caption, cite, code, dfn, em,
h1, h2, h3, h4, h5, h6, strong, th, var {
font-weight: normal;
font-style: normal;
}
ul {
list-style: none;
}
caption, th {
text-align: left;
}
h1, h2, h3, h4, h5, h6 {
font-size: 1.0em;
}
q:before, q:after {
content: '';
}
a, ins {
text-decoration: none;
}

/*---------------------------------------------------------------Code starts--------------------------------------------------------------------------------------*/
.clear							{ clear:both; }
a,a:hover,a:visited				{ color:#b8bab6; }
p								{ line-height:18px; }

body							{ background: #72434d url(images/body-bg.jpg) repeat-x ; font-family:arial; }
#Container						{ width:972px; margin:0 auto; }
#header							{ width:972px; margin:auto; }
#logo							{ width:317px; height:98px; background:url(images/logo.jpg);}
#main_col						{ width:640px; float:left; padding:15px; font-family:arial;}
#main_col p						{ font-size:12px; text-align:left; padding-bottom:2em}

/*
Navigation
*/
#main_nav						{ float:left; margin:10px 0 21px 0;}
#main_nav li						{ display:inline; font-weight:bold; font-size:12px;}
#main_nav li a					{ color:#fff;}

/*
Post
*/
.post_break						{ float:left; margin:10px 0 10px 0; }
.post_break h2					{ color:#222226; font-family: arial; font-weight:bold; font-size:24px; }
#post_text						{ padding:40px 0; font-size:12px; font-family:arial; }
#post_info						{ background:#000; float:left; color:#fff; font-size:12px; padding:5px;  margin:5px 0 5px 0;}
#post_info p						{ padding:0;}
#post_thumb						{ float:right;}
a.post_more						{ font-size:12px; color:#fff; float:right; margin-right:20em;}

/*
Adverts
*/
#adverts						{ margin:0 0 0 10px;}
#adverts li						{ display:block; float:left; margin:5px 5px; }
#adverts 						{ }
#adverts						{ }
#flickr							{ margin:10px 0 0 10px;	}
#flickr li 						{ display:block; float:left; margin:5px;}

/*
sidebar
*/
#sidebar						{ width:290px; float:right; background:#000;  }
#sidebar  h2						{ color:#fff; font-family: arial; font-weight:bold; font-size:31px; background:#71434b; padding:5px; margin:30px 40px 0 0; }
.side_more						{ font-size:12px; color:#fff; margin:0 15px; float:right;}

/*
Footer
*/
#footer							{ margin: auto; background:#000; height:50px; color:#fff; text-align:center; font-size:12px; font-weight:bold; }
#footer p						{ padding:15px;}

title

]]> http://www.webdevtuts.net/wordpress/psd-to-wordpress-series-part-2/feed/ 3