Last updated October 11, 2011. Created by joachim on March 2, 2009.
Edited by ben.kyriakou, pillarsdotnet, kristofer, Tor Arne Thune. Log in to edit this page.
Drupal core takes a modular approach to CSS classes for standard page elements. A number of classes occur throughout a Drupal site. This list is meant as a quick crib sheet for remembering which classes mean what and occur where. A complete list of classes in Drupal 6 core can be found in the Zen starter kit (STARTERKIT/css/drupal6-reference.css) and should be merged into this document.
Note: themes you download may alter these classes, and add further ones.
Page elements
-
.menu
-
All menu trees get this class, such as the navigation menu.
-
.block
-
All blocks. See http://drupal.org/node/104319 for more on styling blocks.
-
.links
-
Lists of links, including Primary and Secondary links in the page header, and also node links and taxonomy terms (see below).
(Added in D7)
-
.element-hidden
-
The role of this class is to hide elements from all users. This class should be used for elements which should not be immediately displayed to any user. An example would be a collapsible fieldset that will be expanded with a click from a user. The effect of this class can be toggled with the jQuery show() and hide() functions.
-
.element-invisible
-
The role of this class is to hide elements visually, but keep them available for screen-readers. This class should be used for information required for screen-reader users to understand and use the site where visual display is undesirable. Information provided in this manner should be kept concise, to avoid unnecessary burden on the user. This class must not be used for focusable elements (such as links and form elements) as this causes issues for keyboard only or voice recognition users.
-
.element-invisible.element-focusable
-
The .element-focusable class extends the .element-invisible class to allow the element to be focusable when navigated to via the keyboard.
Node elements
-
.node
-
A wrapper div around all of a node, including its title.
-
.node-title
-
The title of the node.
-
.content
-
The body of the node. This will include additions other modules make, such as uploaded files or CCK fields.
-
.links
-
Applied to any UL that is a list of links, including Primary and Secondary links in the page header, and also node links and taxonomy terms (see below). Node links however get the .links class on their enclosing DIV.
-
.terms
-
Taxonomy terms, which also get .links and .inline.
-
.inline
-
This is a system class for styling UL items into a horizontal line.
-
.feed-icon
-
RSS feed icons, usually at the foot of the page content area.