How to Create Wordpress Themes - Lesson 12 by ciccone85

VIEWS: 24 PAGES: 3

More Info
									                      WordPress Theme Tutorials
                           How to Create Wordpress Themes?

Lesson #12: Post Formatting and Miscellaneous
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.

								
To top