?
Solved

Help needed in making my first Wordpress theme

Posted on 2012-09-07
5
Medium Priority
?
512 Views
Last Modified: 2012-09-08
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
Comment
Question by:Tezdread
  • 4
5 Comments
 
LVL 13

Accepted Solution

by:
Andrew Derse earned 1500 total points
ID: 38376932
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
 
LVL 13

Expert Comment

by:Andrew Derse
ID: 38376995
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
 
LVL 13

Expert Comment

by:Andrew Derse
ID: 38377018
I have attached the new css with the modifications I made to it.
style.css
0
 
LVL 13

Expert Comment

by:Andrew Derse
ID: 38377042
I've also updated the header.php template to resolve to the correct logo image url path...
header.php
0
 
LVL 1

Author Comment

by:Tezdread
ID: 38379202
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

Featured Post

New feature and membership benefit!

New feature! Upgrade and increase expert visibility of your issues with Priority Questions.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Q&A with Course Creator, Mark Lassoff, on the importance of HTML5 in the career of a modern-day developer.
Without even knowing it, most of us are using web applications on a daily basis.  In fact, Gmail and Yahoo email, Twitter, Facebook, and eBay are used by most of us daily—and they are web applications. We generally confuse these web applications to…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
This video shows how to quickly and easily deploy an email signature for all users in Office 365 and prevent it from being added to replies and forwards. (the resulting signature is applied on the server level in Exchange Online) The email signat…
Suggested Courses
Course of the Month13 days, 22 hours left to enroll

807 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question