Here is Part II of our “From Photoshop to WordPress” series. In Part I – Design, we looked at how to make a nice grungy-looking blog design in Photoshop. Today, we’ll be looking at slicing that design and coding it in HTML.
The great thing about Photoshop (and most high-end graphics programs) are the layers. Putting elements on different layers will help you tremendously when comes the time to slice that design up for the web. And so here we go. Let’s get this thing rolling.
Laying down the mark-up
So, let’s start off with some default code for a basic 2 column layout with header and footer. Our layout will be a fixed layout, meaning that it will not stretch depending on the visitors’ browsers’ resolution.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en-CA" xml:lang="EN-CA">
<head>
<title>Some title</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>
<body>
<div id="header">
<div id="navigation"></div>
<div id="branding"></div>
<div id="categories"></div>
</div>
<div id="content"></div>
<div id="sidebar"></div>
<div id="site-info"></div>
</body>
</html>
It can’t get more simple than that. It’s pretty bare-bone and that’s how we start the mark-up, just like we did in the tutorial A websites’ structure from A to Z, then we will go and put all our content in and then we will deal with styling it and adding backgrounds, colors and fonts.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en-CA" xml:lang="EN-CA"> <head> <title>Some title</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> </head> <body> <!-- header --> <div id="header"> <!-- navigation --> <div id="navigation"> <ul class="left"> <li><a href="">Home</a></li> <li><a href="">About</a></li> <li><a href="">Archives</a></li> <li><a href="">Contact</a></li> </ul> <ul class="right"> <li><a href="" class="rss-link">RSS</a></li> </ul> </div> <!-- END OF navigation --> <!-- branding --> <div id="branding"><h1>Eroded by Time</h1></div> <!-- categories nav --> <div id="categories"> <ul> <li><a href="">CatOne</a></li> <li><a href="">CatTwo</a></li> <li><a href="">CatThree</a></li> <li><a href="">CatFour</a></li> <li><a href="">CatFive</a></li> </ul> </div> <!-- END OF catories nav --> </div> <!-- END OF header --> <!-- content --> <div id="content"> <!-- post featured --> <div class="post featured"> <h2>Lorem ipsum dolor sit amet</h2> <p class="post-date">Posted August 17th, 2008</p> <div class="post-content"> <p><img src="" class="post-thumb" alt="Lorem ipsum dolor sit amet" /> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce imperdiet. Sed ullamcorper varius nibh. Vestibulum augue. Aenean id justo. Nullam sit amet lectus. In odio. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In hac habitasse platea dictumst. Nam feugiat. Quisque nibh nibh, scelerisque ac, ultrices ut, iaculis at, ligula. Duis tempor odio in ipsum.</p> <p>Donec condimentum eros a tellus. Phasellus mauris. Aenean magna. Pellentesque enim ante, hendrerit sed, luctus ut, tempor in, lacus. Aliquam erat volutpat. Nam semper enim et enim. Sed sagittis nisi a urna. Proin mattis neque. Vivamus faucibus ipsum eu augue. Proin diam dui, posuere eu, posuere eu, elementum vel, diam.</p> <p class="post-continue"><a href="">Continue reading ...</a></p> </div> </div> <!-- END OF post featured --> <!-- post --> <div class="post"> <h2>Lorem ipsum dolor sit amet</h2> <p class="post-date">Posted August 17th, 2008</p> <div class="post-content"> <p><img src="" class="post-thumb" alt="Lorem ipsum dolor sit amet" /> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce imperdiet. Sed ullamcorper varius nibh. Vestibulum augue. Aenean id justo. Nullam sit amet lectus. In odio. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In hac habitasse platea dictumst. Nam feugiat. Quisque nibh nibh, scelerisque ac, ultrices ut, iaculis at, ligula. Duis tempor odio in ipsum.</p> <p class="post-continue"><a href="">Continue reading ...</a></p> </div> </div> <!-- END OF post --> <!-- post --> <div class="post"> <h2>Lorem ipsum dolor sit amet</h2> <p class="post-date">Posted August 17th, 2008</p> <div class="post-content"> <p><img src="" class="post-thumb" alt="Lorem ipsum dolor sit amet" /> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce imperdiet. Sed ullamcorper varius nibh. Vestibulum augue. Aenean id justo. Nullam sit amet lectus. In odio. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In hac habitasse platea dictumst. Nam feugiat. Quisque nibh nibh, scelerisque ac, ultrices ut, iaculis at, ligula. Duis tempor odio in ipsum.</p> <p class="post-continue"><a href="">Continue reading ...</a></p> </div> </div> <!-- END OF post --> <!-- page-navigation --> <div class="page-navigation"> <div class="left"><a href="">Older Posts</a></div> <div class="right"><a href="">Newer Posts</a></div> </div> <!-- END OF page-navigation --> </div> <!-- END OF content --> <!-- sidebar --> <div id="sidebar"> <!-- sidebar-ads --> <div class="sidebar-ads"> <a href=""><img src="" /></a> <a href=""><img src="" /></a> <a href=""><img src="" /></a> <a href=""><img src="" /></a> </div> <!-- END OF sidebar-ads --> <!-- sidebar-search --> <div class="sidebar-search"> <form action=""> <p><input type="text" name="search" /> <input type="submit" value="Search"/></p> </form> </div> <!-- END OF sidebar-search --> <!-- sidebar-tags --> <h4>Tags</h4> <div class="sidebar-tags"> <ul> <li><a href="">Bloggers</a></li> <li><a href="">CSS</a></li> <li><a href="">Miscelaneous</a></li> <li><a href="">Standards</a></li> <li><a href="">Web Design</a></li> </ul> </div> <!-- END OF sidebar-tags --> <!-- sidebar-pop-posts --> <h4>Popular Posts</h4> <div class="sidebar-pop-posts"> <ul> <li><a href="">Lorem ipsum dolor sit amet</a></li> <li><a href="">Lorem ipsum dolor sit amet</a></li> <li><a href="">Lorem ipsum dolor sit amet</a></li> <li><a href="">Lorem ipsum dolor sit amet</a></li> </ul> </div> <!-- END OF sidebar-pop-posts --> <!-- sidebar-comments --> <h4>Recent Comments</h4> <div class="sidebar-recent-com"> <ul> <li><a href="">Someone</a> on <a href="">Lorem ipsum dolor sit amet</a></li> <li><a href="">Someone</a> on <a href="">Lorem ipsum dolor sit amet</a></li> <li><a href="">Someone</a> on <a href="">Lorem ipsum dolor sit amet</a></li> <li><a href="">Someone</a> on <a href="">Lorem ipsum dolor sit amet</a></li> </ul> </div> <!-- END OF sidebar-comments --> </div> <!-- END OF sidebar --> <!-- site-info --> <div id="site-info"> <div class="left"> <p>Copyright 2008 - Karinne Legault</p> <p>Hosted by <a href="">Hosting Company</a> / Powered by <a href="http://www.wordpress.org">Wordpress</a></p> </div> <div class="right"> <ul> <li><a href="">Home</a></li> <li><a href="">About</a></li> <li><a href="">Archives</a></li> <li><a href="">Contact</a></li> <li><a href="">RSS</a></li> </ul> </div> </div> <!-- END OF site-info --> </body> </html>
There! Mark-up is pretty much done. We will probably come back to it to either adjust/change the names of some of our classes or ID’s, or even add some but for now, this has pretty much all the important components.
Slicing it up
Back in the days when tables for layout were everybody’s business, we could go in Photoshop and use the Generate HTML with the slicing tool. But then that generates an insane amount of images and deprecated code so we will be staying well clear of that and instead, we’ll do it by hand.
I can hear the exasperated sigh’s from here. The way I look at it, we only need to slice/copy/cut 6 images. Yep… not 50, like the generator would normally give you, but 6, six, seis. One for the main grungy background (1), one for the top navigation (2), one for the header (3), one for the logo (4), one for the category menu (5) and one for the footer (6). That’s it. The rest are icons that we have already downloaded from pinvoke so we don’t need to touch those.
Ready? Let’s get started!
Our main background
As I previously stated, the great things about Photoshop (and most advanced graphics programs) is the layers and the ability to hide/show them at will. So in order to get out background, we’ll hide pretty much everything in our document.
Now it’s just a matter of flattening the layers and saving it to main-bg.jpg
Header
Now we need to get that checkered background. And we want it as a transparent file so the grunge from our main background image will show through. So, like we did with the main background, we’ll hide all the layers except those making the grungy checkered image.
So you’ll end up with something like this
To get our image, we’ll change the Canvas Size to 1000px x 235px
And save that image as a Transparent PNG named header-bg.png
Top navigation
Since our top navigation has a slight gradient effect, we need a background image for that as well. We don’t need a big image for this. Only 5px x 55px will suffice.
So you would end up with this and save it as top-nav-bg.jpg
Branding
Here want simply the title to show up against a transparent background. So what we will do is open up a new document of 350px x 60px
and put our title in there using the same font (Times New Yorker – 48px) and save that as branding.png
Category menu
Pretty simple now that we’ve done a few already. Here we’ll hide everything except our image that makes up that grungy background.
Now, by hitting Command+Mouse click (ctrl+right mouse-click in Windows) on that Layer 7 copy, it automagically hightlights everything I need.
Then I copy, create new file, paste and voilà, my category background. I just need to set the Opacity to 65% and I’m off to the races. Let’s save that one as cat-nav-bg.png
Footer
For our footer, we’ll be using the same technique we used for our category navigation background. So ctrl+right-click on the footer layer, and paste in a new file, change the opacity to 15% and we’re done. We’ll save this last one as footer-bg.png.
And now we’ve got all our images so we’re ready to go ahead and put it all together.
Creating the stylesheet and putting it all together
First thing we need to take into consideration is that our original canvas was 1000 pixels in width so we will want to contain certain parts of our content in a 960 pixels space. We will make adjustments to our mark-up as we go along and add wrapper div’s.
First things first, let’s add a link to our stylesheet in the our mark-up:
<head> <title>Some title</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <link rel="stylesheet" media="screen" href="css/styles.css" /> </head>
Now let’s remove the default borders around the page. We’ll also go ahead and add our main background to the body element as well as font sizes and family, and text colors.
html, body {
margin: 0;
padding: 0;
}
body {
font: 12px/16px Verdana, Geneva, sans-serif;
color: #000;
background: url(/i/main-bg.jpg) repeat 0 0;
}
Header
For our header, all we need to set here is the grungy checkered background and we’ll center it to stay in our 960px width with the rest of the content.
/*** header
****************************************/
#header {
background: url(/i/header-bg.png) no-repeat top center;
height: 235px;
overflow: hidden;
}
Notice that we’ve set a height (235px) as well as the overflow: hidden property to clear the floats from our navigation.
Navigation
Our top navigation has a slight gradient which we have sliced up from our Photoshop file and we have one part of our navigation on the left and one to the right. Not sure if you’ve notice in the mark-up but those 2 classes that I have used in there (.left and .right), I also use them in a few more spots so we’ll set up a “Common class and ID” section in our CSS where we will put those 2 classes as well as styles for links, etc….
/*** common styles
****************************************/
.left {
float: left;
}
.right {
float: right;
}
Since we will want to contain our navigation in a 960px space, we will add a wrapper div to our navigation.
<!-- navigation --> <div id="navigation"> <div id="navigation-wrapper"> <ul class="left"> <li><a href="">Home</a></li> <li><a href="">About</a></li> <li><a href="">Archives</a></li> <li><a href="">Contact</a></li> </ul> <ul class="right"> <li><a href="" class="rss-link">RSS</a></li> </ul> </div> </div> <!-- END OF navigation -->
Our black bar with the gradient we want to have it stretch the width of the browsers’ viewport so it’s only the links that we want to contain.
/*** navigation
****************************************/
#navigation {
background: #2c2c2c url(/i/top-nav-bg.jpg) repeat-x 0 0;
height: 55px;
}
#navigation-wrapper {
width: 960px;
margin: 0 auto;
padding: 15px 0 0 0;
}
#navigation-wrapper .left {
width: 400px;
}
#navigation-wrapper .right {
width: 80px;
text-align: right;
}
#navigation-wrapper ul {
margin: 0;
padding: 0;
list-style: none;
}
#navigation-wrapper ul li {
float: left;
display: inline;
margin: 0 20px 0 0;
padding: 0;
}
#navigation-wrapper ul li a {
color: #fff;
font: 14px Georgia, serif;
text-decoration: none;
text-transform: uppercase;
}
#navigation-wrapper ul li a:hover {
text-decoration: underline;
}
#navigation-wrapper ul li a.rss-link {
background: url(/i/icons/feed.png) no-repeat 0 0;
padding: 0 25px;
}
Branding
Our heading has that square tiled background as well as the custom font so we’ll be using an image for this. We’ll set our image in an &ht;h1<>/h1< for SEO purposes and for the visually impaired, the text we will put in the >img alt="text" /< will be read.
So let’s go ahead and change this line here:
<!-- branding --> <div id="branding"><h1>Eroded by Time</h1></div>
…to incorporate our logo and a link back to the home page as well.
<!-- branding --> <div id="branding"><h1><a href=""><img src="i/branding.png" width="350" height="60" alt="Eroded by Time" />&l;/a></a></h1></div>
Category menu
This is where our categories for our blog posts will be showing up on our pages. In our “Slicing up” section, we created a jagged background that we’ll be repeating horizontally. Like our navigation at the top, we will want to contain this in a 960px zone and for this we’ll need to add a wrapper div to do this.
<!-- categories nav --> <div id="categories"> <div id="categories-wrapper"> <ul> <li><a href="">CatOne</a></li> <li><a href="">CatTwo</a></li> <li><a href="">CatThree</a></li> <li><a href="">CatFour</a></li> <li><a href="">CatFive</a></li> </ul> </div> </div> <!-- END OF categories nav -->
We’ll use much of the same code as with our nav.
/*** cateogies
*******************************/
#categories {
background: url(/i/cat-nav-bg.png) repeat-x 0 0;
height: 80px;
}
#categories-wrapper {
width: 960px;
margin: 0 auto;
padding: 30px 0 0 0;
}
#categories-wrapper ul {
margin: 0;
padding: 0;
list-style: none;
}
#categories-wrapper ul li {
float: left;
display: inline;
margin: 0 20px 0 0;
padding: 0;
}
#categories-wrapper ul li a {
color: #363636;
font: bold 18px Verdana, Geneva, sans-serif;
text-decoration: none;
text-transform: uppercase;
}
#categories-wrapper ul li a:hover {
text-decoration: underline;
}
And that concludes our header section! Hooray!
On to the next section: content
Content
Before we start diving into our content, we’ll need to add another wrapper div around the content and sidebar to contain both those elements in a 960px area.
<!-- END OF header --> <!-- content-wrapper --> <div id="content-wrapper"> <!-- content --> <div id="content"> <!-- post featured --> <div class="post featured"> <h2>Lorem ipsum dolor sit amet</h2> <p class="post-date">Posted August 17th, 2008</p> <div class="post-content"> <p><img src="" class="post-thumb" alt="Lorem ipsum dolor sit amet" /> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce imperdiet. Sed ullamcorper varius nibh. Vestibulum augue. Aenean id justo. Nullam sit amet lectus. In odio. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In hac habitasse platea dictumst. Nam feugiat. Quisque nibh nibh, scelerisque ac, ultrices ut, iaculis at, ligula. Duis tempor odio in ipsum.</p> <p>Donec condimentum eros a tellus. Phasellus mauris. Aenean magna. Pellentesque enim ante, hendrerit sed, luctus ut, tempor in, lacus. Aliquam erat volutpat. Nam semper enim et enim. Sed sagittis nisi a urna. Proin mattis neque. Vivamus faucibus ipsum eu augue. Proin diam dui, posuere eu, posuere eu, elementum vel, diam.</p> <p class="post-continue"><a href="">Continue reading ...</a></p> </div> </div> <!-- END OF post featured --> <!-- post --> <div class="post"> <h2>Lorem ipsum dolor sit amet</h2> <p class="post-date">Posted August 17th, 2008</p> <div class="post-content"> <p><img src="" class="post-thumb" alt="Lorem ipsum dolor sit amet" /> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce imperdiet. Sed ullamcorper varius nibh. Vestibulum augue. Aenean id justo. Nullam sit amet lectus. In odio. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In hac habitasse platea dictumst. Nam feugiat. Quisque nibh nibh, scelerisque ac, ultrices ut, iaculis at, ligula. Duis tempor odio in ipsum.</p> <p class="post-continue"><a href="">Continue reading ...</a></p> </div> </div> <!-- END OF post --> <!-- post --> <div class="post"> <h2>Lorem ipsum dolor sit amet</h2> <p class="post-date">Posted August 17th, 2008</p> <div class="post-content"> <p><img src="" class="post-thumb" alt="Lorem ipsum dolor sit amet" /> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce imperdiet. Sed ullamcorper varius nibh. Vestibulum augue. Aenean id justo. Nullam sit amet lectus. In odio. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In hac habitasse platea dictumst. Nam feugiat. Quisque nibh nibh, scelerisque ac, ultrices ut, iaculis at, ligula. Duis tempor odio in ipsum.</p> <p class="post-continue"><a href="">Continue reading ...</a></p> </div> </div> <!-- END OF post --> <!-- page-navigation --> <div class="page-navigation"> <div class="left"><a href="">Older Posts</a></div> <div class="right"><a href="">Newer Posts</a></div> </div> <!-- END OF page-navigation --> </div> <!-- END OF content --> <!-- sidebar --> <div id="sidebar"> <!-- sidebar-ads --> <div class="sidebar-ads"> <a href=""><img src="" /></a> <a href=""><img src="" /></a> <a href=""><img src="" /></a> <a href=""><img src="" /></a> </div> <!-- END OF sidebar-ads --> <!-- sidebar-search --> <div class="sidebar-search"> <form action=""> <p><input type="text" name="search" /> <input type="submit" value="Search"/></p> </form> </div> <!-- END OF sidebar-search --> <!-- sidebar-tags --> <div class="sidebar-tags"> <ul> <li><a href="">Bloggers</a></li> <li><a href="">CSS</a></li> <li><a href="">Miscelaneous</a></li> <li><a href="">Standards</a></li> <li><a href="">Web Design</a></li> </ul> </div> <!-- END OF sidebar-tags --> <!-- sidebar-pop-posts --> <div class="sidebar-pop-posts"> <ul> <li><a href="">Lorem ipsum dolor sit amet</a></li> <li><a href="">Lorem ipsum dolor sit amet</a></li> <li><a href="">Lorem ipsum dolor sit amet</a></li> <li><a href="">Lorem ipsum dolor sit amet</a></li> </ul> </div> <!-- END OF sidebar-pop-posts --> <!-- sidebar-comments --> <div class="sidebar-pop-posts"> <ul> <li><a href="">Someone</a> on <a href="">Lorem ipsum dolor sit amet</a></li> <li><a href="">Someone</a> on <a href="">Lorem ipsum dolor sit amet</a></li> <li><a href="">Someone</a> on <a href="">Lorem ipsum dolor sit amet</a></li> <li><a href="">Someone</a> on <a href="">Lorem ipsum dolor sit amet</a></li> </ul> </div> <!-- END OF sidebar-comments --> </div> <!-- END OF sidebar --> </div> <!-- END OF content-wrapper --> <!-- site-info --> <div id="site-info"></div>
And our CSS for our content-wrapper is basically like our navigation and categories menus.
#content-wrapper {
margin: 20px auto 20px;
width: 960px;
}
Notice the margin: 20px auto 20px;? I’m applying a 20px margin to the top and bottom but the left and right have auto so it will center.
Now we are ready to style the content area. Nothing very complicating is happening to this apart from floating the whole thing to the left. If you’ve never use the float property in CSS, no better time like the present to dive right in.
The total width of our content box is 655 but since we are adding a 1px border all around and 15px of padding, we’ll need to adjust the width.
/*** content
*******************************/
#content {
background: #f4f1e2;
border: 1px solid #b4b2aa;
float: left;
padding: 15px;
width: 623px; /*655px - 1px - 1px - 15px - 15px = 623px */
}
Styling the posts
When creating our markup, we went ahead and assigned a class called post to each post sections. The first one (or latest entry) will be slightly different so we’ve added a second class (yes, you can do that) called featured.
Let’s start with the general posts then we’ll add the styles for the featured post.
/*** content - post
*******************************/
.post {
border-bottom: 1px solid #ada997;
padding: 20px 0;
}
.post h2 {
font-size: 24px;
}
.post-date {
background: url(/i/icons/calendar.png) no-repeat 0 0;
color: #777777;
font-size: 10px;
padding: 0 0 0 25px;
}
img.post-thumb {
border: 10px solid #fff;
float: right;
margin: 0 0 10px 10px;
}
.post-continue a {
color: #b54646;
font-size: 14px;
font-weight: bold;
text-decoration: none;
}</pre>
Now let's add our styles for the featured post
1.featured {
background: #fefdf6;
padding: 5px 15px;
}
.featured img.post-thumb {
border-color: #000;
}
.featured .post-content {
font-size: 14px;
}
Page navigation links
The page navigation links that the bottom of the page will enable the user to navigation through the archives.
/*** content - page navigation
*******************************/
.page-navigation {
margin-top: 25px;
}
.page-navigation .left {
background: url(/i/icons/arrow-180-medium.png) no-repeat 0 0;
padding: 0 0 0 25px;
}
.page-navigation .right {
background: url(/i/icons/arrow-000-medium.png) no-repeat right 0;
padding: 0 25px 0 0;
}
.page-navigation a {
color: #89835a;
text-decoration: none;
}
Sidebar
The sidebar is very easy to do now that the content’s done. A few blocks here and there without too much styling.
/*** sidebar
*******************************/
#sidebar {
float: right;
margin-left: 10px;
width: 295px;
}
Ads
For the ads, I usually have a stack of “dummy images” with different sizes already created. So for this I’ll just change the colors of one I already have on my computer to match the scheme of this site. I suggest you do the same. They are so easy to make: create a new 125×125 image, fill it up with color, add a nice 1px stroke (on the inside) and put the side of the ad. These are very helpful to simply just drop on your mock-ups for client work.
The ads as you can see are 2 x 2 and that will arrange itself in the browser due to the width we have given to our #sidebar so there really isn’t any need to add CSS to this.
<!-- sidebar-ads --> <div class="sidebar-ads"> <a href=""><img src="i/ads-blank.png" alt="Ad image" /></a> <a href=""><img src="i/ads-blank.png" alt="Ad image" /></a> <a href=""><img src="i/ads-blank.png" alt="Ad image" /></a> <a href=""><img src="i/ads-blank.png" alt="Ad image" /></a> </div> <!-- END OF sidebar-ads -->
If you are running this along with me and you check out the page right now, you’ll notice some big ugly borders around our ads. Eewwww! To fix this, we’ll set our images and linked images to have a border of 0.
/*** common styles
****************************************/
.left {
float: left;
}
.right {
float: right;
}
img, a img {
border: 0;
}
Ahhh… That’s better!
Search
The only we will do here is add a little padding to this section so that it’s not stuck up to the ads.
/*** sidebar - search
*******************************/
.sidebar-search {
margin: 20px 0 0;
}
Tags
Like the other 3 sections that will follow, we have to style the heading and the box.
#sidebar h4 {
color: #776a23;
font-size: 18px;
font-weight: normal;
}
.sidebar-tags, .sidebar-pop-posts, .sidebar-recent-com {
background: #f4f1e2;
border: 1px solid #b4b2aa;
padding: 8px;
}
The only thing (apart from the icons) that’s different with the tags is that the list is inline with no style.
/*** sidebar - tags
*******************************/
.sidebar-tags ul {
list-style: none;
margin: 0;
padding: 0;
}
.sidebar-tags ul li {
display: inline;
margin: 0;
padding: 0 3px;
}
Popular Posts and Recent Comments
As we said above these three blocks are all very similar. So we’ll combine the last 2 together and reuse code to shorten our CSS.
/*** sidebar - popular posts / recent comments
*******************************/
.sidebar-pop-posts ul, .sidebar-recent-com ul {
list-style: none;
margin: 0;
padding: 0;
}
.sidebar-pop-posts ul li, .sidebar-recent-com ul li {
background: url(/i/icons/bookmark-document.png) no-repeat 0 0;
margin: 8px 0 10px;
padding: 0 0 0 25px;
}
.sidebar-recent-com ul li {
background: url(/i/icons/balloon.png) no-repeat 0 0;
}
Oh and let’s not forget changing the color of those links too
"]
/*** common styles
****************************************/
.left {
float: left;
}
.right {
float: right;
}
img, a img {
border: 0;
}
a:link, a:visited, a:active {
color: #b54646;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
And the sidebar is done.
Site info (or footer)
Now if you look at the site in a browser, you’ll notice the footer stuff is tucked in the sidebar. Not good. So we’ll add a clearing div to clear the floats (see Extending the background around two floating div’s) and have the footer site nicely under all the content.
/*** common styles
****************************************/
.left {
float: left;
}
.right {
float: right;
}
img, a img {
border: 0;
}
a:link, a:visited, a:active {
color: #b54646;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
.clear {
clear: both;
}
And in our HTML
<!-- END OF sidebar --> <div class="clear"></div> <!-- END OF content-wrapper -->
Alright, now we start styling. When we started Part II, we cut up a few background/images we would need and now it’s time to use the last one, footer-bg.png. We’ll add that to our site-info div
/*** site-info
*******************************/
#site-info {
background: url(/i/footer-bg.png) repeat-x 0 0;
height: 61px; /*81px*/
padding-top: 20px;
}
Notice I’ve added a bit of padding at the top and that’s because of the rough edge. We don’t want the text to just lie up there so that’s why our height is 61 instead of 81, we need to compensate for the padding.
Now, like our content area, we want our text in the footer to stay within our 960px boundaries. So we’ll add a site-info-wrapper div to help us achieve that.
<!-- site-info --> <div id="site-info"> <div id="site-info-wrapper"> <div class="left"> <p>Copyright 2008 - Karinne Legault</p> <p>Hosted by <a href="">Hosting Company</a> / Powered by <a href="http://www.wordpress.org">Wordpress</a></p> </div> <div class="right"> <ul> <li><a href="">Home</a></li> <li><a href="">About</a></li> <li><a href="">Archives</a></li> <li><a href="">Contact</a></li> <li><a href="">RSS</a></li> </ul> </div> </div> </div> <!-- END OF site-info -->
Bottom navigation
Let’s tackle the bottom navigation first. We’ll re-use much of the code we wrote for the tags box, except we’ll add border to the right of the menu item.
/*** site-info - navigation
*******************************/
#site-info .right ul {
list-style: none;
margin: 0;
padding: 0;
}
#site-info .right ul li {
border-right: 1px solid #000;
display: inline;
margin: 0;
padding: 0 10px 0 5px;
}
If you look at this in your browser, you’ll notice the last menu item (RSS) has a border on the right which sort of look funny since there’s nothing after it. So let’s go ahead and add a class to that last item and remove the border.
<div class="right"> <ul> <li><a href="">Home</a></li> <li><a href="">About</a></li> <li><a href="">Archives</a></li> <li><a href="">Contact</a></li> <li class="last"><a href="">RSS</a></li> </ul> </div>
and the code to remove the border
"]
/*** site-info - navigation
*******************************/
#site-info .right ul {
list-style: none;
margin: 0;
padding: 0;
}
#site-info .right ul li {
border-right: 1px solid #000;
display: inline;
margin: 0;
padding: 0 10px 0 5px;
}
#site-info .right ul li.last {
border-right: none;
}
[/html]
<strong>Copyright and other info</strong>
Let's make the copyright and other info fit nice and snug together. In order to do this, we'll simply remove all margins and padding to the <code>>p<>/p<</code> tags
1"]
/*** site-info
*******************************/
#site-info {
background: url(/i/footer-bg.png) repeat-x 0 0;
height: 81px;
padding-top: 20px;
}
#site-info-wrapper {
margin: 20px auto 0;
width: 960px;
}
#site-info p {
margin: 0;
padding: 0;
}
We’re done!
That’s it! We are done!
I hope this helps some of you in understanding how to slice a mock-up in Photoshop. Like anything else in Web Design, understand that this is merely one way of doing it. It’s how I’ve done it for the past 10 years and it’s worked great for me.
Download and Demo
This is a good tutorial for putting together a XHTML/CSS site using WordPress’s default styling tags and html names, but it would be good to see a part three of actually hooking it up with WP’s dynamic code.
cheers anyway
G
@geronimo: Thanks! I’ll be starting Part III this week and I’m hoping I’ll be publishing it in the next few weeks.
@geronimo There’s not much “hooking” up to WordPress. You can dump your CSS in their stylesheet, or hook it up in the header to another external. Then you can dump the code into the header, index, and footer files just like you would a normal website. There isn’t really anything dynamic about it. WP provides templates for everything that can be easily changed with HTML/CSS.
@Amber – I agree, it’s quite easy once you have all your code written up to “plug” it into WP
Tho, I remember shaking my head and wondering how I should get started in WP back in the day. For a beginner, the task can be a daunting one. Hopefully, Part III will clear some of the mud off 
Correct me if I’m wrong but transparent png files won’t work on IE6. Shouldn’t you simply save as a jpg with a solid background?
@web design gold coast: You’re not wrong no, PNG transparent files don’t work in IE6. The point of the article was to show how to slice up a mock-up and create a working HMTL/CSS file.
However, using JPG would create so much headache with our grungy background it just wouldn’t work. There are tons of fixes out there if you still support IE6.
Hi Karinne,
I was wondering if we need to have a branding section in our css? I completed the tutorial and it’s all really good except the branding img sticks to the left hand side of the page like a magnet!
GREAT tutorial though, I’ve learnt so much going through this and am looking forward to the next part
Levi
Oh I just downloaded the demo and found it,
thanks again
Great tutorial though you could split it into more articles or the markup into more chapters, because it’s sometimes very difficult to read. I like the big navigation on this blog and in the demo, it’s so userfriendly, thanks! Just subscribing to the feed now…
@Levi – Glad to see you’ve found it!
@Manu – Yes, it’s quite lengthy isn’t it. But I didn’t want to split it as I feel it would have just left the puzzle hanging and make you guys wait for the coding section. I’m happy you liked it anyways!
I see you said the Part III is on its way…Are you still working on it. i cant wait for it to be complete!! Great job with the 2 so far!
@Colin – Yep, I’ve started it and working so it’s on it’s way
Thanks for both parts of your tutorial.They are very precise.Virtually going nuts while waiting for part 3,but if it is going to be as good as the first two,take your time.Quality allways does.Keep up the good work.
Nice write up. Thanks for posting.
Gr8…One of the best tutorial i have ever seen. nice tutorial…
I just wanted to say thanks for this tutorial.
There’s surely a raft of people like me who are intelligent enough to grasp the basics of this stuff, provided it is well explained. Unfortunately, most ‘beginner’ tutorials are not particularly well written.
I’m awaiting part three eagerly – I think I’ve got my head round the basics of HTML and CSS, but the PHP aspect of WordPress and the way the elements are split up into seperate files then called together is a little confusing.
Jim.
Almost a year later you post part II, wow…can hardly wait until 2011 for the third part.
Thank you for the introduction. Love your site. Really smart and helpful.
Hey Karinne
Thanks so much. I’m a relative beginner. Just to clarify: what you are doing is designing in Photoshop, then doing a sort of placeholder of the main aspects of the site in CSS — and then linking the two together within the CSS? Is that right from the highest of levels?
Thanks again, and can’t wait for Part III!
New site looks great. Can’t wait to see:
From Photoshop to WordPress – Part III