Creating your Own WordPress Theme – Day 3

Creating your Own WordPress Theme – Day 3

Welcome back to another brand new section of creating your own WordPress Theme.

Today we would start with much anticipated part of our theme work which is the creating CSS for our recently created HTML page.

You may have noticed that after you had created the HTML page you had all the contents lined one below the other and you really wanted this to be aligned properly. So without wasting any more time I am starting the CSS for the page.

I would like to let you know that there are many IDE or tools for creating a CSS file for your HTML. My first preference is an amazing tool or plugin for Firefox called Web Developer. You can download the plugin for Firefox here: https://addons.mozilla.org/en-US/firefox/addon/web-developer/

So we open our HTML page in Firefox and start with web developer by clicking on “edit CSS” under the CSS menu.

Step 1

Create/ open a new file and save it as style.css

Our First Step is to create a blank canvas for styling and I am using the reset code for this. This is done to remove any styling that the browser may have.

Info: You may have noticed that some sites look different with their layout in different browsers like IE, Chrome and Firefox. To disable these default stylings of browser we use the reset code.

The reset code that I have used is

/* Reset */

html, body, div, span, object, h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, address, code, img,
small, strong, dl, dt, dd, ol, ul, li,
fieldset, form, label {
 margin: 0;
 padding: 0;
 border: 0;
 outline: 0;
 font-size: 100%;
 vertical-align: baseline;
 background: transparent;
}
body {
 line-height: 1.5;
 font-family: helvetica, arial, sans-serif;
}
ol, ul {
 list-style: none;
}

/* End Reset */

Please note that the reset code that I have used is slightly modified version of Eric Meyers (http://meyerweb.com/eric/tools/css/reset/)

Just to add to what I have done here, I have reset the entire canvas to defaults and removed any styling that comes along as we need our custom styling. Having said this, you may notice that the the font size now is all same as its put to 100%.

Step 2

Now we shall goahead and add some Text decoration for the entire page:

/* Reset */

h2 {

font-size: 27px;
}

p {
 font-size: 14px;
}

a {
 text-decoration: none;
 color: #4e4e4e;
 font-size: 14px;
}

a:hover {
 text-decoration: underline;
}

input {
 background: #696969;
 border: 1px solid #c3c3c3;
 color: #cbcbcb;
 padding: 3px;
}

input:focus, input:hover {
 background: #ededed;
 color: #4e4e4e;
}

/* End of Text Decoration */

Explanation of the above code:

Since we are using H2 tags for our topic heading in the theme, hence we have set the h2 font size to 27px.

All paragraphs would have the 14px size

All links on the page will have no decoration and the font color and size has been set.

When ever the mouse is hovered over a link it should display the underline.

The input or our search box will have a background color with border and font color with padding.

Final one, when ever the mouse is hover change the color.

Step 3

We now move ahead with adding some style to the header portion for logo:

* Main Styles */

body {
 background: #f2f2f2 url(img/bg.jpg) repeat-x;
}

#wrap {
 width: 960px;
 margin: auto;
}

#header h1 {
 background: url(img/logo.png) no-repeat;
 width: 287px;
 height: 79px;
 text-indent: -9999px;
 float: left;
}

#header h1 a {
 width: 169px;
 height: 71px;
 display: block;
}

Explanation of the Code

Header h1: Remember we had used the h1 tag to define our logo and here we are calling the same h1 and adding a logo image to the code. If you notice you may have seen that once you added the image it would have repeated along the width of the page. So we use the no-repeat code to limit it and we are using the image dimensions to show it properly. You may have also noticed that after adding the image the text was showing up in the background of the image. So we used the text indent to move away or replace with the location and then we floated the content to left.

We now need to have the image as hyperlink so the next code was having the same width and height of the logo and adding a block code.

Step 4

We now continue with our styling of navigation menu in the header:

/* Navigation */

#header ul {
 overflow: hidden;
 padding-left: 80px;
}

#header ul li {
 float: left;
 padding-left: 35px;
 margin-right: 35px;
 margin-top: 20px;
}

#header ul li a {
 color: ##8B2323;
 font-size: 16px;
 position: relative;
 top: 2px;
 left: 1px;
}

#header ul li a:hover {
 text-decoration: none;
 color: white;
}

#header ul li#home {
 background: url(img/nav/home.png) no-repeat;
 width: 31px;
 height: 34px;
}

#header ul li#about {
 background: url(img/nav/about.png) no-repeat;
 width: 37px;
 height: 36px;
}

#header ul li#contact {
 background: url(img/nav/contact.png) no-repeat;
 width: 32px;
 height: 32px;
}

