Add Custom CSS

The Custom CSS feature is available to subscribers at the Unlimited level and above. The feature allows the user to customize the look, feel, layout, and design of their blog without the need to use Advanced Templates.

Why would I use Custom CSS?

When a user applies an Advanced Template to their blog, they sacrifice certain blog design and configuration features for the advantage of being able to modify the HTML directly. Using Custom CSS to modify your blog's design allows you to retain all of these features while also keeping the convenience of all of Typepad's design features and capabilities.

How To Use Custom CSS

To use the Custom CSS feature, navigate to the Design area for your blog. Click the "Add Custom CSS" link from the options available.

You will be presented a screen with a large text field. Type, or paste, your Custom CSS information into this field. Save your changes. The information you enter will be appended to the end of your existing stylesheet. This will override any existing CSS properties that have been defined by the default stylesheet. This will also allow you to style elements that aren't specifically styled by the theme's CSS.

You can find some tips for using Custom CSS in these articles:

• Adding a Banner to a Pre-Defined Theme
• Adding Background Images
• Customizing the Default Post Font with CSS
• Customizing Column Widths

Typepad CSS Style and Class Reference

All Typepad blogs that do not use advanced templates share a common page and HTML structure in order to make them as flexible, and extensible as possible. This help document explains that page structure in order to facilitate the design process for users taking advantage of the Custom CSS feature.

Page Structure Overview

Every HTML page of your blog, regardless if it is the home page, an archives page, a permalink, or any other page, follows the same structure, and observes the same patterns in nomenclature, and hierarchy.

Inner and Outer Divs

Almost all page elements are double nested, meaning they have both an inner and outer container. While it appears that this paradigm provides a lot of redundant styles, it has the following advantages.

• The outer box provides a way to specify the dimensions of an element, while the inner box allows you to specify, padding and border properties. This eliminates the need to use various and obscure CSS tricks to make these properties work well together.
• Provides a hook for sliding door background image tricks: specifying different background images for the top-left and bottom-right boundaries of a box for example.
• Provides many hooks for global page backgrounds allowing for richer, more dynamic and diverse blog designs.

Page Elements

Every blog design can be broken down into the following page elements.

Container

The container div wraps the entire page and provides the hooks necessary to influence the style and positioning of a page at a global level.

Banner

The page banner contains the name and description of the blog. It is often used by designers to associate a logo with their blog, or some other graphical page header.

Page Body

The page body wraps all of your blog content, including all of your TypeLists, posts, trackbacks, comments, and other side bar content modules.

blog Columns: Alpha, Beta, Delta and Gamma

There are a number of content areas a blog may have. If your layout consists of multiple columns, then each of these columns is placed in one of four divs using the following id's: alpha, beta, delta and gamma.

The names of these content areas are intentionally ambiguous, as there is nothing that states that must be placed on the page in a specific order, or that they contain a specific piece of content.

In Typepad the contents of these content areas depends upon how you have chosen in the Design > Organize Content area.

Post Content

Posts, or "entries," are the pieces of blog content that you write. Each post contains the following elements.

• Post header, or title
• Post body
• Extended post body, or a link to the extended post body
• Post footer: permalink, post date, post author, etc.

Posts have the following class and div structure.

div.entry
    h3.entry-header
    div.entry-content
        div.entry-body
        (div.entry-more OR p.entry-more-link)
    p.entry-footer

The .entry-body and .entry-more divs frame blog post content and, to the greatest extend possible, try to keep malformed post content from disrupting the layout and style of the rest of the page.

Tip: It is recommended that users utilize our WYSIWYG post interface or use valid XHTML whenever possible to avoid posts from disrupting the layout of your blog.

Visitor Feedback

A blog wouldn't be a blog without visitor feedback, often found in the form of comments and TrackBacks. Typically every post is followed by visitor feedback. The following sections detail the class and styles for the various elements of displaying and allowing people to post their own visitor feedback.

Comments

This encapsulates all published comments for a given post.

a#comments (for hash-links)
div.comments
    h3.comments-header
    div.comments-content
        (the following sections are per-comment and repeat)
        div.comment
             div.comment-content
             p.comment-footer

Comment Form

When post has comment turned on, or "open," a form as well as additional text is typically displayed. This encapsulates that form and content.

div.comments-open
    h3.comments-open-header
    div.comments-open-content
        form
    div.comments-open-footer

Closed Comments

When post has comments turned off, or when comments are in a state of "closed," meaning previously published comments are visible, but new comments are forbidden, there is often a little explanatory text saying, "Comments on this post are closed." This encapsulates that content.

p.comments-closed

Trackbacks

This encapsulates all TrackBack data published to the blog.

div.trackbacks
    a#trackback (for hash-link on page)
    h3.trackbacks-header
    div.trackbacks-info
    div.trackbacks-content
        div.trackback
            div.trackback-content
            p.trackback-footer

Content Modules

Virtually all content that is not an archive list, post, comment or TrackBack is considered a "Content Module." Content modules are typically located in a blog's sidebars or in other words, their left and/or right columns.

Every content module however follows the same basic structure. Each has a div corresponding to the following elements.

• Container
• Header
• Content

Module Layout

Modules follow the same basic layout as content area sections, with a container div, a header, and a content div. Each content module has an additional classname to allow styling of it specifically, in addition to it using normal module styling.

div.module-<type>.module
    h2.module-header
    div.module-content
        ul.module-list

Of course, not all content modules utilize a list format for their content as the example above does, but content module content can in fact contain any arbitrary HTML.

TypeLists

TypeLists typically come in two flavors: normal text lists, such as link TypeLists and people TypeLists, and TypeLists with thumbnails, such as music and reading TypeLists.

Text-based TypeList

div.module-typelist.module
    h2.module-header
    div.module-content
        ul.module-list

Thumbnail/Image-based TypeList

div.module-typelist.module
    h2.module-header
    div.module-content typelist-thumbnailed
        ul.module-list
            li (repeat)
                div.typelist-thumbnail
                div.typelist-description

Archive List Content Modules

There are three primary types of archive listings that TypePad supports. The following style information applies to all three of these.

• Date Based
• Category Based
• Individual

div.archive (OR multiply-classed div.archive-date-based.archive)
    h2.archive-header
    div.archive-content
        ul.archive-list

As with a post, there is an enclosing div, a header, a content div, and additionally a styled list. The rule for the entry header also applies to the archive list as well.

Recent Photos

The Mixed Media Layouts Artistic, Moblog1, Moblog2 and Timeline have a Recent Photos module which is basically just a TypeList with an a/img nested pair in each li.

div.module-recent-photos.module
    h2.module-header
    div.module-content
        ul.module-list
            li (repeat)
                a
                    img

Generally they're styled identically for all layouts, with the only difference being the margin on the li, and padding/margin on the module-content, and sometimes a background treatment on .module-recent-photos.

Calendars

Our calendar content modules are one of the few content modules that utlize tables. There are two variants of these content modules.

• Classic Calendar (.module-calendar)
• Mixed Media Template Calendar (.module-mmt-calendar)