Stylesheet Reference

Default Identifiers

#alpha
<div> A column that contains an entry or entry listing in a one-column and two-column right layout or the sidebar in a two-column left layout.
#alpha-inner
<div> For margin and padding purposes.
#banner
<div> The banner comes first in the container and contains our blog name and description.
#banner-description
<h2> Contains the blog description in the banner.
#banner-header
<h1> Contains the blog name in the banner.
#banner-inner
<div> You shouldn't set the width of this div; use margin or padding to push against the outer banner div.
#beta
<div> A column, contains an entry or entry listing in a two-column left and three-column layout or the sidebar in a two-column right layout.
#beta-inner
<div> For margin and padding purposes.
#container
<div> Contains all displayed content and therefore makes it easy to manipulate everything together. This also allows us to center our content on older browsers.
#container-inner
<div> In a perfect world, we wouldn't need this div; but with so many browser bugs and partially implimented standards, using an extra 'inner' div is the best way to insure that our styles look the way they should on every platform and browser.
#date-header
<h2> Appears before each group of entries published on the same date.
#gamma
<div> A column used only in a three-column layout to hold the right hand sidebar.
#gamma-inner
<div> For margin and padding purposes.
#pagebody
<div> Holds the main content of the page.
#pagebody-inner
<div> For margin and padding purposes.
#search
<input> Allows for specific styling of the search module input field.

Default Classes

.entry
<div> Each individual entry in an entry listing gets placed in one of these.
.entry-body
<div> For margin and padding purposes.
.entry-content
<div> Contains the entry text and footer.
.entry-footer
<p> Contains vital post statistics.
.entry-header
<h3> Contains the title of your entry.
.entry-more-link
<p> The "continue reading this post" link.
.layout-two-column-right, .layout-two-column-left, .layout-one-column, .layout-three-column
<body> These classes are incorporated into your stylesheet to add flexibility. If you choose to only design for a specific layout style, you won't need to worry about these.
.module
<div> Each sidebar module is given this class, along with another class specific to that module's content. i.e. "class=module-search module" Your module header and content are both inside this div.
.module-archives
<div> Partnered with .module, used with our monthly archives and recent posts modules.
.module-categories
<div> Partnered with .module, holds our blog categories.
.module-content
<div> The innermost content of a sidebar module.
.module-creative-commons
<div> Partnered with .module, holds our license information (if active).
.module-header
<h2> Applied to the h2 of each sidebar module.
.module-list
<ul> Any list in a sidebar module. i.e. Category Listing
.module-list-item
<li> Any list item in a sidebar module.
.module-powered
<div> Partnered with .module, holds the powered by blurb.
.module-search
<div> Partnered with .module, holds our search module.
.module-syndicate
<div> Partnered with .module, holds our blog subscription information.
.post-footers
<span> This span shows the posted by name and entry post date.
.pkg
<div> Added to inner divs, wraps an enclosing block element around inner floated elements (via <p>after pseudoclass).
.separator
<span> A separator pipe is wrapped in this span, allowing us to either style it differently or take it out altogether.

Comments

Danny
May 5, 2006 5:19 PM

Was there a particular reason why there is no 'footer' div in the templates? All the nested divs allow one sort of flexibility, but the fact that everything but the banner is inside the 'pagebody' div prevents the creation of designs where the content is in a frame and scrolls behind elements at the top and bottom of the browser window (at least if you want to avoid scroll bars within the design, which I do). I'm still trying (and trying and trying) to come up with a workaround, but it seems to me that a footer would make this design, and many other creative ideas, much easier without adding anything significant in terms of page weight. You could even make it 'display: none' in base-weblog.css, and no one would even notice it unless they wanted it!

MJMatos
May 7, 2006 9:12 AM

Just a remark: some standard templates of Movable Type imply one-column. So, I don't understand why it is said that stylers need not care with other layout types, namely the one-column layout.

Post a Comment

Please login to post a comment

Typekey LiveJournal OpenID