WPDesigner

Follow this WordPress Theme Tutorial Series from the beginning.

You don’t need index.php today. Open Xampp Control, theme folder, Firefox, Internet Explorer, and style.css.

Before we start, forget yesterday’s screenshot that I showed you. I had the widget plugin turned on while taking the screenshot, which explains why my sidebar looked different from yours. Also, in the style.css file, change all Sans-seriff to Sans-serif. My mistake again, I tend to add an extra ‘F’ to Sans-serif.

Step 1

Get rid of most margins and paddings by typing the following codes above the body{} in style.css:

body, h1, h2, h3, h4, h5, h6, blockquote, p{
margin: 0;
padding: 0;
}

• Notice that it’s margin: 0; instead of margin: 0 0 0 0;. When all your values are the same, use one number. Same goes for padding.
• Save your file. Refresh Firefox and Internet Explorer. Don’t worry, now you’ll add in the margins and paddings where you actually want them to appear, and not where the browsers want them by default.

By the way, I’m telling you to put this and that under or above this or that, but know that it’s optional. You can type/place your codes anywhere. The way I’m doing it is how I organize.

Step 2

Style H1 title, type this under the body{}:

h1{
font-family: Georgia, Sans-serif;
font-size: 24px;
padding: 0 0 10px 0;
}

• font-family: Georgia, Sans-seriff; changes the H1 title front from Arial to Georgia. Without Georgia, the web page looks for Sans-serif;
• font-size: 24px; is self-explanatory. However, notice that when you set the font size to 12px within body{}, the H1 and H2 tags didn’t follow that rule. That’s because heading tags follow their own rules. To control them, you need to style specifically for them.
• padding: 0 0 10px 0; means 10-pixel bottom padding. It’s for adding space between your blog’s title and description.

Save, refresh, and here’s the result:

Step 3

Type the following codes under #container{}: (Save and refresh after each block of codes to see what the changes are.)

.post{
padding: 10px 0 10px 0;
}

(You added 10-pixel top and bottom paddings to each DIV with a class named, post.)

.post h2{
font-family: Georgia, Sans-serif;
font-size: 18px;
}

(.post h2 is not a general rule. It specifically targets the H2 sub-headings within the post DIV. The H2 sub-headings in the Sidebar aren’t affected.)

.entry{
line-height: 18px;
}

(Increased the size of the space between each line within the entry DIV.)

Step 4

Type the following codes under a:hover{}:

p{
padding: 10px 0 0 0;
}

(10-pixel top padding to each paragraph tag.)

Step 5

Type under .entry{}:

p.postmetadata{
border-top: 1px solid #ccc;
margin: 10px 0 0 0;
}

Remember the pargraph tag that you gave a class named, postmetadata, to? Styling a specific paragraph tag and styling DIV are very much the same. You can apply border, margin, padding, and background to both.

For the postmetadata paragraph tag, you added a gray border and a 10-pixel top margin to it.

border-top means top border only. border-left means left border only. Etc. border, alone, without -top, -right, -bottom, or -left means all borders. For example, border: 1px solid #ccc; means all four sides have a gray 1px border.

Step 6

Type under p.postmetadata{}:

.navigation{
padding: 10px 0 0 0;
font-size: 14px;
font-weight: bold;
line-height: 18px;
}

For the navigation DIV wrapping the Next page and Previous page links, you just:

• added a 10-pixel top padding
• change its font size to 14px
• change its font-weight to bold.
• increased its line-height to 18px.

That’s the end of today’s lesson.