WordPress Theme Tutorial Pt 5

 

Wordpress Theme TutorialIn my previous WordPress Theme Tutorial I showed you all the HTML that goes into a WordPress Theme.

In this part of the video tutorial I’ll show you all of the CSS code that you need to style the theme. If you don’t understand CSS check out this CSS Layout Tutorial. You can also learn more about the menu used here CSS Layouts and Menu Tutorial.

All of the code I use is also available either for download and it also follows the video below. Here is the code:

Leave any questions of comments below.

Code From the Video

index.html

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml” lang=”en” xml:lang=”en”>
<head>
<meta http-equiv=”Content-Type” content=”text/html;charset=ISO-8859-1″ />
<title>Website Layout</title>
<link rel=”StyleSheet” href=”style.css” />
<link rel=”StyleSheet” href=”home.css” />
<link rel=”StyleSheet” href=”./includes/menu.css” />
<script type=”text/javascript” src=”./includes/menu.js”></script>
</head>

<body>

<div id=”pageWrapper”>

<div id=”header”>

<img src=”./images/logo2.png” alt=”Key Care Logo” width=”60px” height=”60px” id=”logo” />

<h1 id=”blogTitle”>Key Care</h1>

<p id=”blogSlogan”>Home Health &amp; Hospice</p>

</div>

<div id=”menu”>

<!– This dropdown menu is created by using a table named “navbar”. It has a default width of 800 pixels –>
<table width=”1000″>
<tr>

<!– We are creating the first column in the table and assigning the css attributes assigned to “menuNormal”. We are defining         the width to be 160 pixels. We will trigger javascript functions on both the onmouseover and onmouseout events. –>

<td onmouseover=”expand(this);”
onmouseout=”collapse(this);”>

<!– This is the menu item name that will appear at the top of the screen –>

<p>Menu 1</p>

<!– Each drop-down menu is contained within a DIV element nested within each top-level TD element. There is a table nested         inside of each of those div’s. When a onmouseover event is triggered the div’s attribute display is switched from none to             inline, which allows a visitor to see the div on screen.–>

<div >
<table >
<tr><td>
<a href=”page.htm”>Item 1</a>
</td></tr>
<tr><td>
<a href=”page.htm”>Item 2</a>
</td></tr>
<tr><td>
<a href=”page.htm”>Item 3</a>
</td></tr>
<tr><td>
<a href=”page.htm”>Item 4</a>
</td></tr>
</table>
</div>
</td>

<td  onmouseover=”expand(this);”
onmouseout=”collapse(this);”>
<p>Menu 2</p>
<div >
<table >
<tr><td>
<a href=”page.htm”>Item 1</a>
</td></tr>
<tr><td>
<a href=”page.htm”>Item 2</a>
</td></tr>
<tr><td>
<a href=”page.htm”>Item 3</a>
</td></tr>
<tr><td>
<a href=”page.htm”>Item 4</a>
</td></tr>
</table>
</div>
</td>

<td  onmouseover=”expand(this);”
onmouseout=”collapse(this);”>
<p>Menu 3</p>
<div >
<table >
<tr><td>
<a href=”page.htm”>Item 1</a>
</td></tr>
<tr><td>
<a href=”page.htm”>Item 2</a>
</td></tr>
<tr><td>
<a href=”page.htm”>Item 3</a>
</td></tr>
<tr><td>
<a href=”page.htm”>Item 4</a>
</td></tr>
</table>
</div>
</td>

<td  onmouseover=”expand(this);”
onmouseout=”collapse(this);”>
<p>Menu 4</p>
<div >
<table >
<tr><td>
<a href=”page.htm”>Item 1</a>
</td></tr>
<tr><td>
<a href=”page.htm”>Item 2</a>
</td></tr>
<tr><td>
<a href=”page.htm”>Item 3</a>
</td></tr>
<tr><td>
<a href=”page.htm”>Item 4</a>
</td></tr>
</table>
</div>
</td>

</tr>
</table>

</div>

<div id=”featuredBanner”>
<img src=”./images/nursebanner.png” alt=”Nurse Banner” height=”250px” width=”1000px” id=”featuredImage” />
</div>

<div id=”firstSidebar”>

