Previous month:
January 2013
Next month:
March 2013

Posts from February 2013

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,,, 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( 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!

Featured Blog: Oh Joy Eats

NAME: Joy Deangdeelert Cho
BLOG: Oh Joy Eats
WHY YOU'LL LOVE IT: You're almost certainly familiar with Oh Joy!, the oft celebrated and beautifully curated design blog run by talented designer Joy Deangdeelert Cho, but you may not be quite as familiar with her fantastic foodie subsection, Oh Joy Eats. Full of gorgeous food photos, reviews, and easy recipes, this tasty little snack of a blog is a feast for the eyes and the taste buds.


FOLLOW: Twitter | Typepad

Spotlight: Friday Favorites!

Each week, we scout for great blogs in the Typepad Showcase that fit a particular theme and are guaranteed to inspire. This week, we've hand-picked four great Typepad bloggers who are showcasing their own Friday Favorites, from photos to fonts. Each blog is guaranteed to inspire, so click through the photos below to visit and see why we think they're fantastic.

Leona Lane are showing their colors with Photo Love: Yellow:

image from

Susan Weinroth is celebrating the weekend with Friday Phone Favorites:

Design Editor brings us a smashing font for Font Friday:

Wisecraft features the fantastic book Art Doodle Love (and is hosting a giveaway!):

We hope you enjoyed this week's roundup of fantastic Typepad blogs! Check out more great crafty blogs right here. We'd love to see your blog in the Typepad Showcase, so go ahead and submit it today - you might just see yourself in the spotlight!

Typepad Release Notes

Fixes & Improvements

For those of you who use the mobile /.m/ directory, you may have noticed that there was something wonky happening where the mobile view was broken when a Featured post was turned on. That bit of code has been corrected, so everything will now appear as it should.

Some additional things we've added to the mobile /.m/ experience are:

  • link around the banner section so that mobile viewers can quickly return to the front of the (mobile version) blog.
  • CSS class to the mobile footer links so that the links can be styled:
    • Categories - .footer-archives
    • Recent Comments - .footer-comments
    • About - .footer-about
    • Main - .footer-main

New CSS Options for the 5 Classic Layouts

With today's release also comes a set of new CSS classes for the <body> tag of each of the 5 classic layouts. If you have an Unlimited account or above, you will now be able to make customizations with CSS for the different templates of your blog:

  • 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

Need a bit of code as an example of how to use it? Let's use the new class for each of these pages and set a different background color them:

/* Background for Index */
body.index { background-color: #9C8978; } 

/* Background for Posts */ { background-color: #263842; }

/* Background for Pages */ { background-color: #55758A; } 

/* Background for Categories */
body.category { background-color: #91BFCC; } 

/* Background for Monthly Archives */ { background-color: #B6D4D4; } 

/* Background for Archives List */
body.archives { background-color: #D0D6D6; } 

/* Background for Search Results */ { background-color: #D3B6B6; } 

Some examples of what you can do with each template type are: set custom backgrounds and colors; use different fonts; remove a column (e.g. from Pages or similar); hide post content so only titles display on date/category archives; and more!

The inclusion of custom classes really expands what you, and theme designers, can do with your Typepad blog. We encourage you to setup a test blog and try these out!

Typepad 101: Adding Amazon Items to Your Sidebar

Welcome to Typepad 101! Whether you want to add some new features to your blog's design, or simply make your blog more functional, Typepad 101 has you covered.

Media.  We all consume it and we all love it.  The books we read, the games we play, the music we listen to - they're all a part of us and sharing these parts of ourselves on our blogs are both easy and fun.

The simplest way to share these items is by adding a Books or Albums Typelist to your sidebar. The great thing about either of these Typelists is that you're not limited to adding just books or albums - you can add any item at Amazon.

First, go to Library > Typelists and create a new Books or Albums Typelist.  The next step is to add items to your Typelists. The Quick Add box will allow you to search for books and albums to add to your Typelist.

Interpol. They're awesome.

However, if you want to add something other than a book or an album, you can use the Quick Add box in a slightly different manner. Go to Amazon and find the item you're looking for.  For each item, under the Product Details, you should see either an ASIN or ISBN number. Copy this number and enter it in the Quick Add box. The item should then be listed so that you can add it to your Typelist. Once you've added all the items you want to your Typelist, you can use the Publish tab or Design > Content to add it to your sidebar.

Additionally, if you have an Amazon Affiliate account, you can add your Affiliate ID at Account > Other Accounts so that if anyone makes a purchase through your blog, you'll receive credit for it.

Your new Typelist!

You can read more about adding a new Typelist in our Knowledge Base.

And if you like the spiffy design in the image above, try out the new Heartbeats theme on your own blog!

Today's Downtime

Around 5:30am PST on February 19th, the Typepad application and Typepad blogs went offline. The initial downtime lasted approximately an hour and 15 minutes. Following that, blogs went offline again at 8:42am PST, with the Typepad application operating slowly. The second downtime lasted approximately an hour.

We apologize for the downtime

As bloggers ourselves, we understand how important it is to have your blogs available to your readers, your ad networks, and to you personally. We also understand how important it is for you to work with a reliable blogging platform. We let you down, and for that, we are deeply sorry.

Here’s what happened

Unusually high traffic caused issues with the server load balancer, causing the initial downtime. Unfortunately, the initial server reboot failed, causing the second extended downtime. By 9:40am PST, the source of the traffic disrupting the load balance was resolved, and we are continuing to monitor the situation.

Thanks for hanging in there

We pride ourselves on our reliability (if you're a numbers type, that's 99.77% uptime - in fact, for the last 365 days we've had 99.94% uptime, including today), and will be working hard to make any future downtime events like this even more rare.

We regret any inconvenience that this may have caused you. We know you have many publishing options, so thanks again for blogging with Typepad.

Spotlight: 6 Fantastic Blogs Written By Moms

Each week, we scout for great blogs in the Typepad Showcase that fit a particular theme and are guaranteed to inspire. This week, we've hand-picked six great Typepad blogs written by moms. Not your typical Mommy Blogs, each one is guaranteed to captivate, inspire, make you laugh, and make you think - whether you're a parent or not. Click through the photos below to visit each blog, and see why we think they're fantastic.

Ready? Let's go!

Mommy Shorts:

Mommy Shorts

Posie Gets Cozy:

Posie Gets Cozy



Progressive Pioneer:

Progressive Pioneer

Suburban Homestead:

Suburban Homestead

Mom to the Screaming Masses:

Mom to the Screaming Masses

We hope you enjoyed this week's roundup of fantastic Typepad blogs! Check out more great parenting blogs right here. We'd love to see your blog in the Typepad Showcase, so go ahead and submit it today - you might just see yourself in the spotlight!

Typepad 101: Add a Background Image to your Navigation Bar

Welcome to Typepad 101! Whether you want to add some new features to your blog's design, or simply make your blog more functional, Typepad 101 has you covered. Topics covered in this series are suitable for bloggers at any skill level. If you're on a plan which doesn't include a necessary feature, you can upgrade your account anytime and put these tricks to use on your blog.

If you want to make a small change to your blog that will have a big impact on your design, consider adding a background image to your Navigation Bar. All you need is an image and a little Custom CSS, and you're in business. Our example design was created using the Theme Builder with a custom banner image and a little extra CSS to make the design a bit more custom, all things you can do yourself pretty easily. Want to see more? You can click the image below and enlarge it for the full impact, or see the design live, here.


This tip uses Custom CSS, which is a feature of our Pro Unlimited account. At the Plus level? Remember, you can upgrade any time!

The first element of our project today is the image that will sit behind the links on your Navigation Bar. You'll need to make sure that the image is wide enough to stretch across the entire container, or you'll want to use one that is seamless, and suitable for tiling.

In the case of our example design, our container width is 1030px, so we want to make the image the same width. This is pretty easy to do using Paint Shop Pro, Photoshop, and some online image editing tools as well.

Here's our ribbon, resized a bit and in a classy dark grey for instructional purposes:


Once you've got your image, you'll want to upload it to your File Manager at Library > File Manager. The image will then appear in a list with the other items in your File Manager. Next, click the image title in the list to view the image in a new browser tab. The URL, or path to your image is in the address bar there - keep that handy, because you'll need it soon.

Now you're ready for the second (and final) step. In another tab, click to Design > Custom CSS, and paste the short snippet of code you see below:

#nav { background: url(; padding-top: 0px; padding-bottom: 0px; }

Next, replace the URL in the code with the URL/path for your specific image. Preview the design change to make sure that it looks the way you want it to, and then save your changes, and you're all set! Adding a little extra element that ties in with your design is a great (and easy!) way to make your blog look a bit more custom.

Check out more tips for styling your Navigation Bar with Custom CSS here.

Typepad Release Notes


Just in time for Valentine's Day, we have a sweet little treat for you by way of a new theme. Let's welcome Heartbeats to the theme family!



To help quickly navigate to the list of posts and pages, we've returned the List Posts and List Pages links. This will help you to access the posts and pages in your blog without having to click a tab--just publish or edit a post, then click the "List..." link at the top right to be taken to the correct location.



As previously discussed, the ability to send or receive Trackbacks has been completely removed. This will improve the recent Trackback spam that some of you were experiencing. With this change, you will be able to display and hide existing trackbacks on posts via the Compose screen, as well as delete them at Comments > Trackbacks.

We'll be releasing more great features, themes and improvements in the future, so please check back often!

Featured Blog: The Conscious Kitchen

NAME: Julie Anne Schwarz
BLOG: The Conscious Kitchen
WHY YOU'LL LOVE IT: From kitchen to blog, lifelong chef Julie Anne Schwarz aims to help you cook healthy and delicious meals with an understanding of their nutritional benefits. While focusing on a vegan diet, the recipes on her blog will easily satisfy omnivores as well. Let The Conscious Kitchen help you make thoughtful and responsible choices for yourself and the environment, provide you with current information about nutrition, and enjoy recipes that Julie has tested on her own family of critics.


FOLLOW: Typepad | Twitter