How to convert a photoshop document (psd) to blogger (css/xhtml)

In this tutorial i'm going to show you how to code the design from my previous tutorial into a blogger template this is going to be based on the Minima template, most of the css code in this tutorial is commented to explain what is does a css comment begins with "/*", and ends with "*/", like this /* a css comment */ i have highlighted the comments in green so you don't have to copy these, if you have any questions feel free to ask in the comments.

Start by selecting the Minima template then change the page background colour to #ebebeb from within the fonts and colours tab or go to layout > edit html then add the hex colour code #ebebeb to the body's css code also hide the blogger navbar by add the following css code

#navbar{display:none;}

we need to do some tweaking to the css code before adding our own so scroll down until you find the #outer-wrapper delete the width then set the margin and padding to 0 then add the following css code just below the #outer-wrapper.


#content-wrapper{
  padding-top:20px; /*adds 20px padding to top*/
  margin:0 auto; /*centers div*/
  width:900px; /*sets width to 900px*/
}


Now we are going to create the top navigation so copy the following css and paste it ideally above the #header-wrapper css.


#topnav{
  background:#181818; /*sets background colour*/
}
#topnav-inner{
  margin:0 auto; /*centers div*/
  padding-top:8px; /*adds 8px padding to the top*/
  height:22px; /*sets height to 22px*/
  width:900px; /*sets width to 900px*/
  font-size:11px; /*sets font size*/
}
#topnav ul{
  margin:0;padding:0; /*sets margin and padding to 0px*/
  list-style:none; /*removes bullets from list*/
}
#topnav ul li{
  margin:0; /*sets margin to 0px*/
  padding:0 15px; /*sets left and right padding to 15px*/
  border-right:1px solid #666; /*adds 1px border on right of list items*/
  float:left; /*floats list items to left*/
}
#topnav ul li.lastchild{
  border-right:0; /*removes border on right of list items with a class of lastchild*/
}
#topnav a,
#topnav a:visited{
  color:#ccc; /*sets link and visited link colour*/
}
#topnav a:hover{
  text-decoration:none; /*removes underline on hover*/
  color:#fff; /*sets colour on hover*/
}
#topnav-right{
  text-align:right; /*align text to right*/
  float:right; /*float to right*/
  margin:0;padding:0; /*sets margin and padding to 0px*/
}


Next copy the following xhtml code and paste it just above the <div id='header-wrapper'> (see screenshot)


<div id='topnav'>
<div id='topnav-inner'>
<ul>
<li><a href='/'>Home</a></li>
<li><a href='#'>About</a></li>
<li><a href='#'>Portfolio</a></li>
<li><a href='#'>Services</a></li>
<li class='lastchild'><a href='#'>Contact</a></li>
</ul>
<div id='topnav-right'>
<ul>
<li><a expr:href='data:blog.homepageUrl + "feeds/posts/default"'>Posts</a></li>
<li><a expr:href='data:blog.homepageUrl + "feeds/comments/default"'>Comments</a></li>
<li class='lastchild'><a href='#'>Email</a></li>
</ul>
</div>
<div class='clear'/>
</div>
</div>

save your template and view, it should look something like the following screenshot.

(if you want to get the all links working you need to replace the # with the actual link) so that is the top navigation done now we are going to create the header, open the photoshop document (PSD) cut a slice measuring the height of the header by 1px wide as shown below

upload the slice to your image host such as photobucket, tinypic or picasa web albums then copy the link as we will need it then find the css code for the #header-wrapper remove the width and border property then set the margin to 0 then add a background shorthand property like the following css code below replacing "images/headerbg.png" with the link to your sliced image,


#header-wrapper {
  margin:0; /*sets margin to 0px*/
  background:#e54414 url(images/headerbg.png) top left repeat-x; /*sets background colour with the image positioned at the top left repeated horizontally*/
}

in the #header-wrapper CSS code above i have used the background shorthand property with a solid colour and the image positioned at the top left repeated horizontally.

Now remove the border and text-align properties for the #header css code, set the margin to margin:0 auto; the color to white #fff then add a width and height property with the height set at 130px and the width at 900px finally add an overflow property set as hidden your css for the #header should look like the following.


#header {
  margin:0 auto; /*centers div*/
  color:#fff; /*sets text colour*/
  height:130px; /*sets height to 130px*/
  width:900px; /*sets width to 900px*/
  overflow:hidden; /*hides overflowing content*/
}


Save your template and view, it should look something like the following screenshot (note i have tweaked the CSS code for the blog title and description also i changed the text font styles from within the fonts and colours tab so your text styles may look different from mine).

