Featured Blog: Oh Joy Eats
Join the Typepad Advisory Panel!

Typepad Master Class: Custom Banner per Template Type

Welcome to the Typepad Master Class! If you've ever wanted to delve into more advanced trickery with your blog's design, the Master Class is for you. Topics covered in this series are for the adventurous or advanced blogger, so an intermediate to advanced level of knowledge of HTML and CSS will come in handy. Additionally, these guides will often require Custom CSS or Advanced Templates, so a Pro Unlimited account is necessary to access those areas and achieve the look and effects we cover. Interested in upgrading? Just head over to the Account link in your Dashboard and click on Billing Info to get started.

With the recent release, we introduced new classes to the body tag that allows you to make customizations on a per-template basis (learn more). We provided a few ideas of how to use the new classes, but here's one we didn't cover: setting a different banner for each template type. This means you can set a custom banner on the front page of your blog, one for posts, one for pages, another for the archives and categories, and so on.

Note: this tip cannot set a custom banner image per category or per archive month.

To refresh your memory, the new classes are as follows:
  • Front index of your blog -- index
  • Individual post -- post
  • Individual page -- page
  • Category archive - category
  • Date-based archive - date
  • Archives list - archives
  • Search Results - search

These are applied to the <body> tag, so when using them in your Custom CSS screen, you'll format the selectors as body.index, body.post, body.page, and so on.

To specify the banner section of your blog you would typically use the #banner selector. Since we want to apply different banners, however, we'll need to combine the banner selector and the body selector together, along with the background attribute with the image we want to use.

Here's an example of that pieced together:

body.index #banner {
    background: url(http://example.typepad.com/image.jpg) center no-repeat;

Make sure to upload your banner image(s) to your File Manager, replacing the example URL in the above code with the URL of the image you want to use.

You could, theoretically, use the banner image that's set by default in your theme, or one you've uploaded via the banner upload tool, for the majority of the pages in your blog. Then, for something a little different, use a separate image for all Category archives. To do that, you'd use the above code, replacing ".index" with ".category" and updating the URL of the banner image you wish to use.

Tip: To keep things as simple as possible, make certain your image has the same dimensions as the existing banner image; this will keep you from having to make additional tweaks beyond what is provided in this article.

Once you have the format needed for the new CSS classes, it's a cinch to put together and try out in your test blog. We'd love to see what you changes you come up with, and how you use this tips, so make sure to share your thoughts with us in the community forum!


Kofla Olivieri

This class will work best if you showed an example of a custom banner on the front page of a blog, one for posts, one for pages, another for the archives and categories.


I purposely chose not to include an image series that shows a different banner across each page type, since the idea itself seemed straight-forward. I'm wary of confusing anyone with multiple images (upwards of 7) under the guise of clarifying the tip any further. If this seems to not be the case, then I will make sure to include examples at a later date, or do so in a Knowledge Base article. Thanks for your feedback!

The comments to this entry are closed.