Random thoughts on art, technology, stuff, and occasionally Real Estate: TypePad: Hands On Hacking #1

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.  :-)

13 commentsCheryl Johnson • May 25 2007 07:55PM

Comments

I just want to go MAC and I wish my MLS system supported it. ugh
Posted by Susan Trombley Broker/Realtor Raleigh, Cary, Wake Forest, Youngsville (Trombley Real Estate) over 3 years ago
Susan,  Heck, some MLS systems only support ONE browser (Internet Explorer)!  If the people designing these systems are young and progressive, I just find it hard to believe they don't stand up for open platform cross-compatibility!!! 
Posted by Cheryl Johnson, Bob Taylor Properties, Inc., Los Angeles, CA over 3 years ago
I'm just going to start reading all of your Typepad stuff. You know how to set this stuff up so well.  I am such a template user
Posted by VA Mortgage Broker in California/858-777-9751 over 3 years ago
This sounds great.....bookmarked and subscribed for future info. Thanks
Posted by Teri Ellis at Homes Arizona Real Estate LLC over 3 years ago
Thanks for sharing and teaching, Cheryl. I've bookmarked the post for future reference.
Posted by Sharon Simms St Pete FL - CRS CIPS CLHMS RSPS (ALVA International, Inc.) over 3 years ago
Do you teach classes around California?? I would love to sit in and just absorb some of your wisdom. Seriously.....
Posted by Mary Pope-Handy, ABR, CRS, ePRO, SRES, ASP (Sereno Group Real Estate) over 3 years ago

Mary -- Right now my classes are exclusively held on Active Rain.  :-)  

Maybe when I retire from real estate, though.  Wouldn't that be a hoot?  Little old lady, 80-something, white-haired, wrinkled, scribbling out lines of CSS  on a whiteboard.  I like that picture!

Posted by Cheryl Johnson, Bob Taylor Properties, Inc., Los Angeles, CA over 3 years ago
Brian -  I think I started at the wrong end when I began posting TypePad tutorials here on Active Rain.  I started with Advanced Templates.  Now I'm cycling back and starting from point A.  They will probably all make sense in the end.  :-)
Posted by Cheryl Johnson, Bob Taylor Properties, Inc., Los Angeles, CA over 3 years ago
I just want to know how you figuer this stuff out... my mind doesn't go there..
Posted by Manhattan Beach CA/ e-PRO..... Kaye Thomas... (Real Estate West) over 3 years ago
Kaye -- I think it's called Obsessive Compulsive Disorder  :-) ..... I just keep diddling around with it until it makes sense.  Now I gotta diddle with GoDaddy Mapping for Brian.
Posted by Cheryl Johnson, Bob Taylor Properties, Inc., Los Angeles, CA over 3 years ago
You are  amazing Cheryl..
Posted by Manhattan Beach CA/ e-PRO..... Kaye Thomas... (Real Estate West) over 3 years ago
Thanks so much, Cheryl. I appreciate the help. I have several Typepad blogs, but I'm always learning more. I love their new feature that lets us add pages to our blog. I use it to upload PDF's and other things my clients want access to.
Posted by Connie Ragen Green ~Online Writing and Technology (Small Business UnMarketing) over 3 years ago
Connie -- Oh, I agree -- adding PAGES was a really great idea!  Somebody at TypePad should get a bonus! :-)
Posted by Cheryl Johnson, Bob Taylor Properties, Inc., Los Angeles, CA over 3 years ago

This blog does not allow anonymous comments