Framework Templates

When styling the body area, we’ll need to look at the page and index templates. The page.php is pretty straightforward and require no changes, but a few tweaks are needed to the index.php to match the Photoshop design.

Each blog entry is generated by the following code:

<div class="entry">
<h1><a href="<?php the_permalink() ?>" rel="bookmark"><?php the_title(); ?></a></h1>
<?php the_content(__('Read more'));?>

<div class="entrymeta">
<p>Written by <?php the_author();?>, <?php the_time('F dS, Y'); ?> <?php edit_post_link('Edit'); ?></p>
<p>Filed under: <?php the_category(',');?> | <?php comments_popup_link('No Comments &#187;', '1 Comment &#187;', '%  Comments &#187;'); ?></p>
</div>
</div>

We’ll need to modify the code slightly so that the date appears below the title and the entry meta displays the categories and comments only, like so:

<div class="entry">
<h1><a href="<?php the_permalink() ?>" rel="bookmark"><?php the_title(); ?></a></h1>
<p><?php the_time('F dS, Y'); ?></p>

<?php the_content(__('Read more'));?>

<div>

<p>Filed under: <?php the_category(',');?> <img src="<?php bloginfo('template_directory'); ?>/images/comment.gif" alt="" width="18" height="11" border="0" /> <?php comments_popup_link('No Comments &#187;', '1 Comment &#187;', '% Comments &#187;'); ?></p>
</div>

</div>

Let’s add some styles

We can now adjust the CSS as follows:

Update the font size and colour of our main body text, headings and links:

.entry {padding:0 0 30px 0;}
.entry p {padding:6px 0;}
.entry a {color:#a6ba00;}
.entry a:hover {color:#010101;}
.entry ul, .entry ol {margin: 5px 20px; padding:5px 20px;}

h1, h1 a, h2 a {
	margin:0 0 8px 0;
	font-weight:normal;
	color:#010101;
	font-size:18px; line-height:24px;
}

h2, h3, h4, h5, h6 {
	margin:0 0 8px 0;
	font-weight:normal;
	color:#010101;
	font-size:16px;
}

We can modify the entry meta by using:

.entrymeta {
	margin:10px 0; padding:10px 0px;
	color: #868686;
	border-top:solid 1px #868686;
}
.entrymeta p {color: #868686; font-size:11px;}
.entrymeta a {
	color:#868686;
	text-decoration:none;
}
.entrymeta a:hover {
	color:#868686;
	text-decoration:underline;
}

We’ll add a style for the date:

p.date {color:#868686;}

And add a colour for our post navigation:

.post-navigation a{color:#A6BA00;}

Part 4: Let’s look at the sidebar.