From PSD to Drupal Theme Tutorial Part II

SECTION II of III: HTML view part I here..

We left off with finishing the Photoshop slices. These images should be in an images folder inside a folder which will hold your website/theme files.

For this part of the tutorial you wil need a text editor. I will be using the free program TextWrangler If you are using a MAC I would recommend trying out the demo of CODA. But any text editor will suffice.

If you have experience with HTML, this may be redundant :) So feel free to skip over. Start by opening up a new page: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional //EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-us">
<head><title><!--TITLE GOES HERE!--></title></head>
<body>
<!--CONTENT GOES HERE!-->
</body>
</html>


Save this page as 'home.html' (can replace 'home' to a name of your choosing) Now open up a new page and save it as 'style.css'. If you are unfamiliar with stylesheets check out this reference Intro to CSS.
Then add <link href="style.css" rel="stylesheet" type="text/css" /> before the </head> tag. (This links the CSS stylesheet to the page.)
I will be using DIV tags instead of tables to build my page.

Looking back at our design, we will decide where and how to place div tags to break up our layout.

Where to Place DIV tags

So, to explain that image- I have cut up my layout into sections that will become div tags and identified them with a class name (ie. topcontent, topnav, etc). I have decided that my layout will have a sidebar on the right , a header and a footer. The navigation will be in the header (.topcontent).

To add a div tag type in the body tags: 
<div class="classname"></div>


As described in the above image, I will start by including a surrounding DIV (.bdcontain) and inside that div will be .topcontent, .maincontent, .rightcontent, and .footerlogin. 

<body><!--Containing DIV!-->
	<div class="bdcontain">
	
<div class="topcontent">
<div class="topnav"><!--Primary Links!-->
	<ul><li><a href="intro">Introduc•ing</a></li>
		<li><a href="intro">Show•ing</a></li>
		<li><a href="intro">Blogg•ing</a></li><li>
		<a href="intro">Contact•ing</a>
		</li></ul></div>
	<div class="toplogo"><!--Logo!--><img src="images/logo.png">
</div></div>
	<div class="topbanner"><!--Banner!--></div>
		
<div class="maincontent"><!--Main Content!-->
	<h1>Xer inibh eniat lut</h1>
	<h2>Created by <a href="name">Name</a> Dec 19th</h2>
	<p>Lortin utat. Xer inibh eniat lut vel </p>
		<a href="link">Leave a Comment</a>
		</div>
	
<div class="rightcontent">
	<!--Blocks:Search Bar, Recent Entries, More Info, User Menu!-->
	<div class="greenblock"><h3>Search Bar</h3>Searching...</div>
	<div class="orangeblock"><h3>Recent Entries</h3>Entry 1</div>
	<div class="blueblock"><h3>More Info...</h3>www.info.com</div>
	<div class="pinkblock"><h3>User Menu</h3>
		Link<br>Link<br>Link</div>
	<div class="pinkblockbottom"></div>
</div>
		
	<div class="footerlogin">
	<!--Login!-->
		Username Password etc		
	</div>
	
	</div>
</body>


I have included the image file: logo.png (from the cut slices) and bannerblue.png.

Right now, your page won't look too interesting- in fact it will look really really plain. Plain Style This is where the stylesheet comes in. Open up the style.css file, and style the identified class names (feel free to change the class names)

To position the main sections of the layout I will use floating, padding and margins.

I added this to style.css to style the divs positioning: 

/*Body DIV*/
.bdcontain{
width:792px;
}

/*Top Content*/
.topcontent{
height:91px;
}

/*Top Navigation Links*/
.topnav{
margin-top:71px;
margin-left:29px;
margin-right:23px;
margin-bottom:0px;
float:left;
}

/*Top Right Logo*/
.toplogo{
float:right;
padding-right:26px;
padding-top:15px;
}

/*Banner Beneath Top Nav*/
.topbanner{
margin-left:auto;
margin-right:auto;
width:756px;
height:138px;
}

/*Main Body Content*/
.maincontent{
width:370px;
float:left;
padding-right:0px;
margin-left:130px;
margin-top:15px;
padding-bottom:15px;

}

/*Right Blocks*/
.rightcontent{
float:right;
width:242px;
margin-top:15px;
padding-bottom:15px;
margin-right:18px;
}

/*Footer Blocks: Login*/
.footerlogin{
background-image: url(images/topcorner.png);
background-position: top;
background-repeat: no-repeat;
height:80px;
clear:both;
padding-left:30px;
padding-right:30px;
padding-top:10px;
padding-bottom:10px;
}


This is where the sliced sidebar images are placed in my layout- as background images in the CSS. 

.greenblock{
background-image: url(images/cornergreen.png);
background-color: #BED63A;
background-repeat: no-repeat;
background-x-position: left;
background-y-position: top;
padding:10px;
padding-top:10px;
padding-bottom:8px;
margin:0px;
color:#5E5A18;
}


This is the example for the green section, and is repeated for each image's respective colour.

Giving us with this result:

Style Result

As you notice, the text is unchanged in both colour and size and the background colour is missing- these can be tweaked by adding css rules to the style.css page!

This is the final result with all styles included! The Final Result

Just keep tweaking the css styles to match as closely to your photoshop document as possible!

To wrap-up:
We used our photoshop slices as:

- Background images for the rightsidebar and footer.

- Logo on the top righthand side.

- Banner added underneath the logo.

Assuming you're happy with your html, we can move on to converting to a Drupal theme in Part III.

FINISHED PART II

@wasiq Part three was posted

Submitted by Alexa Booth on Fri, 11/30/2007 - 18:49.

@wasiq Part three was posted on June 26th, here's a link: http://xalking.com/from-psd-to-drupal-theme-III

-Alexa

when third part come

Submitted by wasiq (not verified) on Fri, 11/30/2007 - 02:39.

When the third part come i am dispretly wating for it

Good, but more explanation

Submitted by Darrious (not verified) on Wed, 10/10/2007 - 14:45.

I like the first part of the tutorial, but I get confused on the second part. Would you mind to possibly have files that we could download so that we can mimic you exactly, and people can get a better understanding of how to do this. I really only get stuck at the div tags. I understand how they work, but I usually just leave all of the table tags in there, insert all of my necessary HTML, and be on my way. I know that I can't create a template without inserting div tags, but could provide a much more detailed explanation on how you do this. Or would you mind to possibly have a video tutorial so that you can record all that you do.

Thanks, Darrious