Custom CSS

About Custom CSS

Custom CSS is a feature made available to Pro level subscribers that allows them to customize the look and feel, layout, and design of their weblog without the need to convert to advanced templates.

Why Use Custom CSS

When a user converts their design to use advanced templates they sacrifice certain weblog design and configuration features for the advantage of being able to modify the page's HTML directly. Using Custom CSS to modify your weblog'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 one of your weblogs. Then click the Edit Custom CSS link next to the Change Layout and Change Theme links. You will be taken to a screen with a large text field. Type your custom CSS information into this field.

The information you enter will be appended to the end of your existing stylesheet. This will override any custom CSS properties and existing CSS properties that may have been defined elsewhere.

TypePad CSS Style and Class Reference

All TypePad weblogs 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 weblog, 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.

You may view the weblog's page structure in one of two formats:

• HTML Format
• Graphical Layout

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 weblog designs.

Page Elements

Every weblog 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 weblog. It is often used by designers to associate a logo with their weblog, or some other graphical page header.

Page Body

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

Weblog Columns: Alpha, Beta, Delta and Gamma

There are a number of content areas a weblog 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 to layout your content modules in the Weblog > Design area.

Post Content

Posts, or "entries," are the pieces of weblog 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 weblog 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 weblog.

Visitor Feedback

A weblog wouldn't be a weblog 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 weblog.

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 weblog'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)