asked on

Help needed in making my first Wordpress theme

Hi,

I've been trying to create a Wordpress theme, I've watch several videos and gone through several tutorials and they all make it look easy, but either I'm missing important information or they are because after importing my theme, everything is a mess :-/

I created what I thought would have been a fairly straight forward HTML page with a Header, Content, Sidebar and Footer all within a Wrapper Div, I then copied the relevant parts into separate PHP files and used the PHP code from the twentyten theme, which it seems others do quite successfully.

Here is the original HTML & CSS Code

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Draft-Template-v2.2</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="wrapper">
    <div id="header">
    <div id="header_top"><img src="images/Flip-it-logo.png" class="logo" width="168" height="57" alt="Company Logo">
    <div id="navigation">
    <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#">Portfolio</a></li>
        <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
    <li><a href="#">Blog</a></li>
    </ul></div></div>
    <div id="header_bottom"></div>
</div>    
  <div id="main_content">content</div>
    <div id="sidebar">sidebar</div>
</div>
<div id="footer">footer</div>
</body>
</html>

Open in new window

@charset "utf-8";
/* CSS Document */
* {/* for demo only*/
    margin:0;
    padding:0
}
html, body {
    height:100%;/* needed to base 100% height on something known*/
    text-align:center;
}
body {
	overflow-y: scroll;
	background-color: #C4ECFF;
	font-family: Arial, Helvetica, sans-serif;
	background-repeat: repeat-x;
}
#wrapper {
	width: 950px;
	margin:auto;
	min-height:100%;
	margin-top:-150px;/*footer height - this drags the outer 40px up through the top of the monitor */
	text-align:left;
	background-color: #FFF;
}

* html #outer {
    height:100%
}
#header {
	border-top:150px solid #fff; /* soak up negative margin and allows header to start at top of page*/
	height:240px;
	width:100%;
}
#navigation {
	padding-top:70px;
	padding-right:30px;
	float: right;
}
#navigation a {
	display:block;
	width:90px;
	height:30px;
	padding-top:4px;
	color: #FFF;
	text-align: center;
	text-decoration:none;
}
#navigation a:hover {
	background-color:#216c9b;
	border-bottom-width: 3px;
	border-bottom-style: solid;
	border-bottom-color: #66bc29;
}
#navigation a:active {
	border-bottom-width: 3px;
	border-bottom-style: solid;
	border-bottom-color: #66bc29;
}
#header_top {
	background-image: url(images/header_bg.png);
	background-repeat: repeat-x;
	height: 107px;
}
.logo {
    float: left;
	clear:left;
    padding-top: 27px;
    padding-left: 18px;
}
#navigation ul {
	list-style-type:none;
}
#navigation li {
float:left;
padding-left:10;
padding-right:10;
}
#header_bottom {
	background-image: url(images/header_img.png);
	height: 133px;
}
#main_content{
	width:530px;
	font-size: 14px;
	background-color: #FFF;
	float: left;
	padding: 10px;
}
#sidebar{
	width:320px;
	background-color: #FFF;
	float: right;
	width: 40%;
	padding:10px;
}
#fresh_txt {
	padding-left: 385px;
	padding-right: 30px;
	text-align: justify;
}
#toptitle {
	padding-left: 14px;
	padding-top:5px;
	padding-bottom:20px;
}
#mobile_tagline {
	padding-left: 14px;
	padding-top:25px;
	padding-bottom:20px;
}
#footer {/* footer now sits at bottom of window*/
	height: 150px;
	width:880px;
	margin:auto;
	clear:both;
	background-image: url(images/footer_bg.png);
	background-repeat: repeat-x;
	font-family: Tahoma, Geneva, sans-serif;
	font-size: 14px;
	color: #999;
	padding: 35px;
}

/*Opera Fix*/
body:before {/* thanks to Maleika (Kohoutec)*/
    content:"";
    height:100%;
    float:left;
    width:0;
    margin-top:-32767px;/* thank you Erik J - negate effect of float*/
}
#outer:after {/* thank you Erik J - instead of using display table for ie8*/
    clear:both;
    display:block;
    height:1%;
    content:" ";
}
.align-right {float:right;}
#main_content p {
	line-height: 22px;
}

.fruit {float:left; padding-left:10px;}

Open in new window

This is the theme looking terrible on the blog http://burninghand.co.uk/blog/
Also attaching the theme as I uploaded it.

Can anyone help me?

Is the orginal HTML good to work with?
Do I need to add my CSS to the original twentyten CSS instead of replacing it all together?

I guess I'll have to take it step by step asking separate questions along the way so if someone is willing to help me (hold my hand a little along the way) I'll keep asking new questions and adding points to each one :)
FlipitTheme2.zip

ASKER CERTIFIED SOLUTION

Carlos Llanos

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Carlos Llanos

I spent a few minutes and changed a few css rules and got this:

Here are the rules I changed:

Line #38: remove: border-top: 150px solid #FFFFFF;
Line #43: change padding-top: 70px --> padding-top: 30px
Line #26: remove margin-top: -150px

It clearly looks like it's all CSS...firebug will help a lot.

Carlos Llanos

I have attached the new css with the modifications I made to it.
style.css

Carlos Llanos

I've also updated the header.php template to resolve to the correct logo image url path...
header.php

Tezdread

ASKER

Hi NUKIT and thanks for your help.

I didn't have Firefox\Firebug but I am getting them right now.

I did start thinking that one of my problems is because I used code to give me a 'Sticky Footer' and this is probably not going to be necessary for a Wordpress theme as I'm sure there will always be enough content to push the Footer down. So I'll remove that and that will make the header the correct width again as it should be the same as the content & footer.

I'll accept one of your solutions, do a little more work then post back here probably Monday and hopefully you will be able to help me work through this till I complete my theme.

Thanks