Next we are going to create the navigation bar just below the header, open the photoshop document (PSD) cut a slice measuring the height of the navigation bar plus the drop shadow by 1px wide as shown in the screenshot below

upload the slice to your image host then copy the link again like we did with the header then add the following css code to your template ideally below the #header .description css replacing "images/navbg.png" with the link to your sliced image.


#nav{
  margin:0; /*sets margin to 0px*/
  background:#e0e0e0 url(images/navbg.png) top left repeat-x;/*sets background colour with the image positioned at the top left repeated horizontally*/
}
#nav-inner {
  margin:0 auto; /*centers div*/
  width:900px; /*sets width to 900px*/
  height:44px; /*sets height to 44px*/
  font-weight:bold; /*sets text style to bold*/
}

Next copy the following xhtml code and paste it just above the <div id='content-wrapper'> (see screenshot)

<div id='nav'>
 <div id='nav-inner'>
  <!-- unordered list todo -->
 </div>
</div>


save your template and view, it should look something like the following screenshot when viewed in a web browser.

Now we are going to create the navigation links, open the photoshop document (PSD) and slice one of the seperators

upload the slice to your image host, copy the link again like we did with the other two slices then add the following css code to your template below the #nav-inner css replacing "images/sep.png" with the link to your slice.


#nav-inner ul {
  margin:0;padding:0; /*sets margin and padding to 0px*/
  list-style:none; /*removes bullets from list*/
}
#nav-inner li {
  float:left; /*floats list items to left*/
  margin:0; /*sets margin to 0px*/
  padding:0 1px 0 0; /*sets 1px padding on right*/
  background: url(images/sep.png) top right no-repeat ; /*sets background image positioned at top right no repeat*/
}
#nav-inner a {
  float:left; /*floats links to left*/
  text-decoration:none; /*removes underline*/
  color:#8c8c8c; /*sets text colour*/
  margin:0; /*sets margin to 0px*/
  padding:12px 20px; /*sets padding on top and bottom to 12px left and right to 20px */
}
#nav-inner a:hover {
  background:#fff;/*sets background colour on hover*/
  text-decoration:none;/*removes underline on hover*/
  color:#e14316;/*sets text colour on hover*/
}


Now modify the xhtml code for the <div id='nav'> we created earlier by removing the comment and adding an unordered list so your xhtml code should look something like the following,

<div id='nav'>
 <div id='nav-inner'>
  <ul>
   <li><a href='/'>Home</a></li>
   <li><a href='#'>About</a></li>
   <li><a href='#'>Portfolio</a></li>
   <li><a href='#'>Services</a></li>
   <li><a href='#'>Contact</a></li>
  </ul>
 </div>
</div>


save your template again and view in a web browser, it should look something like the following screenshot.

Next we are going to create the main post section, so first make sure you have expanded the widget templates then find the code for the post date as shown in the screenshot below

cut and paste it to notepad as we are going to move it underneath the post title then find the post includable it should look something like the following

modify the code, just below <div class='post hentry'> add <div class='post-inner'> make sure you add the closing </div> tag at the very bottom of the post includable then add <small class='post-meta'> just underneath the post title with the post date, labels and author info make sure you add the closing </small> tag then just underneath there add <div class='comment-icon'> with the comment count link (note i have tweaked the code to display a number only instead of the default "0 comments") don't forget the closing </div> tag basically make your code look like mine below

<b:includable id='post' var='post'>
<div class='post hentry'>
<div class='post-inner'>
<a expr:name='data:post.id'/>
<b:if cond='data:post.title'>
<h3 class='post-title entry-title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h3>
</b:if>

<b:if cond='data:blog.pageType != "static_page"'>
<small class='post-meta'>
<b:if cond='data:post.dateHeader'>Posted <data:post.dateHeader/></b:if>
<b:if cond='data:post.labels'>
in <b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if></b:loop></b:if>
<b:if cond='data:top.showAuthor'>by <data:post.author/></b:if>
</small></b:if>

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<div class='comment-icon'><b:if cond='data:post.allowComments'><a expr:href='data:post.addCommentUrl'><b:if cond='data:post.numComments == 1'>1<b:else/><b:if cond='data:post.numComments == 0'>0<b:else/><data:post.numComments/></b:if></b:if></a></b:if></div>
</b:if>

<div class='post-header-line-1'/>

<div class='post-body entry-content'>
<data:post.body/>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>

