TypePad Weblog Page Structure: TypePad Tips

The following is a reference for TypePad's published weblog page structure. It details the div hierarchy for the page along with each id and class (where applicable). This page is intended to be used in conjunction with TypePad's Custom CSS feature, which allows users to customize the look and feel of their weblog without the need to convert to Advanced Templates.

HTML Layout

<body>
    <div id="container">
        <div id="container-inner" class="pkg">
            <div id="banner">
                <div id="banner-inner" class="pkg">
                    <h1 id="banner-header">Weblog Name</h1>
                    <h2 id="banner-description">Weblog Description</h2>
                </div>
            </div>
            <div id="pagebody">
                <div id="pagebody-inner" class="pkg">
                    <div id="alpha">
                        <div id="alpha-inner" class="pkg">
                        </div>
                    </div>
                    <div id="beta">
                        <div id="beta-inner" class="pkg">
                        </div>
                    </div>
                    <div id="delta">
                        <div id="delta-inner" class="pkg">
                        </div>
                    </div>
                    <div id="gamma">
                        <div id="gamma-inner" class="pkg">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>

Graphical Layout

body

#container

#container-inner, .pkg

#banner

#banner-inner, .pkg

h1 #banner-header

h2 #banner-description

#pagebody

#pagebody-inner, .pkg

#alpha .pkg

#alpha-inner .pkg

#beta .pkg

#beta-inner .pkg

#delta .pkg

#delta-inner .pkg

#gamma .pkg

#gamma-inner .pkg