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
- Styling Technorati Tags with CSS
- 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.
Every blog design can be broken down into the following page elements.
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.
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.
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.
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.
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.
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
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
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.
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
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.
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 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.
div.module-typelist.module h2.module-header div.module-content ul.module-list
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
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.
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.
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)