<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + &quot;#more&quot;' expr:title='data:post.title'><data:post.jumpText/></a>
</div>
</b:if>

<div class='post-footer'>
<div class='post-footer-line post-footer-line-1'>
<span class='post-timestamp'>
<b:if cond='data:top.showTimestamp'>
<data:top.timestampLabel/>
<b:if cond='data:post.url'>
<a class='timestamp-link' expr:href='data:post.url' rel='bookmark' title='permanent link'><abbr class='published' expr:title='data:post.timestampISO8601'><data:post.timestamp/></abbr></a>
</b:if>
</b:if>
</span> <span class='post-icons'>
<!-- email post links -->
<b:if cond='data:post.emailPostUrl'>
<span class='item-action'>
<a expr:href='data:post.emailPostUrl' expr:title='data:top.emailPostMsg'>
<img alt='' class='icon-action' height='13' src='http://www.blogger.com/img/icon18_email.gif' width='18'/>
</a>
</span>
</b:if>

<!-- quickedit pencil -->
<b:include data='post' name='postQuickEdit'/>
</span> <span class='post-backlinks post-comment-link'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:post.showBacklinks'>
<a class='comment-link' expr:href='data:post.url + &quot;#links&quot;'><data:top.backlinkLabel/></a>
</b:if>
</b:if>
</span> </div>

<div class='post-footer-line post-footer-line-2'> </div>

<div class='post-footer-line post-footer-line-3'/>
</div>
</div></div>
</b:includable>

now open the photoshop document (PSD) then cut out the comment icon, create a slice measuring 240 pixel by 1 pixel wide of the post background and nudge it down by 2px from the top,

upload the post background slice and comment icon to your image host and copy the links like we did with the other slices then find the following css code for the post

.post {
  margin:.5em 0 1.5em;
  border-bottom:1px dotted $bordercolor;
  padding-bottom:1.5em;
}
.post h3 {
  margin:.25em 0 0;
  padding:0 0 4px;
  font-size:140%;
  font-weight:normal;
  line-height:1.4em;
  color:$titlecolor;
}
.post h3 a, .post h3 a:visited, .post h3 strong {
  display:block;
  text-decoration:none;
  color:$titlecolor;
  font-weight:normal;
}
.post h3 strong, .post h3 a:hover {
  color:$textcolor;
}
.post-body {
  margin:0 0 .75em;
  line-height:1.6em;
}


modify the code, add some custom css selectors as shown below replacing "images/postbg.png" with the link to your post background slice and "images/commentbg.png" with the link to the comment icon

.post {
  margin:0 0 1.5em; /*sets bottom margin to 1.5em*/
  border:1px solid #dedede; /*adds 1px border*/
}
.post-inner{
  border:1px solid #fff;/*adds 1px border*/
  padding:9px 10px; /*sets top and bottom padding to 9px left and right to 10px*/
  position:relative; /*relative positioning*/
  background:#fff url(images/postbg.png) top left repeat-x; /*sets background colour with the slice positioned at the top left repeated horizontally*/
}
.post h3 {
  margin:0; /*sets margin to 0px*/
  padding-bottom:10px; /*adds 10px padding to bottom*/
  padding-right:50px; /*adds 50px padding to right*/
  font-family: Arial, Helvetica, sans-serif; /*sets font family*/
  font-size:20px; /*sets font size*/
  font-weight:normal; /*sets font weight*/
  line-height:1.05em; /*sets line height*/
  letter-spacing:-1px; /*sets letter spacing*/
  color:#333; /*sets text color*/
}
.comment-icon {
  position:absolute; /*absolute positioning*/
  right:10px; /*position element 10px from right*/
  top:9px; /*position element 9px from top*/
  font-family: Arial, Helvetica, sans-serif; /*sets font family*/
  font-size:20px; /*sets font size*/
  text-align:center; /*align text to center*/
  width:50px; /*sets width*/
  height:43px; /*sets height*/
  line-height:34px; /*sets line height*/
  background: url(images/commentbg.png) no-repeat; /*sets background comment icon no repeat*/
}
.comment-icon a,
.comment-icon a:visited,
.comment-icon a:hover,
.post h3 a,
.post h3 a:visited,
.post h3 a:hover,
.post h3 strong {
  text-decoration:none; /*removes underline*/
  color:#333; /*sets text colour*/
}
.post-meta {
  background:#e14214; /*sets background colour*/
  padding:3px 5px; /*sets top and bottom padding to 3px left and right to 5px*/
  color:#fff; /*sets text colour*/
  font-weight:bold;/*sets text bold*/
  font-size:10px;/*sets font size*/
}
.post-meta a,
.post-meta a:visited,
.post-meta a:hover{
  color:#fff; /*sets text colour*/
}
.post-body {
  margin:0 0 .75em; /*sets bottom margin to 0.75em*/
  line-height:1.6em; /*sets line height*/
  padding-top:10px; /*sets top padding to 10px*/
}

