Typepad Master Class: Building your very own custom theme

December 06, 2012

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.

Select the Styleless theme

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.

 Unstyled! Please make me pretty!

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.

Looks better already.

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.

CSS preview
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 powered by Disqus

Welcome

Need help?

Follow us!

Typepad on FacebookTypepad on TwitterTypepad on Google+Typepad on PinterestSubscribe to Everything Typepad

Like us!

Typepad Newsletter

Still having trouble? Contact Support.