Merge CSS template with Wordpress content

I was hoping someone could help me merge a CSS template with Wordpress.

Hi, I have downloaded a CSS template and would like to have my wordpress blog fed into the News section...

Could anyone help me out?

My problem is that im new to CSS and PHP and don't really understand them (I only know HTML). Couple questions:
What software is CSS/PHP written in? I don't see a way to export HTML out of Dreamweaver. What information is held in the PHP files and what information is held in the CSS file?

I want to use this general layout and page: http://www.openwebdesign.org/viewdesign.phtml?id=3926&referer=%2Fbrowse.php
It is a downloadable CSS Template which consists of only a CSS file and an Index.html file. Is there a way to export the HTML to PHP? Wordpress seems to be only using PHP.

All I really need to do is somehow plug the comments section of my Wordpress blog into the main page section of this page so that I could update it through Wordpress admin.

I've disected this template, and a couple Wordpress templates and tried mashing them together and this is what I come up with: www.mikewcassidy.com/blog
Everything is centered and there is no left column etc...

Could anyone give me some advice? Or maybe take a look at that CSS Template and tell me what I would have to do?

Thanks..!


Here is the CSS file from the CSS Template i'd like to use with wordpress:

`

Theme Name: Mike
Description: a-brief-description
Author: Mike
Version: 1.0
.
General comments/License Statement if any.
.
*/
/*
IPHONE Theme (Version 1)
Developed by Marc Rigaud | http://www.mtnconcept.com
Any Comments or Questions, feel free to contact me via my site
*/

/* DEFAULT
---------------------------------------------------------------------------------------------------------------------------------------------------*/

html {
padding : 0;
margin : 0;
}
body {
background-color : #000000;
font-size : 12px;
font-family : Verdana, Arial, SunSans-Regular, Sans-Serif;
color : #564b47;
text-align : center;
margin : 0;
padding : 0;
}
h1 {
font-size : 14px;
padding-top : 10px;
text-transform : uppercase;
color : #ffffff;
background-color : transparent;
}
h2 {
font-size : 13px;
padding-top : 10px;
color : #564b47;
background-color : transparent;
}
h3 {
font-size : 12px;
padding-top : 10px;
color : #564b47;
background-color : transparent;
}
p {
font-size : 10px;
padding-top : 10px;
color : #564b47;
background-color : transparent;
}
a {
color : #ff9215;
font-size : 11px;
background-color : transparent;
text-decoration : none;
}
ul, li {
padding : 0;
list-style : none;
}
blockquote {
margin : 10px auto 10px auto;
width : 450px;
background : #3b3b3b url(image/blockquote.gif) no-repeat center bottom;
font-size : 1.5em;
font-style : italic;
color : #000000;
}
blockquote p {
margin : 10px;
padding : 10px;
color : #f0f0f0;
}

/* MAIN CONTAINERS AND COLUMNS - ALL THAT LAYOUT STUFF
---------------------------------------------------------------------------------------------------------------------------------------------------*/
#contenu {
width : 760px;
margin : 0 auto;
padding : 0;
text-align : left;
}
#leftcol {
width : 200px;
padding : 0;
float : left;
background-color : #000000;
}
#rightcol {
margin-top : 0;
width : 560px;
min-height : 560px;
height : auto !important;
height : 560px;
padding : 0;
float : left;
background-color : #000000;
overflow : auto;
}
/* footer */
.footer {
background: url(img/bgfooter.gif) repeat-x;
border-top: 1px dashed #333;
color: #777;
font: normal 0.9em sans-serif;
padding: 10px 0 16px;
}
.footer a {
color: #784;
text-decoration: none;
}

.post{margin:0 0 25px 0;}

.post .info{
padding:2px 3px 3px 8px;

background-color:#111;
font-size:0.9em;
color:#8dc63f;
}

.post .info a, .post .info a:hover , .post .info a:visited
{
text-decoration:none;
color:#8dc63f;
}

#commentlist li {
margin-bottom: 1.5em;
padding-bottom: 1em;
border-bottom: 1px solid #700000;
}

#commentform {
margin: 1em 0;
background: #000;
width: 280px;
}

#commentform textarea {
background: #f8f7f6;
border: 1px solid #d6d3d3;
width: 280px;
}
#commentform textarea:hover {
background: #FFFFFF;
border: 1px solid #d6d3d3;
}
#commentform textarea:focus {
background: #ffffff;
border: 1px solid #939793;
}

#commentform #email, #commentform #author, #commentform #url {
font-size: 1.1em;
background: #f8f7f6;
border: 1px solid #d6d3d3;
width: 280px;
}
#commentform #email:hover, #commentform #author:hover, #commentform #url:hover {
font-size: 1.1em;
background: #ffffff;
border: 1px solid #d6d3d3;
width: 280px;
}
#commentform #email:focus, #commentform #author:focus, #commentform #url:focus {
font-size: 1.1em;
background: #ffffff;
border: 1px solid #939793;
width: 280px;
}
#commentform input{
margin-bottom: 3px;
}
/* GO
---------------------------------------------------------------------------------------------------------------------------------------------------*/
#leftcol ul li a {
color : #8b8b8b;
display : block;
font-size : 1.2em;
text-indent : 10px;
line-height : 25px;
width : 150px;
height : 25px;
}
#leftcol ul li a:hover {
color : #fff;
background : #ff9215 url(image/menuhover.gif) no-repeat;
}
#leftcol h1 {
color : #f0f0f0;
}
#rightcolheader {
width : 560px;
min-height : 50px;
height : auto !important;
height : 50px;
background : #000000;
}
#rightcolheader h1 {
font-size : 16px;
padding-top : 15px;
text-transform : uppercase;
color : #ffffff;
background-color : transparent;
}
#rightcolpiedpage {
width : 560px;
height : 42px;
margin : 20px auto 30px auto;
background : #434343 url("image/pp.gif") no-repeat;
}
#rightcolpiedpage p {
line-height : 42px;
color : #8b8b8b;
text-indent : 10px;
}
#rightcolpiedpage a {
color : #8b8b8b;
}
#rightcolpiedpage a:hover {
color : #ccc;
border-bottom : 1px dotted #666;
}

`​

 

You can add the CSS into your stylesheet, but you have to go over every .php file and place your div IDs where it should be.

If you don't know much about php, then I suggest you should not edit anything in between a php code... Anything outside <?php ?> is usually html, which you should know.

Have a look at the source code of the page to figure out what edits you would like to make.

Alternatively, you could hire me to do it for you

 

Hey thanks Nix! What I really want is the layout of the CSS Template and the colors of the wordpress one. So would I have to take the CSS Template's index.HTML file and place the code inside of each PHP file? I put it inside the index.html and you can see what happens: w_w.mikewcassidy.c_m/blog

When you click on a comment, it takes you out of the entire webpage...

What would you charge for something like this . I might want to figure it out myself but out of curiosity.

 

Oh hey maybe someone can tell me why it flashes white at first when the page first starts to load.... its like for a second you can see the white BG with the HTML...