finally find the css code for the #main-wrapper increase the width to 600px save template and view, it should look something like the following screenshot.

I did the same for the comments section however i do not show you here because it is basically done the same way as the post section.

Now we are going to do the sidebar widgets, it could be done the same way as the post by using the same slice but you would need to edit the code for every widget you add to the sidebar, so we are going to do it another way first open the photoshop document (PSD) and cut out a section measuring 280 pixel wide by 240 pixel high this section should just sit inside the gray border

upload the image to your image host then copy the link and find the following css code for the sidebar

.sidebar .widget, .main .widget {
  border-bottom:1px dotted $bordercolor;
  margin:0 0 1.5em;
  padding:0 0 1.5em;
}

modify the code until it looks like mine below replacing "images/sidebarbg.png" with the link to your sidebar background image

.sidebar .widget{
  border:1px solid #dedede; /*adds 1px border*/
  margin:0 0 1.5em; /*sets bottom margin to 1.5em*/
  padding:8px; /*adds 8px padding on all 4 sides*/
  width:264px; /*fixes a bug in IE, 8px padding on left and right total width is 280px*/
  background:#fff url(images/sidebarbg.png) top left no-repeat; /*sets background colour with image positioned at top left no repeat*/
}

next find the css code for the #sidebar-wrapper, increase the width property from 220px to 282px and finally tweak the code for the sidebar titles by looking for the following css code,

h2 {
  margin:1.5em 0 .75em;
  font:$headerfont;
  line-height: 1.4em;
  text-transform:uppercase;
  letter-spacing:.2em;
  color:$sidebarcolor;
}

modify the css until it looks like mine below

.sidebar h2 {
  margin:0;
  padding:0 0 3px;
  font-weight:normal;
  font-size:18px;
  font-family: Arial, Helvetica, sans-serif;
  line-height: 1.2em;
  letter-spacing:-1px;
  color:#333;
}

save template and view in a web browser, it should look something like the following screenshot

next we are going to create the footer so look for the following css code

#footer {
  width:660px;
  clear:both;
  margin:0 auto;
  padding-top:15px;
  line-height: 1.6em;
  text-transform:uppercase;
  letter-spacing:.1em;
  text-align: center;
}

increase the width to 900px and the line-height to 2.9em then delete the padding, text-transform, letter-spacing and text-align properties then add a color and font-size property with the colour set at #ccc and the font at 12px finally your css for the footer should look like mine below

#footer {
  width:900px;
  clear:both;
  margin:0 auto;
  line-height:2.9em;
  color:#ccc;
  font-size:12px;
}

now add the following css code to your template ideally above the css we just created for the #footer

#footer-wrapper {
  background:#181818;
}
#footer a,
#footer a:hover,
#footer a:visited {
  color:#ccc;
}

now scroll to the very bottom of your template until you see the following xhtml code

  <div id='footer-wrapper'>
   <b:section class='footer' id='footer'/>
  </div>

modify the code and add your copyright info here's what mine look's like

<div id='footer-wrapper'>
<div id='footer'>
<span style='float:left;'>
&#169; 2010 <a expr:href='data:blog.homepageUrl'><data:blog.title/></a> |
Powered by <a href='http://www.blogger.com'>Blogger</a>
</span>
<span style='float:right;'>
Design by <a href='http://www.lawnydesigns.com'>LawnyDesigns</a>
</span>
<div class='clear'/>
</div>
</div>

that is the layout complete save your template and view, here's my result now if you go to Layout > Page Elements you will see that it looks a mess like the following screenshot

you can easy clear up the page elements tab by using code below added just before the closing </head> tag

<style type='text/css'>
#layout #nav-inner,
#layout #topnav-inner,
#layout #footer{display:none;}
#layout #header,
#layout #content-wrapper{width:800px;}
#layout #main-wrapper{width:450px;}
#layout #header{height:auto;}
#layout .sidebar .widget{width:auto;}
#layout #header-wrapper {clear:both;}
</style>

now save your template and view the page elements tab it should look something like the following screenshot

you can download the template from my other blog i hope you enjoyed reading this tutorial any questions ask in the comments.