Advanced Templates: Stylesheet Templates

Advanced Template Set designs are available with the Unlimited, Premium, and Business Class plans.

Default Stylesheet Templates

When you create a new advanced template set, the set will include the Base Weblog and the Asterisk Theme stylesheets.

Stylesheet Template

/* This imports the Base Weblog CSS from Typepad, which defines core styles */ @import url(/.shared/themes/common/base-weblog.css); /* This imports the local asterisk-style.css, which you can use as a guide for customizing your blog's CSS. */ @import url(asterisk-style.css);

Theme Stylesheet Template

/* ---------------------------------------------------------- */ /* THEME STYLING BEGINS HERE */ /* ---------------------------------------------------------- */ /* basic page element styling */ body { background-repeat: repeat-x; background-attachment: fixed; background-position: top left; color: #333; background-color: #fff; background-image: url(/.shared-typepad/themes/walt/theme-asterisk_white_wide/body-bg.png); font-family: 'lucida grande', helvetica, arial, sans-serif; font-size: 12px; } h1, h2, h3, h4, h5, h6 { font-family: 'lucida grande', helvetica, arial, sans-serif; } a { color: #900; } a:hover { color: #600; } /* page layout basics */ #container { width: 942px; } #alpha { float: left; margin: 0 0 0 20px; } #alpha-inner { padding: 0 0 25px; } #beta { margin-top : 0px; margin-right : 0px; margin-bottom : 0px; margin-left: 40px; float: left; } #beta-inner { padding: 0 0 25px; } #gamma { float: left; margin: 0 0 0 20px; } #gamma-inner { padding: 0 0 25px; } /* container styling */ #container-inner { border-color: #fff; border-width: 0 1px; border-style: solid; } /* banner styling */ #banner { width: 940px; margin: 0; border-top-width: 5px; border-top-style: solid; background-repeat: no-repeat; background-position: bottom left; border-top-color: #000; background-color: #fff; background-image: url(/.shared-typepad/themes/walt/theme-asterisk_white_wide/header.png); } #banner a { color: #000; text-decoration: none; } #banner a:hover { text-decoration: underline; } #banner-inner { border-top-color: #fff; border-top-width: 1px; border-top-style: solid; padding-right: 220px; } #banner-header { color: #000; margin: 0; padding: 25px 20px 5px; font-family: georgia, 'times new roman', serif; font-size: 36px; font-weight: normal; line-height: 1; } #banner-description { color: #333; margin: 0; padding: 5px 20px 35px; font-family: georgia, 'times new roman', serif; font-size: 18px; line-height: 1.125; font-style: italic; } /* navigation bar styling */ #nav { background: #e5e6e8 url(/.shared-typepad/themes/walt/theme-asterisk_white_wide/nav.gif) repeat-x top left; } .nav-list { border-bottom: 1px solid #cdcdcd; } .nav-list-item { border-right: 1px solid #cdcdcd; } .nav-list-item a { font-size: 11px; padding: 6px 11px; } /* pagebody styling */ #pagebody { background-color: #fff; padding: 15px 0; } #pagebody-inner { background-repeat: repeat-y; background-position: top center; } /* entry listing and entry styling */ .content-header { margin: 5px 0 20px; font-family: georgia, 'times new roman', serif; font-size: 28px; color: #000; } .content-nav { margin: 5px 0 20px; } .date-header { color: #666; margin: 5px 0; font-size: 10px; } .entry { background-image: url(/.shared-typepad/themes/walt/theme-asterisk_white_wide/post-ornament.png); background-repeat: no-repeat; background-position: 0 10px; } .entry-header { color: #000; margin: 5px 25px 5px; font-family: georgia, 'times new roman', serif; font-size: 22px; } .entry-header a { color: #000; text-decoration: none; } .entry-header a:hover { text-decoration: underline; } .entry-content { margin: 5px 25px; } .entry-more-link { font-size: 11px; font-weight: bold; } .entry-footer { border-top-color: #e5e5e5; color: #666; font-size: 11px; margin: 10px 25px 20px; border-top-width: 1px; border-top-style: solid; padding-top: 5px; font-weight: normal; } .entry-footer a { color: #666; } .entry-footer a:hover { color: #333; } #comment-author, #comment-email, #comment-url, #comment-text { width: 80%; } .trackbacks-header, .comments-header, .comments-open-header, .archive-header { /* ie win (5, 5.5, 6) bugfix */ p\osition: relative; width: 100%; w\idth: auto; margin: 0; padding: 5px 0; font-size: 14px; font-weight: bold; color: #000; } .trackback-content, .comment-content, .comments-open-content, .comments-closed { margin: 5px 0; } .trackbacks-info, .trackback-footer, .comments-info, .comment-footer, .comments-open-footer, .archive-content { margin: 5px 0 20px; } .trackback-footer, .comment-footer { border-top-width: 1px; border-top-style: solid; padding-top: 5px; border-top-color: #e5e5e5; color: #666; font-size: 11px; } .comment-footer a { color: #666; } .comment-footer a:hover { color: #333; } /* sidebar module styling */ .module-header { color: #000; /* ie win (5, 5.5, 6) bugfix */ p\osition: relative; width: 100%; w\idth: auto; margin: 0; padding: 5px 0; font-size: 14px; font-weight: bold; } .module-header a { color: #000; } .module-content { margin: 5px 0 20px; font-size: 11px; } .module-content a { color: #900; } .module-content a:hover { color: #600; } .module-calendar { font-size: 11px; } .module-powered { margin: 0; padding: 0; } .module-powered .module-content { margin: 15px 0; padding: 10px; border-width: 1px; border-style: solid; text-align: center; background-repeat: repeat-x; background-position: top left; border-color: #e5e5e5; color: #333; background-color: #f3f3f3; background-image: url(/.shared-typepad/themes/walt/theme-asterisk_white_wide/gradient-bg.png); } .module-powered .module-content a { color: #333; } .module-photo { border: 0; background: none; } .module-photo .module-content { margin: 10px; } .module-photo img { border: 0; } .module-featured-photo { width: 415px; } .module-featured-photo .module-content { margin: 15px 0 5px; } .module-featured-photo img { width: 415px; } .module-recent-photos { border: 0; margin-left: 2px; } .module-recent-photos .module-header { background-image: none; } .module-recent-photos .module-list { margin: 0; } .module-recent-photos .module-list-item { width: 64px; /* mac ie fix */ margin: 0 5px 6px 0; padding: 0; background-image: none; } .module-recent-photos .module-list-item a { border-width: 1px; border-style: solid; padding: 1px; border-color: #ccc; background-color: #eee; } .module-recent-photos .module-list-item a:hover { border-color: #000; } .archive-list-item { margin-bottom: 5px; } .typelist-thumbnailed { margin: 0 0 20px; } .typelist-thumbnailed .module-list-item { margin: 1px 0; border-width: 1px; border-style: solid; padding: 0; background-repeat: repeat-x; background-position: top left; border-color: #e5e5e5; background-color: #f3f3f3; background-image: url(/.shared-typepad/themes/walt/theme-asterisk_white_wide/gradient-bg.png); font-size: 11px; } .typelist-thumbnail { background: #f3f3f3; } /* one-column tweaks */ .layout-one-column #container { width: 782px; } .layout-one-column #banner { width: 780px; } .layout-one-column #alpha { width: 740px; } .layout-one-column #banner { background-position: right bottom; } /* two-column-left tweaks */ .layout-two-column-left #pagebody-inner { background-image: url(/.shared-typepad/themes/walt/theme-asterisk_white_wide/body-bg-tw.png); } .layout-two-column-left #alpha { width: 300px; } .layout-two-column-left #beta { width: 560px; } /* two-column-right tweaks */ .layout-two-column-right #pagebody-inner { background-image: url(/.shared-typepad/themes/walt/theme-asterisk_white_wide/body-bg-wt.png); } .layout-two-column-right #alpha { width: 560px; } .layout-two-column-right #beta { width: 300px; } /* three-column tweaks */ .layout-three-column #pagebody-inner { background-image: url(/.shared-typepad/themes/walt/theme-asterisk_white_wide/body-bg-twt.png); } .layout-three-column #alpha { width: 120px; } .layout-three-column #beta { width: 400px; } .layout-three-column #gamma { width: 300px; } /* three-column-right tweaks */ .layout-three-column-right #pagebody-inner { background-image: url(/.shared-typepad/themes/walt/theme-asterisk_white_wide/body-bg-wtt.png); } .layout-three-column-right #alpha { width: 400px; } .layout-three-column-right #beta { width: 120px; } .layout-three-column-right #gamma { width: 300px; }

Editing the Stylesheet Templates

The Stylesheet Template imports the Base Weblog and Asterisk Theme stylesheets. You can view the full code for the base-weblog.css stylesheet here:

http://www.typepad.com/.shared/themes/common/base-weblog.css

You can choose to import your own stylesheet or another of Typepad's themes by changing the @import url in the Stylesheet Template. If you are importing your own stylesheet, you can upload the stylesheet to your Typepad account at Library > File Manager. Then, replace asterisk-style.css with the full URL for your stylesheet. For example:

@import url(http://example.typepad.com/custom-style.css)

To incorporate the style of another of Typepad's themes, you can find the theme's stylesheet URL by applying the theme to a test blog. Then, add styles.css to the end of the blog's URL to view the stylesheet for the blog. Under the Theme heading, you can copy the URL for the theme which will be used to replace asterisk-style.css in the Stylesheet Template.