WordPress.org

Ready to get started?Download WordPress

Codex

Attention Interested in functions, hooks, classes, or methods? Check out the new WordPress Code Reference!

User:Drummonds/wp-layout.css Reference

Contents

Outdated

This attempt to document the CSS files in WordPress was outdated before it was even created. See User:Drummonds/style.css_Reference for a newer reference.

Work in Progress!

This article was started by Scott Drummonds using the documentation found at http://blog.nuclearmoose.com/wp-docs/wp-layout-explained.htm. That document's contents do not accurately describe the contents of WordPress 1.5's wp-layout.css file. So, until this warning is removed, place little faith in this document and correct anything that you know to be in error!

Known issues (please help update/correct!):

  • Calendar tags: are they still valid in 1.5?

Introduction

This document will describe each item that can be configured in wp-layout.css. This page is not meant to serve as a reference on cascading style sheets. For information on CSS in general, with nothing specific to WordPress, see the CSS Resources section on this Wiki.

Reference

Alphabetical list of items in wp-layout.css:

#commentform

COMMENTFORM is a DIV to hold your comment form. Notice any pattern to how the selectors are named? You will see it used like this: <div id="commentform"> This compound selector is defining the style for both the input and text areas.

#comments

#content

CONTENT is the DIV that holds your posts.

#credit

CREDIT class is used along the bottom of the INDEX.PHP to style the link to WordPress

#footer

#header

HEADER is used to format the h1 tag for the title of your site. In INDEX.PHP you will see it used like this: <div id="header">.

HEADER A styles the linked title text -- In INDEX.PHP you will see it used like this: <h1 id="header">.

HEADER A:HOVER is a pseudo-class that styles the hyperlink on mouse-over.

#menu

MENU is the name of the DIV that contains your sidebar stuff. In INDEX.PHP you will see it used like this: <div id="class">.

#next

#page

#pref

#rap

RAP is the overall DIV used to hold all of the page contents. In INDEX.PHP you will see it used like this: <div id="rap">.

#today

#wp-calendar

.alt

.credit

.entry

.feedback

FEEDBACK class styles the "Comments" text at the bottom of your post.

.meta

META class is used to style the META section of the MENU and the FILED UNDER text in the posts.

.narrowcolumn

.post

POST class is NOT defined in default WP-LAYOUT.CSS -- In INDEX.PHP you will see it used like this: <div class="post"> -- You could use this to style individual posts within the CONTENT DIV.

.postmetadata

.storycontent

STORYCONTENT class styles the DIV that holds your story text -- In INDEX.PHP you will see it used like this: <div class="storycontent">.

.storytitle

STORYTITLE class is used to style the h3 tag -- This is also the style of the Permalink. In INDEX.PHP you will see it used like this: <h3 class="storytitle">.

.widecolumn

General HTML

a, abbr, acronym, blockquote, body, caption, cite, form, h1, h2, h3, img, input, li, p, small, td, th, textarea, ul: Not WordPress-specific. See general CSS documentation.</nowiki>