Typepad Master Class: Building your very own custom theme

One of the great things about Typepad is its design flexibility - you can click and install a design to be on your way or go whole-hog with Advanced Templates, which are hand-coded with HTML and Typepad tags.

Right in the middle is the Custom CSS feature. You can tailor an existing theme to suit your tastes without having to muck around in template code. To take that even further, you can start with a blank slate and go to town with CSS to make a theme that's entirely yours. That's what we're going to do today.

Please note that this Master Class session is for folks who are experienced with the ins and outs of CSS and need a primer for applying that knowledge to Typepad's design structure. If you consider yourself a CSS ninja, this one's for you.

First, let's gather our materials. You'll need:

• A Typepad account at the Pro Unlimited level or above.
• A new blog to play with.
• Any images you want to use for page backgrounds, banners, etc.
• Your preferred browser plug-ins that help you edit CSS. We like the WebDev toolbar and Firebug.

We recommend stocking your blog with content so you can see how styling looks on blog posts and Pages. These can be totally fake posts but you'll want to make sure to include images at various sizes, blockquotes, etc. We have a standard set of fake posts that you can import into your blog for testing.

We'll be creating a new design using a blank theme. Go to the Design tab, click Create a theme and choose Customizable. Then select Styleless and the green Choose button on the right.

You'll then be taken to the Layouts page. Here, select the layout you want to work with first (two columns is the default), apply the design and save.

You can then click to the Content page to select items for the sidebars, set up your post footer, etc. To start, you may want to have everything turned on so you can see how it looks in your new theme.

If you view your blog at this stage, it won't look like much. That's because it's completely unstyled and needs your help! Let's take a quick look.

 

Now we'll go to the Custom CSS page and insert our base styles. This is basic, structural styling that we use when creating a new theme. Just copy the lines below and paste into Custom CSS:

 /*=== FRAMEWORK CSS ===*/
@import url(/.shared/themes/common/framework/typepad-theme-frame-default.css);
@import url(/.shared/themes/common/framework/typepad-theme-fontbase.css);
@import url(/.shared/themes/common/framework/typepad-theme-frame-columns.css);
@import url(/.shared/themes/common/framework/typepad-theme-banner.css);
@import url(/.shared/themes/common/framework/typepad-theme-navbar.css);
@import url(/.shared/themes/common/framework/typepad-theme-structure-posts.css);
@import url(/.shared/themes/common/framework/typepad-theme-share-buttons.css);
@import url(/.shared/themes/common/framework/typepad-theme-structure-comments.css);
  @import url(/.shared/css/atp-comments.css);
@import url(/.shared/themes/common/framework/typepad-theme-structure-sidebar.css);
@import url(/.shared/themes/common/framework/typepad-theme-structure-archives.css);
@import url(/.shared/themes/common/framework/typepad-theme-mobile.css);

When you save and view your blog now, it should look a little better.

You can see that all of the blog elements are aligned in columns and have basic formatting. This takes care of the boring part of the core styling for you. This framework can be re-used for any theme you want to create. Just paste it in Custom CSS and then you can move on to the fun parts of adding in colors, fonts, etc.

We won't be getting too far into actual CSS in this post - we want you to get the framework in place, see how that looks and use your own CSS knowledge and tools to take it from there. We've found that the key with creating a new theme is to just jump in and get started.

However, we know that you love examples, so here are some to get your feet wet.

Style the banner

Our theme has a simple text banner, so we fill in the banner background color, set some spacing around it, and make the font bigger:

/* Banner Color */
#banner { background-color: #EFEFEF; }

/* Banner Padding */
#banner-inner { padding: 20px 0px; }

/* Banner - Blog Title */
h1#banner-header {
    font-size: 40px;
    margin: 0 10px;
    padding: 0;
    }

/* Banner - Blog Description */
h2#banner-description {
    font-size: 15px;
    margin: 10px 30px 0;
    }

Set background colors

We set the background color for the page and the background color for the columns.

/* Background Color */
body { background-color: #000000; }

/* Container Color */
#container { background-color: #FFF; }

/* Columns Color */
#alpha, #beta, #gamma { background-color: #EFEFEF; }

Style the Navigation Bar

We set the background color of the nav bar strip and the color for the links and hover links:

/* Background Color */
#nav, #nav-inner, .nav-list, .nav-list-item {
    background: #ccc;
    }
  
/* Link Color */
.nav-list-item a {
    background: #ccc;
    color: #000;
    }

/* Link Hover Color */
.nav-list-item a:hover {
    background: #eee;
    color: #000;
    }

You can preview your changes along the way to see your progress. Here's how the above code looks on our test blog.

You can find more examples in our Making of a Theme overview and tons of copy and paste CSS in our CSS Cookbook.

Creating a theme from scratch might seem a little intimidating but once you get started, it's a lot of fun and very rewarding. In the coming weeks, we'll be going into more detail about the design process and tell you how you can submit your theme to Typepad so it can be used by our subscribers.

Comments

[Sean Brady]

Great, thanks for the hard work, it's a useful starting point to those of use interested in starting floor the ground floor.

Sean Brady

[Joanie Gorman]

Rubbish! Typepad use to deliver flexibility at a less expensive level. Those of us who have been with Typepad for years are now expected to pay a premium for it. After five years with Typepad it's hard to move elsewhere but if I could I'd be off to a free platform like Blogger or Wordpress.com that offer more for free!
There is far better value out there for design flexibility. For years I referred clients and friends to Typepad, but not any more. If you want to keep long time, dedicated users like me then offer better and more varied themes that are image oriented instead of the same old stuff. By not doing so you are trying to force us to upgrade. Not good enough Typepad.
I recently wanted to remove a few pixels of padding and was told I'd have to upgrade for CSS but was offered 10% off to do so, how insulting. As though I couldn't add up what it would cost me to remove a few pixels over the course of years.
Work harder at your value added benefits Typepad, you're getting left in the dust.

[Colleen]

Hi Joan,

Thank you for sharing your feedback. I just want to clarify a couple of things:

1. The pricing structure for Typepad hasn't changed at all. The same features are at the same price levels that they've been at for years.

2. This tutorial is intended to help designers start creating themes for Typepad in the hopes that we'll be able to work with them to make those themes available to our users. We're also working on creating and putting out themes ourselves - you can see the new ones via the Design tab for your blog. I very clearly state that this is an advanced tutorial for experienced designers - not everyday users looking for a little extra flexibility.

I understand your frustration with having to upgrade but what you're trying to do is an advanced function, so an upgrade is necessary.