Explanation of the above code

Navigation: We started with the padding of navigation which will distance or give some gap from the logo. Then we proceed to float the nav items to left with giving some space (padding) to right, left and top.

We give some good color to the text and then hover color.

We next proceed with adding the images to the nav menu with giving height and width of the image.

Step 5

Our next step is to position our search box:

/* Search Box */

#header li#search {
 margin-top: 10px;
 margin-left: 20px;
 margin-right: 0;
}

#header li#search img {
 margin-right: 10px;
 margin-left: 10px;
}

#header li#search input {
 position: relative;
 top: -8px;
}

#header p#slogan {
 font-size: 1em;
 margin: 22px 0 31px -200px;
 float: left;
 border: 1px solid white;

}

Explanation for the above code

Searchbox: We first position the ul with the right dimensions and then proceed with the image and search box positioning.

Then we add the position to out slogan that we have for our theme using the margin code.

Step 6

Now we shall start with the main container styling:

/* Main Content */

#main {
 clear: both;
 overflow: hidden;
}

#main #container {
 float: left;
 width: 630px;
}

#main #sidebar {
 float: right;
 width: 300px;
}

#main #container .post-item {
 background: #ededed;
 margin-bottom: 28px;
 border: 1px solid white;
 overflow: hidden;
 padding-right: 40px;
}

.post-item img {
 float: left;
 padding: 30px 20px 30px 30px;
}

.post-item h2 {
 padding-top: 30px;
}

.post-item p.meta {
 background: #9c2323;
 color: white;
 font-size: 11px;
 font-style: normal;
 padding: 4px;
 margin-left: 250px;
 margin-bottom: 14px;
 width: 100px;
 min-width: 100px;
 text-align: center;
 border-bottom: 1px solid white;
}

.post-item p {
 color: #7e7e7e;
 font-style: italic;
}

/* Next and Previous Buttons */

.more {
 background: url(img/more.png) no-repeat;
 width: 48px;
 height: 48px;
 padding: 29px;
 color: #7e7e7e;
 font-size: 12px;
 font-style: italic;
 float: right;
 border: 1px solid white;
 border-right: none;
 border-left: none;
}

Explanation for the above code:

The very first step is that we use the clear: both; No floating elements allowed on either the left or the right side

The next step is that we set the width for container and set it to left then add the width to the sidebar set it to right

We then setup the background color to the post item with some margin and border.

We then give some nice padding around the post images.

We then add some padding to the h2/ post headings and also add some

For the meta we goahead and add some background to the meta and then change the color and style for the paragraph.

Apart from the post items we have also got overselves a new item for next and previous at the bottom which will take you to the next page. We have not linked this to anything as of now, however, there would be changes when we move to complete wordpress.

Step 7

This set of code will make some good styling to the sidebar.

.sidebarBox {
 background: #ededed;
 border: 1px solid white;
 margin-bottom: 28px;
 padding: 0 4%;
 overflow: hidden;
}

.sidebarBox h3 {
 background: #9c2323;
 color: white;
 margin: 4% 0;
 font-size: 12px;
 font-weight: normal;
 padding: 3px 0 2px 8px;
}

#photos img {
 border: none;
}

#photos img.featuredImages {
 border: 1px solid white;
 margin: 0; padding: 0;
 width: 100%;
}

#photos p {
 float: left;
 color: #737373;
}

#photos .prevNext {
 float: right;
}

#recentEntries ul li,
ul#popPosts li {
 padding: 3px 0 3px 0;
 border-bottom: 1px solid #bbbbbb;
 border-top: 1px solid white;
}

#recentEntries ul li:first-child,
#popPosts li:first-child {
 border-top: none;
}

#recentEntries ul li:last-child,
#popPosts li:last-child {
 border-bottom: none;
}

#recentEntries ul li a {
 font-size: 12px;
}

Explanation of the above code:

First we start with the background color of the sidebar. Then we add some margin at the bottom with some padding to the sidebar. Please note that this will increase when we proceed with WordPress.

We target each of the elements in the sidebar with class and give add some class in the index.html and then make necessary styling in the CSS.

We start with the first sidebar element photos and target the photo and remove any margin within and then add some styling to the previous next button.

We now add some border to the recent and popular entries. Now you may have noticed that there are 2 lines of code as first child and last child, this is because if you remove that code you will see that there is a border at the top of the first line item and then on the last item. Hence this code was used. please note that this code may not work with IE and you may have to use jQuery for this.

You may download the related file for this tutorial from here WordPress Theme (HTML Vesrion)