Place the code below into your wp-config.php file. Code can be placed anywhere within the file.

define('WP_ALLOW_MULTISITE', true);

After you have successfully copy and pasted the code into the wp-config.php file then go to your wordpress admin panel>>Tools>>Network. Then follow the instructions.

Note: When wordpress ask you to create a blogs.dir do not create a .php file. Create a folder and name it blogs.dir. Now you should be able to run multiple wordpress websites within the one wordpress installation. Also this is great for people who run theme websites or create themes because they can have many demos and have many setups using one installation. Hope you’ve enjoyed this quicktip.

Widget Information

With the new WordPress template structure(Same but revised) some of you may have notice the ability to have multiple widgets under different classes. I think that is great because it gives you the option to style each widget the same or style each widget individually.

The Markup

Before we write the function for our widget we need to write up the markup. Open up your sidebar.php file then insert this into the file.

<div class="widget">
<?php
	// A second sidebar for widgets, just because.
	if ( is_active_sidebar( 'website-banner' ) ) : ?>

			<ul class="custombox">
				<?php dynamic_sidebar( 'website-banner' ); ?>
			</ul>

<?php endif; ?>
</div>

With the code above I have told WordPress to look for a widget named website-banner. I’ve also assigned a class name of custombox so I can later target that widget in the css(stylesheet).

Creating the Function

Open your functions.php file and insert the code below into the file.

	// Custom Area , located in the widget. Empty by default
	register_sidebar( array(
		'name' => __( 'website-banner', 'twentyten' ),
		'id' => 'banner',
		'description' => __( 'Website banner goes here', 'twentyten' ),
		'before_widget' => '<li id="%1$s" class="widget-container %2$s">',
		'after_widget' => '</li>',
		'before_title' => '<h3 class="widget-title">',
		'after_title' => '</h3>',
	) );

Now it might be a little bit confusing but i will try my best to explain everything to you all. With the code above I define the name I gave the widget in the markup which was website-banner then gave it a description(Description will appear on widget via admin panel) “Website banner goes here” and finally gave it an id of banner which I can later classify in the css(stylesheet).

There you have it a new widget for your wordpress blog or website. If you have any trouble, questions or suggestions just leave a comment below and I will try my best to respond to them. Hope this tutorial helped you.

More Content Management Systems Websites, Less HTML

When It comes to designing and developing for the web I have notice that more and more users are turning to CMS’s(Content Management Systems) and less towards HTML/static web pages. I can not remember the last time I’ve coded a HTML website for a client and that was final. With the functionality of CMS’s and the ability to manage everything via the control panel, what’s the need to edit an HTML page via a code editor? Many people use content management systems for the following.

• Blogging – With the tremendous growth of blogging I can see there being over a millions blogs throughout the world in the near future. I mean its 2010 and who doesn’t have a blog? From a designer point of view we will all be running and designing websites for people who want or would like to start a blog.
• CMS – Unlike most people others like their websites to have the functional as a CMS. I can see designers developing more CMS’s for companies/personal projects and the near future.

More Website builders

With the rise of technology I can see many people turning to website builders. Website builders gives users the ability to update and manage their website without having any knowledge of code. Many normal people have no knowledge of HTML, CSS, PHP, JAVASCRIPT and etc. Also many people are not willing to come out of pocket and pay developers for the work they are willing to do so offering clients a service that is too much will lead to website builders. Website builders are also becoming very complex and are allowing users to do things that might take developers 3 days to do really fast.

Less Freelance, more corporate/personal work!

The fact of many people being cheap will cause the rise of freelance work to drop. Many designers will say that freelancing will be around for good but in my opinion the fail is coming very soon. With others countries willing to do work for less many designers will decide to either go get a job at a firm or company or work on personal projects. The Great part about freelancing is being able to be your own boss but the con of freelancing is not having a stable income and having to find work from month to month.

This is just a fourth of my opinion on where I think web design will be in the near future. I’m not sure if I’ll be right or wrong but I know change is coming to the web design community and am not sure if we’re ready. All I can say is time will tell and its just a matter of time before well know. I hope you’ve all enjoyed this article and would like to know your inputs on this topic.

Specs

• 3 Theme Colors
• Theme Options Page
• Cross Browser Compatibility
• Thread Comments
• Widget Ready
• Ad Box Options
• Fixed Layout
• Drop down menu
• WordPress 2.9 ready

The Code

Copy and paste the code below and I will explain it below.

<?php $recent = new WP_Query("cat=26&showposts=10"); while($recent->have_posts()) : $recent->the_post();?>
<li><a href="<?php the_permalink() ?>" rel="bookmark"><?php the_title(); ?></a></li>
<?php endwhile; ?>

So basically the code above is telling WordPress to get category 26 most recent post and to show 10 post at the max(Can be higher or lower). To make the code work you will need to place it inside of a ul and li tag. Hope this works for you all. If you have a question leave a comment below and I will answer them.

Open a blank document or txt pad then insert the following code below.

<?php
$tags = wp_get_post_tags($post->ID);
if ($tags) {
	$tag_ids = array();
	foreach($tags as $individual_tag) $tag_ids[] = $individual_tag->term_id;

	$args=array(
		'tag__in' => $tag_ids,
		'post__not_in' => array($post->ID),
		'showposts'=>5, // Number of related posts that will be shown.
		'caller_get_posts'=>1
	);
	$my_query = new wp_query($args);
	if( $my_query->have_posts() ) {
		echo '<h3>Related Posts</h3><ul>';
		while ($my_query->have_posts()) {
			$my_query->the_post();
		?>
			<li><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></li>
		<?php
		}
		echo '</ul>';
	}
}
?>

Now save file as related.php

Note: To call the related post function please insert the code below into your single.php file.

