• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 515
  • Last Modified:

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
0
Tezdread
Asked:
Tezdread
  • 4
1 Solution
 
Andrew DerseIT ManagerCommented:
I would definitely break this up into a few different css parts.

Looks like the code for the template html is straight forward...now we just need to work on the css...

Do you happen to have firebug for firefox?  This will greatly help in troubleshooting the template's css.
0
 
Andrew DerseIT ManagerCommented:
I spent a few minutes and changed a few css rules and got this:

css
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.
0
 
Andrew DerseIT ManagerCommented:
I have attached the new css with the modifications I made to it.
style.css
0
 
Andrew DerseIT ManagerCommented:
I've also updated the header.php template to resolve to the correct logo image url path...
header.php
0
 
TezdreadAuthor Commented:
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
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Cloud Class® Course: Microsoft Office 2010

This course will introduce you to the interfaces and features of Microsoft Office 2010 Word, Excel, PowerPoint, Outlook, and Access. You will learn about the features that are shared between all products in the Office suite, as well as the new features that are product specific.

  • 4
Tackle projects and never again get stuck behind a technical roadblock.
Join Now