Jason G. Designs

5f. Let’s add a border to the bottom of the post. First, we need to change the class name to post-single, so we don’t add a line below each post in the index page. Below are the changes in single.php and style.css.

<!-- opens post div -->
<div class="post-single" id="post-<?php the_id(); ?>">

.post-single {
border-bottom: 2px solid #63DDDD;
padding-bottom: 20px;
}

5g. We want to put some padding between the form elements and add styling to the text boxes to override the browser’s default look. Enter the following CSS style rules at the bottom of style.css:

#respond h3 {
padding-bottom: 20px;
}

#commentform p, .commentlist li {
padding-bottom: 10px;
}

.comment-meta {
font: bold 12px Georgia, "Times New Roman", "Nimbus Roman No9 L", serif;
}

#commentform input, #commentform textarea {
background-color: #CCCCCC;
border-top: 1px solid #666666;
border-left: 1px solid #666666;
border-bottom: 1px solid #EEEEEE;
border-right: 1px solid #EEEEEE;
color: #000000;
}

#commentform input#submit {
border-top: 1px solid #EEEEEE;
border-left: 1px solid #EEEEEE;
border-bottom: 1px solid #666666;
border-right: 1px solid #666666;
}

.bypostauthor {
border: 1px solid #CCCCCC;
background-color: #EEEEEE;
color: #666666;
padding: 10px;
}

This styling adds the same border style from the search box to our comment form elements and reverses the border colors for the submit button, giving it a raised rather than lowered look. We also styled the bypostauthor class that is included within the comments template. This gives a different look for the current author’s posts.

5h. Finally, we want to add an icon to the side of each post to further indicate a comment. This is where we will bring in our speech_bubble.gif file from an earlier tutorial. The blue-green-blast/images folder is where this file is found. The way we will apply this graphic is with the CSS :before pseudoelement, as shown below in bold:

*Unfortunately, the :before pseudoelement is not supported in Internet Explorer 7 and below.

.bypostauthor {
border: 1px solid #CCCCCC;
background-color: #EEEEEE;
color: #666666;
padding: 10px;
}

.commentlist p:before {
content: url(images/speech_bubble.gif);
margin-right: 6px;
}

Pages page

6a. We will customize the Page template in much the same way we customized the Single page. Once again, we will copy index.php and Save As page.php.

6b. Next, after browsing many of the pages, I noticed the navigation link section at the top of the page doesn’t work again; however, a plugin is needed for this functionality and this tutorial series is long enough. We can safely delete the following navigation code:

<div class="navigation">
<?php posts_nav_link(); ?>
</div>

If you do want to include Next and Previous navigation links on Pages, see the Codex page Next and Previous Links.

6c. Next, we can once again remove the link around our entry title and change the class name:

<h2 class="entry-title-page"><?php the_title(); ?></h2>

Essentially, things will not be that much different from the index template, except for CSS customizations. This will be a simple template to expand upon. We will leave out a comments section, as comments are more appropriate for the more urgent blog posts.

6d. The next step is to style the h2 tag in style.css, similar to in the single.php template:

/* Page classes */
.entry-title-page {
color: #000000;
background-color: #FFB273;
margin-bottom: 10px;
padding-left: 10px;
}

Tags for this post: Adsense Friendly, Blue Green Blast, Comments File, WordPress

Page: 1 2 3 4