<?php include (TEMPLATEPATH . '/related.php'); ?>

You should now have a related post section.

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

Step 2

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

Delete everything in the reset file.

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

You should have something like this so far

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.

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

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)

Below is the wordpress markup that we will be using

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 multiple post, and when you have multiple things using the same styling then it is good to use class instead of id, plus it will keep your code valid.

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.

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

Now lets add our advertisement 125×125 into our wordpress 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

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;') ?>

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

<?php get_sidebar(); ?>

Your single page should now look like this

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!

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.

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

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.

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.

]]> http://www.webdevtuts.net/wordpress/psd-to-wordpress-series-part-3-final-tutorial/feed/ 14 http://www.webdevtuts.net/photoshop/create-a-elegant-wordpress-theme/ http://www.webdevtuts.net/photoshop/create-a-elegant-wordpress-theme/#comments Wed, 21 Oct 2009 19:47:50 +0000 Marcell Purham http://www.webdevtuts.net/?p=505 Continue reading →]]> Download Final

Step 1

Create new document 1360px x 1500px 72dpi. Background color: #000, ( Black )

Note: Width is 960px out 1360. Leaving 200px on each side. So What I am saying is leave 200px space on both sides of your layer and the middle should come out to 960px.

Step 2

Select the paint brush( select brush with blur edges ) tool and create 4 circles. Circle 1:#308fab, Circle 2:#3f2e49, Circle 3:#58303d, Circle 4:#78372e,

Step 3

Now Lets stretch our image. Go to edit>>free transform and make image bigger. Then move image upward when completed

Step 4

Ok so we will now add a nice effect to our background. Select on layer with four colors and go to Filter>>Noise>>Add Noise.

Amount:30%, Distribution:Gaussian, and select Monochromatic.

Step 5

Go to Filter>>Blur>>Motion Blur

Angle:90, Distance:225.

Step 6

Now select the rectangle tool and create a rectangle at the very top ( About 50px high ) and change the layer opacity to 35%

Note: Whenever I create dummy links I always have links on one text line so once you have the type tool selected Double click and one line should appear then type the words.

Select the type tool and create 4 links. Home, About, Contact, Services. ( 4 spaces after each word, hit spacebar 4 times after you type a word that way you do not have to make individual links.

Step 7

Now we will create a search form. Select the rectangle tool Color:#232224, then draw a box across the top right leaving room for a button. Then add the following text,Looking for something

For our search button select the rounded rectangle tool and create a small rectangle to the right of our search form background.

Now right click on search button layer>>Blending Options>>Gradient overlay.

Left color:#040404 , Right color:#292928;

Now let’s add the following text to our search button. Search

Step 8

Select the rectangle tool Color:#000. Now create a box 960px across the layout and about 325px height. Then change the layer opacity to 35%

Step 9

Now lets add a featured image, width:590px x height:295px;

Step 10

Select the type tool. Now you create a heading title of your own or use my current heading title.Font:Size:23px, Arial, Bold.

Then create an post information link. Select the type tool and type the following.Posted by Marcell on 10.16.09 in Tutorials

Now write the excerpt. I used dummy text. Google search Lorem Ispum

Step 11

Now we will create a button. Select the rectangle tool Color:#000; Now draw a rectangle button. Right click on layer>>Blending options>>Gradient Overlay Left Color:#1b1b1b,Right color:#0e0e0e

Duplicate the button layer. Then select the paint bucket tool ,Color:#373737, and fill the second black layer button.

Duplicate the first button layer. You should have 2 black button layers and 1 grey button layer.

Move buttons close together to give it that illusional look. ( zoom in to get best results )

Step 12

Select the type tool and type following.Read More. Font: Myraid pro, 29px, bold,. Now right click on text layer>>blending options>>Inner Shadow then copy current settings.

Step 13

Select the rectangle tool, color:#000, Then create a rectangle under featured section to bottom. Layer opacity 35%.

Step 14

Now we will create our post area. First thing we will create are our thumbnails. Create a thumbnail Width:275px height:164px,

then right click on thumbnail layer>>Blending options>>Stroke.

Note:I do not cover the post area as well since it is the same as the featured area

Step 15

Copy current post area from image below. It is almost the same as the featured box. You can do it champ!. For the line I used the line tool, 1px Color:#3b2221

Step 16

Duplicate post area 3 times.

Step 17

Now we will create our sidebar. Google search rss icons( Icon used in tutorial is from Wefunction ) Then place a rss button at the top of the sidebar. Now select the type tool in type the following, Subscribe Rss | Email | Feed. Font Arial, 15px, bold

Step 18

Now we will add some sidebar widgets to our layout. Duplicate the read more button from the featured box and change the text to Sponsors. Drag box down to sidebar. Now Google search 125 ads or create your own and place it into the layout.

Step 19

Duplicate the the read more button once more and change the font to Popular post. Then select the text tool and create a heading( Font: Arial, 14px, bold ). Then create a description for
the post or known as the excerpt( Font: Arial, 10px ). Select the line tool Color:#3b2221 and create a line that separates each post. Once you have the first popular post article completed duplicate the group 2 times.

Step 20

For our last and final direction we will add a copyright to the bottom of our website mockup.

Final Image

Congratulations! You have finished this tutorial. I hope everything was clear and that you understood this tutorial.

Note: Make sure you do not have permalinks set to default or you will not see the category id

If permalink is set to default click on any category page and there is where you should find your category id.

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 so 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

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

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 )

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.

Post Thumbnail: Save as Post_thumb.jpg

Sample ad 125×125: Save as ad125.jpg

Flickr image: Save as flk_samp.jpg

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

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.

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

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.

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.

/*
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.

/*
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

/*
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

/*
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							{ 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;}