Sunday, April 12, 2009

Advanced Templates How To

Here are my steps for customizing the new Advanced Templates. I could not find an overview in TypePad help on customizing a TypePad theme.

FYI, from TypePad Knowledge Base: What are Advanced Template Sets?

Things to know in advance:

Img014 Once you switch to an advanced template you have control over the page layout and design, but you will lose the WYSIWYG ability to easily switch themes (the look), change the layout (columns) or add content (widgets) - this will all have to be done in the page code. Don't panic when all of those tools have disappeared. You CAN easily switch back to one of your WYSIWYG aka Drag-and-Drop themes.

To create Advanced Templates you should have a pretty good understanding of HTML, recognize PHP and know enough not to break coding; a very good understanding of CSS plus the ability to think in an object-oriented way.  There are lots of pieces that go together and affect each other. If you want to learn, great, but don't start on a site that has to pay the bills or needs to be finished under a deadline.

Advanced Template sketch (full size)

TIP: If you just want to add a
custom banner, go back to a pre-built theme and add the banner using
the Custom CSS tab in your design control panel.

How to create an Advanced Template Set:

Preliminary: if you have a theme you want to modify on your live blog, fine. If not, create a Test blog and apply a theme close to what you want. Put in atleast one post and one page if you make a Test blog.

Next: create a new blog, I call it "MyLayoutBlog". This is where you will do your experimenting. (You get as many blogs as you want if you are paying for a plan that lets you use Advanced Templates, and can delete when done.)

  • Go to the design tab in your new MyLayoutBlog.

  • Go to Saved Designs.

  • Create a new design, choose Advanced Tempates and Create.

  • This will create a set in your Design list called Advanced Templates.

NOTE: The Advanced Template is based on the theme "Asterisk White"
NOTE: The Advanced Template is set to the "Two-Column-Right' Layout by default.

Apply your Advanced Template set in your MyLayoutBlog and then click back to Current Design.
The choices for Theme, Layout, Content, CSS, will be gone and in their place is the list of your Advanced Templates in 3 groups:

1. Index Templates. These dictate page layout for each type of page.
The Archive Index Page, Main Index Page plus the RSS feed pages. Stylesheet and Theme stylesheet are also here. This seems mysterious to me, I would have put all the page/post templates in the first group and the stylesheets in another group.

2. Archive Templates (not clear to me why they are a different set and why the Pages template is here, perhaps these are secondary from an engineering point of view). These are the layouts for the way the Archives by Category, Archives by Date, Individual archived posts and the individual Pages you create.

TIP: Posts versus Pages. Posts are what appear on your main page by default in TypePad, with the newest at the top.  Pages only display the information you put into a page you create. You can display a page as your home page * . Posts are for blogging. Pages are handy if you want to build a site instead of, or along with, your blog. Or if you want a Contact or Services page, etc.

* You set what content is going to be seen on your home page via the
Configure tab > Preferences > Front Page: Display recent posts or Display a Page (pick the page to display). If you display posts the latest post appears at the top by default.

3. Template Modules
are the last group. These are the bits of code (Content or Widgets) that go into the secondary columns of your pages, like category listings, page listings, latest posts, your picture, blogroll, etc. You create new modules to put whatever you want in them with Advanced Templates.

NOTE: The Navigation Bar is found in this group. By default it has a home, about, archive and subscribe link. You will see this code at the center if you select the module to edit it:

    <li class="nav-list-item"><a href="<$MTBlogURL$>"><$MTTrans phrase="Home"$></a></li>
    <li class="nav-list-item"><a href="<$MTUserSiteURL$>about.html"><$MTTrans phrase="About"$></a></li>
    <li class="nav-list-item"><a href="<$MTBlogURL$>archives.html"><$MTTrans phrase="Archives"$></a></li>
    <li class="nav-list-item"><a href="<$MTBlogURL$>atom.xml"><$MTTrans phrase="Subscribe"$></a></li>

Caution: the red links are different for Home and About.  The Home ($MTBlogURL$) goes to the blog the template is applied to.  The About ($MTUserSiteURL$) goes to the About page that is created separately in your Control Panel > Profile > About Page.

If you want to add a page you created in your MyLayoutBlog, use the $MTBlogURL$ not UserSiteURLS.

TIP: If you create the same page names in your live site, you won't have to change the navigation.

TIP: The about page is easiest to deal with by simply creating your own About Page and removing the link to the default About page in the default navigation if you like control and consistency.

GORY DETAIL TIME: customizing the templates. Remember you are working in the MyLayoutBlog you made for this purpose.

If you are creating from scratch, the asterisk stylesheet is in your set, called "theme stylesheet" while the other stylesheet is empty so anything you put in it will override the default Theme stylesheet and the TypePad base template. Go for it.

