Site icon WPDesigner

WP Theme Lesson #12: Post Formatting and Miscellaneous

Follow this WordPress Theme Tutorial Series from the beginning.

You don’t need index.php today. Open Xampp Controltheme folderFirefoxInternet 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-serif 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;
}

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;
}

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:

That’s the end of today’s lesson.

Exit mobile version