Typepad Master Class: Custom Banner per Template Type
February 27, 2013
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.
To refresh your memory, the new classes are as follows:Note: this tip cannot set a custom banner image per category or per archive month.
- 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!