<div>

<div> <h4>Title in Sidebar</h4></div>
<p>Random text in the sidebar</p>
<a href=”#”>Click for More</a>

<div> <h4>Title in Sidebar</h4></div>
<p>Random text in the sidebar</p>
<a href=”#”>Click for More</a>

<div> <h4>Title in Sidebar</h4></div>
<p>Random text in the sidebar</p>
<a href=”#”>Click for More</a>

</div>

</div>

<div id=”secondSidebar”>

<div>

<div> <h4>Title in Sidebar</h4></div>
<p>Random text in the sidebar</p>
<a href=”#”>Click for More</a>

<div> <h4>Title in Sidebar</h4></div>
<p>Random text in the sidebar</p>
<a href=”#”>Click for More</a>

<div> <h4>Title in Sidebar</h4></div>
<p>Random text in the sidebar</p>
<a href=”#”>Click for More</a>

</div>

</div>

<div id=”mainContent”>

<div id=”introTitle”><h2>Welcome to My Website</h2></div>

<p id=”introParagraph”>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>

<ul id=”postLists”>
<li>

<h3>Post Title Goes Here</h3>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.<br />
<a href=”#”>Click for More</a></p>

<img src=”./images/logo.png” alt=”Key Care Logo” width=”60px” height=”60px” />
</li>
<li>

<h3>Post Title Goes Here</h3>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.<br />
<a href=”#”>Click for More</a></p>

<img src=”./images/logo.png” alt=”Key Care Logo” width=”60px” height=”60px” />
</li>
</ul>

</div>

<div id=”footer”>

<div id=”copyright”>&copy; 2011 My Theme</div>

</div>

</div>

</body>
</html>

style.css

/*
Theme Name: New Think Tank Theme 1
Theme URI: http://www.newthinktank.com
Description: My first theme that was built by scratch
Author: Derek Banas
Author URI: http://www.newthinktank.com
Version: 1
*/

html {
background: #EEE1C2;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’#EEE1C2′, endColorstr=’#FFFFFF’); /* for IE */
background-image: -webkit-gradient(linear, left top, left bottom, from(#EEE1C2), to(#FFFFFF)); /* for webkit browsers */
background-image: -moz-linear-gradient(top,  #EEE1C2,  #FFFFFF); /* for firefox 3.6+ */
}

body {
background-color: #EEE1C2;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’#EEE1C2′, endColorstr=’#FFFFFF’); /* for IE */
background-image: -webkit-gradient(linear, left top, left bottom, from(#EEE1C2), to(#FFFFFF)); /* for webkit browsers */
background-image: -moz-linear-gradient(top,  #EEE1C2,  #FFFFFF); /* for firefox 3.6+ */
font: 14px/1.4 Georgia, serif;
}

#header, #footer, #firstSidebar, #secondSidebar {
display: block;
}

#pageWrapper {
width:1000px;
background-color: #FFFFFF;
margin-left: auto;
margin-right: auto;
}

/* All Header CSS Styling */
#header {
position: relative;
background-color: #A11C46;
height: 55px;
padding: 20px;
}

#blogTitle {
position: absolute;
left: 86px;
top: -15px;
color: #FFFFFF;
font: bold 40px/1.4 Georgia, serif;
text-shadow: #000000 2px 2px 1px;
}

#blogSlogan {
position: absolute;
left: 86px;
top: 48px;
color: #FFFFFF;
font: bold 15px/1.4 Georgia, serif;
text-shadow: #000000 2px 2px 1px;
}

/* All Sidebar CSS Styling */

#firstSidebar {
font: 13px/1.4 Georgia, serif;
color: #666;
padding 5px;
padding-bottom: 15px;
padding-left: 10px;
background-color: #FFFFFF;
width: 150px;
text-align: left;
float: right;
margin-left: 5px;
margin-right: 5px;
margin-top: 5px;
}

#secondSidebar {
font: 13px/1.4 Georgia, serif;
color: #666;
padding 5px;
padding-bottom: 15px;
padding-left: 10px;
border-left: 2px solid #A11C46;
background-color: #FFFFFF;
width: 150px;
text-align: left;
float: right;
margin-left: 5px;
margin-right: 5px;
margin-top: 5px;
}

