You are reading...

February 27th

To do a background like my sidebar, you will need some extra divs. Note this is for unrounded corners, you will need a different markup for it. So here is the markup in WordPress

<div class="old_post">
	<div class="old_top"></div>
		<div class="post" id="post-<?php the_ID(); ?>">
			<h2><a href="<?php the_permalink() ?>"
rel="bookmark" title="Permanent Link to <?php the_title(); ?>">
<?php the_title(); ?></a></h2>
			<span class="month"><?php the_time('F') ?></span>
<span class="day"><?php the_time('jS') ?></span>
            <?php foreach((get_the_category()) as $category) { echo '<a title="'
. $category->cat_name . '" href="category/' . $category->category_nicename . '/"
class="categories">' . $category->cat_name . '</a>';} ?>

			<div class="entry">
				<?php the_excerpt(); ?>
                 <a class="jump_link" href="<?php the_permalink() ?>"
rel="bookmark" title="Permanent Link to <?php the_title(); ?>">Jump now!</a>

			<p class="postmetadata"><a class="comment" href="
<?php comments_link(); ?>"><em><?php if ($commentnumber
< "10") { echo "0" + $commentnumber; } ?><?php $commentnumber =
comments_number('0','1','%'); ?></em></a></p>
    <div class="old_bottom"></div>

For rounded corners, put the “top” and “bottom” divs outside of the main “post” div. Here’s the CSS.

#sidebar .old_post {
background:url(images/old.png) repeat-y;

#sidebar #old .post {
padding:0 10px;
margin:-20px 0;

#sidebar .old_top {
background:url(images/old_top.png) no-repeat;

#sidebar .old_bottom {
background:url(images/old_bottom.png) no-repeat;
margin:0 0 20px;

Basically, the background for the top and bottom part of the post is laid on top of the middle repeating background. The negative margins are for moving the content over the top and bottom backgrounds. The position:relative; is to fix an ie bug so the top and bottom background doesn’t cut of the background. Lame, but not a huge issue.

Go home