Creating Custom Post Headers

So, you might be wondering how I created the fun, matching post headers that seem to wrap around the page using an Artisteer generated template. It’s very simple to do, and once you learn how, you’ll have a wide variety of options made available to you for not only just post headers.

1.) First of all, in Artisteer, make sure to choose the header layout with the fill option. You can, of course, choose whether or not you want the meta data included in your image or not, but the only real reason you do this is to ensure that the code appears correctly so you can easily replace the background color with your own background image.

2.) Secondly, create a custom image that you want to use for the background. This can be a small repeatable graphic, one that appears to wrap around the sheet like a ribbon, or one like mine that just rests neatly beside the title. Make sure to make the graphic just slightly larger than the background color created from Artisteer especially if you want to give your image that wrapped look. Save your image inside of your exported themes images folder. I titled mine post-back.png to help me remember.

3.)  Now go to your css stylesheet and look for the following code:

/* begin PostMetadata, PostMetadataHeader */
.art-postmetadataheader

You’ll want to change the part that says background-color to background-image and add the url to your image. You’ll also need to add the width and height if you want a repeatable graphic that spans the page, and change the margin so it appears where you want it to. An example of finished code is the following:

.art-postmetadataheader
{
padding: 0;
margin-left: -25px;
overflow:hidden;
height: 37px;
width: 664px;
background-image: url('images/post-back.png');
background-repeat: no-repeat;
}

Notice, that I added a negative left margin so that the image would appear to be coming around the sheet. You can also fool around with the top margin as well, if you have styling to your actual post and would like the header to come up slightly above the post background.

If you have an image that you just want to rest beside the title (like represented in my posts), you’ll want to make sure that the image position is set to “top left,”  and that the background-repeat is set to “no repeat.” You’ll also need to change the padding of your actual text and meta data. Just add a left padding until you get the desired look you are going for.

Really BIG Note!
If you use this option and you want to still use featured images, you may need to change where the featured images are displayed if you don’t want them on top of the new image you created. Here’s how you can move the featured image positioning in both Artisteer 2.5 and Artisteer 3 generated templates.

Moving Featured Image Alignment from an Artisteer 2.5 Template
1.) Go to your post.php file and find the following:

<?php echo $post_thumbnail; ?>

2.) Move it below the post title and meta data info and just above the div for the post content.

Moving Featured Image Alignment from an Artisteer 3 Template
1.) Go to your wrappers.php file and find the following code:

<div class="art-post-inner art-article"></div>
<?php
<div class="art-post-inner art-article"></div>
echo $thumbnail;
ob_start();
<div class="art-post-inner art-article">if (!art_is_empty_html($title)){
echo '&lt;h2&gt;'.$title.'&lt;/h2>';
}</div>

2.) Move just this code:

echo $thumbnail;

to just above the content div, and remove the conditional code for the title. You don’t have to understand what I just said, but just make the code look like the following instead:

<div class="art-post-inner art-article">
<?php
ob_start();
echo '&lt;h2 class="art-postheader"&gt;'.$title.'&lt;/h2>';
echo $before;
$meta = ob_get_clean();
if (strlen($meta) &gt; 0) {
echo '&lt;div class="art-postmetadataheader"&gt;'.$meta.'</div>';
} echo $thumbnail;
?>
<div class="art-post-content">

That’s it, you are all set. You’ll see that from the examples of my Recent Projects categories, the featured image thumbnail rests neatly below the meta data now so it does not overlap the little graphics I added.

Hope that helps, and as always, leave a comment if you have a question or suggestion.

© 2010 – 2011, reflectingthedesigner.com. All rights reserved.

LEAVE A COMMENT

Powered by sweetCaptcha


Anti-Spam Protection by WP-SpamFree