.sidebarTitle {
font: bold 15px/1.0 Arial, sans-serif;
color: #A11C46;
}

#footer {
background-color: #A11C46;
text-align: center;
color: #FFF;
padding: 20px;
}
home.css

#mainContent {
padding: 0px 5px 0px 15px;
background-color: #FFFFFF;
margin-right: 355px;
margin-top: 5px;
}

#introTitle {
background-color: #A11C46;
color: #FFFFFF;
padding: 2px 2px 2px 5px;
text-shadow: #000000 2px 2px 1px;
}

#introParagraph {
font-style: italic;
}

#postLists {
position: relative;
list-style: none;
}

#postLists li {
position: relative;
margin-left: -40px;
}

.postTitle {
background-color: #A11C46;
color: #FFFFFF;
padding: 5px;
text-shadow: #000000 2px 2px 1px;
}

.postImage {
position: absolute;
top: 50px;
left: 0px;
}

.postExcerpt {
position: relative;
padding: 0px 0px 0px 80px;
color: #666;
line-height: 1.5;
}

.postContent {
position: relative;
padding: 0px 0px 0px 80px;
color: #666;
line-height: 1.5;
}
menu.css

table.navbar
{font: bold 14px/.5 Arial, sans-serif;
margin: 0px;
padding: 0px;
border: 0px;
font-weight: bold;}

table.menu
{font-size: 10pt;
margin: 0px;
padding: 0px;
font-weight: bold;}