This tutorial is about creating a custom version of an existing theme offered in the theme selector. I assume that is fine to do since you can customize the CSS of those themes in the WYSIWYG mode. I do include the author's name in my new stylesheet header if there is one in the theme I am basing my modifications on.

SET THE LAYOUT: Open the Main Index Template for edit first and find the "two-column-right" reference if you want to change it.  Change it to one of the other styles in the theme stylesheet, here are the defaults. Creating your own goes beyond the scope of this how-to.


I usually wait until I have the main page styled before I go in and change all the other page templates: archive-index, datebased archives, category archives, individual archives and pages. Then I do them all at once at the end.  If you switch to three-column you need to add the third column. Here is the main index template with it added red. You could do it other ways, move the beta from the bottom and put gamma third.

<div id="pagebody">
<div id="pagebody-inner" class="pkg">

<!--where we add the third column-->
<div id="gamma">
<div id="gamma-inner" class="pkg">

<!-- include sidebar module content here - Julie added this here and renamed it gamma for three column -->

<$MTInclude module="elsewhere-grid"$>
<$MTInclude module="subscribe-to-feed"$>
<$MTInclude module="powered-by-typepad"$>

</div><!-- #gamma-inner -->
</div><!-- #gamma -->

<div id="alpha">
<div id="alpha-inner" class="pkg">
<$MTInclude module="home-tagline"$>

<!-- entries -->

The widths are set toward the bottom of the theme.css stylesheet. Copy and paste the relevant layout styles to your Stylesheet.css and adjust as needed.

Img013 Here is a diagram of the three-column layout I worked on.

Now that you have a home page with the layout you want and atleast one post or some content, move on to the styling.

I could not customize the styles without FireFox (FF) and Chris Pedrick's Web Developer Toolbar, plus the FF add-ons Measure It and Color Picker.  Plus Dreamweaver and TextPad.

1. Open the weblog you have with the theme you want to work from in a browser window. From the webdev toolbar > Information > display ID & Class details.

2. Open your Layout blog in another window (with your Advanced Template applied to it)
Open the CSS editor in FF, and in the styles.css style sheet start adding  your own styles. (The base style sheet is generated by TypePad and the theme stylesheet is the Asterisk stylesheet.)

TIP: if you don't see your changes, try adding them to the bottom of one of the other stylesheets, they may be taking precedence in the FF window.  But add them to your stylesheet.csss in your template when ready (next step). The styles applied in FF are lost when you close the editing window, so copy them first!

3. Open the stylesheet.css for edit from your Typepad Control Panel. It should be empty except for the import of the base and theme stylesheets.

4. Open a new css file in DreamWeaver (DW) or Textpad.  Add the changes you have made there and copy and paste from there into the stylesheet in step 3. 

Why not just copy right to your stylesheet in the control panel?

  • Because there is no "undo" in the stylesheet editing window and you lose whatever you overwrote each time.  Merging two styles is an exercise in conflict management.

  • Each time you get a step right, save a version as stylesheet1, 2, 3... 

That way, when you make changes that mess up everything, you can recover. For example, I adjusted the header to the way I want. Save V1.  Got the colors and fonts right. Save V2 which now has the right header and fonts.  Move on to styling the 3 columns and importing some of the styles from the theme I like that conflict with the styles in Asterisk. Ooops. Totally messed everything up and can't undo in the TypePad editing window..... go back to V2.

Note: the links to the base TypePad stylesheet and the theme stylesheet will re-spawn if you copy and paste over them. You can delete the asterisk theme stylesheet when you are done but the link will stay so I prefer to just leave it.


  • Upload the images via the Files tab in your Control Panel

  • Click on the image name to view them and get the URL for the image.

  • Then replace the Asterisk images in the stylesheet with yours.

Next there may be several hours or lost days of hunting down styles with FF and adding your customizations to your new stylesheet, uploading it and viewing your test blog and tweaking, depending on how custom you need to be.

TIP: use a file merge program like Araxis Merge to view the theme stylesheet next to your own advanced template stylesheet to see what elements that you need might be missing and are causing trouble.

When your Layout blog looks exactly as you want, rename our Advanced Template to "My whatever" and apply it to your live blog. Further adjustments may be needed if there is lots of content in your blog and you see categories and widgets that were not enabled in your test blog and so not styled.

Happy customizing.

Friday, April 10, 2009

Adding a favicon to a Blogger blog

