TypePad: Hands On Hacking #1

TypePad offers several predefined, ready-to-use blog templates.  Many very successful blogs are built with predefined templates.  Brian Brady's excellent blog, America's Most Opinionated Mortgage Broker uses TypePad's predefined Stevenson template.

OK.  Suppose you also really like the look of the Stevenson theme, but that Georgia font just doesn't do anything for you. I'm going to walk you through changing just one element of the Stevenson theme, using Custom CSS,  so you can see how easy it is to customize predefined templates.

The element we've going to change is the banner font.  Here's how to keep the theme and change just that one element, the font in the banner, using TypePad's Custom CSS.

You can follow along by creating a test blog.  If you have a Typepad Pro account you can create an unlimited number of blogs.  I have

Sign in to your TypePad account

Click the "Weblogs" tab

Click "Create a new Weblog

I'll call mine "Test Stevenson"

Click "Create New Weblog"

Click the "Design" tab

(For an Illustrated version of the above steps - go here:  TypePad: Initial Steps Illustrated  )

Click "Change Theme"

Click the radio button beside "Pre-defined Theme"

In the drop down menu to the right of "Show", choose "Cool Colors"

Click the radio button to the left of "Stevenson"  (Stevenson is in the second row)

Click "Save Changes"

Now is a good time to stop for a moment and post something, since you won't be able to see your design achievements otherwise.   "The Quick Brown Fox" will work just fine, as will "Lorem Ipsum" .

Click "Compose"  "New Post" paste or type in your text and click save.

Now back to design work.

Here's where we change the banner font:

Let's say you prefer Verdana to Georgia.

Click the "Design" tab.  Click "Edit Custom CSS"

Type (or copy and paste) this line in the text box:

#banner-header {font-family: Verdana, sans-serif;}

That is CSS (Cascading Style Sheet) code.  Don't drop the hash mark (#), the brackets must be "curly" brackets {}  and that's a semi-colon ; at the end of the font description not a colon.

Hit "Save Changes".  And the bottom of the Design screen, hit "Republish Weblog"

Now look at your Blog.  Bada - Bing!  New Banner font!

The biggest challenge is using Typepad's Custom CSS is figuring out the proper name code for the element you want to change.  Stick with me, I'll get you there.  :-)