td.menuNormal
{padding: 0px 0px 0px 5px;
width: 160px;
color: white;
font-weight: bold;
vertical-align: top; /* Sets the vertical alignment to the top of the div */
background-color: #A11C46;}

td.menuHover
{padding: 0px 0px 0px 5px;
width: 160px;
color: black;
font-weight: bold;
vertical-align: top;
/*remove the following line for drop-down menu with images*/
background-color: #FFF;}

div.menuNormal
{display: none; /* States that this div should not display */
font: bold 14px/1.5 Arial, sans-serif;
position: static;} /* Tells the element to just flow with everything else */

div.menuHover
{border: 1.5px solid white;
font: bold 14px/1.5 Arial, sans-serif;
background-color: #A11C46;
display: inline; /* Tells the div to generate an inline box with no line break*/
position: absolute;} /* Positions the element relative to the parent */

a.menuitem:link
{text-decoration: none;
color: white;
padding: 2.5px;
background-color: #A11C46;
border-bottom: 2.5px solid white;
display: block;} /* Display a line break before and after the box */

a.menuitem:visited
{text-decoration: none;
color: white;
padding: 2.5px;
background-color: #A11C46;
border-bottom: 2.5px solid white;
display: block;} /* Display a line break before and after the box */

a.menuitem:hover
{text-decoration: none;
color: black;
padding: 2.5px;
background-color: #FFF;
border-bottom: 2.5px solid white;
display: block;} /* Display a line break before and after the box */

a.menuitem:active
{text-decoration: none;
color: black;
padding: 2.5px;
background-color: A11C46;
border-bottom: 2.5px solid white;
display: block;} /* Display a line break before and after the box */

menu.html

<!– This dropdown menu is created by using a table named “navbar”. It has a default width of 1000 pixels –>
<table width=”1000″>
<tr>

<!– We are creating the first column in the table and assigning the css attributes assigned to “menuNormal”. We are defining         the width to be 160 pixels. We will trigger javascript functions on both the onmouseover and onmouseout events. –>

<td onmouseover=”expand(this);”
onmouseout=”collapse(this);”>

<!– This is the menu item name that will appear at the top of the screen –>

<p>Menu 1</p>

<!– Each drop-down menu is contained within a DIV element nested within each top-level TD element. There is a table nested         inside of each of those div’s. When a onmouseover event is triggered the div’s attribute display is switched from none to             inline, which allows a visitor to see the div on screen.–>

<div >
<table >
<tr><td>
<a href=”page.htm”>Item 1</a>
</td></tr>
<tr><td>
<a href=”page.htm”>Item 2</a>
</td></tr>
<tr><td>
<a href=”page.htm”>Item 3</a>
</td></tr>
<tr><td>
<a href=”page.htm”>Item 4</a>
</td></tr>
</table>
</div>
</td>

<td  onmouseover=”expand(this);”
onmouseout=”collapse(this);”>
<p>Menu 2</p>
<div >
<table >
<tr><td>
<a href=”page.htm”>Item 1</a>
</td></tr>
<tr><td>
<a href=”page.htm”>Item 2</a>
</td></tr>
<tr><td>
<a href=”page.htm”>Item 3</a>
</td></tr>
<tr><td>
<a href=”page.htm”>Item 4</a>
</td></tr>
</table>
</div>
</td>

<td  onmouseover=”expand(this);”
onmouseout=”collapse(this);”>
<p>Menu 3</p>
<div >
<table >
<tr><td>
<a href=”page.htm”>Item 1</a>
</td></tr>
<tr><td>
<a href=”page.htm”>Item 2</a>
</td></tr>
<tr><td>
<a href=”page.htm”>Item 3</a>
</td></tr>
<tr><td>
<a href=”page.htm”>Item 4</a>
</td></tr>
</table>
</div>
</td>

<td  onmouseover=”expand(this);”
onmouseout=”collapse(this);”>
<p>Menu 4</p>
<div >
<table >
<tr><td>
<a href=”page.htm”>Item 1</a>
</td></tr>
<tr><td>
<a href=”page.htm”>Item 2</a>
</td></tr>
<tr><td>
<a href=”page.htm”>Item 3</a>
</td></tr>
<tr><td>
<a href=”page.htm”>Item 4</a>
</td></tr>
</table>
</div>
</td>

</tr>
</table>
menu.js

function expand(s)
{
var td = s;
var d = td.getElementsByTagName(“div”).item(0);

td.className = “menuHover”;
d.className = “menuHover”;
}

function collapse(s)
{
var td = s;
var d = td.getElementsByTagName(“div”).item(0);

td.className = “menuNormal”;
d.className = “menuNormal”;
}

12 Responses to “WordPress Theme Tutorial Pt 5”

  1. jerome says:

    How do a user upload an image on a certain widget and a section? And multiple media types for a gallery slider? Thanks

    • admin says:

      In the wordpress dashboard click on Media – Add New and upload the image. If you want to use the image in a page, or anything just refer to the URL that wordpress assigns to it. You can find that by clicking on Media on the dashboard

  2. jerome says:

    Hello again. What do you think is the better method to use in developing themes in wordpress, is it using conditional tags or using the template hieararchy?

  3. john says:

    where are the pt6 and pt7 i love ur tutorials pls send me the link. By the Thanks you r doing great.

    • admin says:

      You can find everything in order on this one page WordPress How To.

      I named those 2 articles without the parts. Sorry about that. I did it for strange reasons that aren’t worth getting into 🙂

      I’m glad you like the videos. I think I have more WordPress Theme Development videos than anyone at this point

  4. Noah says:

    Hey man love your videos but had a quick quetion. When you are linking the stylesheets in the head it states,
    Why is it necessary for the ./includes/menu.css? Thanks

  5. cheri says:

    First I would like to say I love your videos.
    One major issue.
    I followed every part of the key health care site tutorial… went through line by line and I don’t seem to be able to get the index to pick up the style sheets. I’m really just trying to get on to converting it to word press which I believe is the tutorial I’m on.

    I have 8 years coding experience. Ive never had this problem.
    I went into Dreamweaver and deleted the style sheets then reattached them. When that didn’t work I copied every bit of the code you provided and pasted it. I don’t see any errors. The only style that shows up is the background body color.

    Any suggestions.

    • Derek Banas says:

      Thank you 🙂 One odd thing that may be messing everything up is that you have to replace the back quotes with regular quotes if you copied and pasted directly from my site. The only other thing I can think of is that there may be a permissions problem? I’m not sure. I just checked and everything is still working on my end so I’m guessing it is something little.

  6. Tiffani says:

    My spouse and I stumbled over here coming from a different
    web address and thought I might as well check things out.

    I like what I see so now i’m following you. Look forward to exploring your web page repeatedly.

Leave a Reply

Your email address will not be published.

Google+