Well, this was the trickiest one of all (see my favicon how-to's for TypePad, WordPress, Expression Engine, SquareSpace)

Seems Google doesn't necessarily want you to do this even though the other blogs like WordPress finally threw in the towel.

Thursday, April 9, 2009

Help! I want a favicon on my TypePad blog

How to add a favicon from TypePad help

Favicons are the cute little logos that show to the left of your site URL in the browser address bar. TypePad lets you add your own custom favicon to your blog. If you want to add one for each of your blogs it seems like you have to point a domain to each separate blog as of April, 2009, but correct me if I am wrong.

How to add a favicon from TypePad help

Wednesday, April 8, 2009

Stop the Web Presses

...and read this article: 5 Harsh Truths about Web Design firms

before proceeding to invest in, design, develop or market a web site.  It is an excellent summary of how Web sites go wrong. I would add the following as crucial to building a success rather than building a web site:
Branding, information architecture, business analysis and good SEO.

Tuesday, April 7, 2009

Two other form builders

In the continuing search for the Holy Grail of online forms, here is one that is totally customizable. It requires the ability to upload files and use PHP so it does not work on hosted blogs like TypePad and WordPress, but it is brilliant in its simplicity and works like a charm.  Plus the developer is a great guy, please make a donation or buy him a coffee if you benefit from his efforts.

He also offers something cute, you can get a rounded box (try to do a rounded box without being a web designer or Adobe aficionado.) He even provides instructions on how to make a rounded box in Photoshop, this person is kind-hearted to web workers.

"Keep your elegant design! No complicated CSS and Javascript coding and frustrated testing. Now you have a re-usable, cross-browser supported rounded box. Use it to anywhere you want."

and that led me to yet another CMS to check out:


Back to forms...and yet another free php form that embeds with an i-frame but is better looking than the Google one.

Good: It is easy to create and download the form

Not Good: There are zero instructions on what do to, clearly assuming one has some web background. I see a css and js (javascript) file in the download, so now off to investigate if adding js to hosted accounts is possible.

They offer a fancier version for €28 license per site, which I prefer to the $4 a month endentured-ness. It would be nice if Response-O-matic had a one-time payment option.

Adding forms to your blog

For 2009 blogs have really come a long way. As a developer, I work with most of the mainstream blogs for one client or another.  Right now I have a client who has a terrific small business and moving her from her html site to a blog platform like Typepad or Word Press would be liberating for both of us. She needs to update her teaching schedule  monthly and needs a WYSIWYG to do it. 

Alas, she has a form on her site that allows students to request and get the first class free. It has been a great marketing tool so we can't give it up, but not so easy to add a validating, customizable form to a hosted blog!

Below is a Google doc form which I discovered in this pursuit. Below that is a Response-o-Matic form that works with Typepad too. What do each of them offer?

Google docs lets you make a simple, non-validated form with no email or other checking whatsoever, but it does update the responses to a spreadsheet in Google docs and you can forward new entries their to your email. You can cut and past the code into Typepad posts or pages in the html view. Nifty.  Hosted* Word Press does not allow the same code to be pasted in (it is an i-frame).

*I am referring to versions of big blogging platforms that are HOSTED by the platforms, like or or because I am really bored with keeping up with Word Press updates and plugin updates as are many of my friends, so we are looking for equally easy to design blogs whose developers deal with upgrades and plugins.

So the last two posts were the free but uncustomizable Google docs form and the Typepad recommended form builder which lets you validate fields, Response-o-Matic. but that costs $4 a month minimum and free is what this client is looking for, she is a micro business and $4 a month seems steep. Word Press has a free form plugin but you need to keep an eye on upgrade compatability.

I will have to check out the customizing ability with Response-o-Matic since being able to customize the look will be a requirement when working on a site that uses a graphic designer and not just a template. But if a client is investing in custom design, they are after professionalism and so should also be investing in supported applications as well, either by the platform or the web developer.

Sunday, April 5, 2009

Google free form

This is a form created free on Google docs. You can embed the form in your TypePad site or Blogger site (duh, Google owns Blogspot/Blogger) but not a site hosted at WordPress or a SquareSpace site.  

The good: Google uploads the information to a spreadsheet in your Google docs (you need a free Google account) and also automatically forwards the input to your email from there if you want.

The limits: you can't do error checking on email, can't do Captcha, can't do any customizing of the look.

embedded i-frame html gives you the below form. This is just an example form because I need one with email and drop-down lists.

Friday, April 3, 2009

sample form for Typepad from Response-O-Matic

Free form from Response-O-matic. You get one free form, then it is $4 a month per form as of April, 2009.  I really think they should make it much less expensive as you can get a great free php form on the web and free Google forms, or TypePad should integrate a form builder as should WordPress.


Telephone Number

Email Address:

Your level?

Your Preference?

Comments or Questions?

free forms


Today I am trying out free Thumbshots from their site,

A bit ironic that there is no thumbshot of the thumbshot site. Or maybe it is because my account has not been verified.

Well, let's try another site, shall we? How about the Golden Gate Bridge website. 

Interesting, here is the answer:

on the popularity of your site, our robot will automatically index your
site and generate the thumbshot for it. This process can take as little
as a few minutes to a few weeks. Please be patient and it will
eventually appear. Note the free thumbshots service runs at lower
priority than paid one."

Wow, there is a forum administrator who knows the product and asks questions. Bravo