S2 CSS: Module ids and classes

From Dreamwidth Notes
Revision as of 00:35, 27 April 2009 by Foxfirefey (Talk | contribs)

Jump to: navigation, search
Expand: We are expanding the documentation here!

Sidebar classes

These are classes generally found in the #secondary or #tertiary sidebars (which might not actually be on the side, but on the bottom of the page or somewhere else, but we haven't yet come up with a better name than "sidebar".)

div.#secondary or div.#tertiary

has .inner

div.module-section-one

div.module

There are also specific classes for different modules:

  • div.module-photo
  • div.module-user-links
  • div.module-about
  • div.module-navlinks
  • div.module-calendar
  • div.module-syndicate
  • div.module-categories -- going to be changed
  • div.module-pagesummary
  • div.module-time
  • div.module-powered

h2.module-header

Not all modules have this.

  • Affects: Titles of module sections such as Tags, Page Summary, Syndicate, etc.
  • Other information: h2.module-header a refers to those items that are links instead of pure text.

.module-content

This affects the content of modules such as tags list, links list, free text, about section, page summary. .module-content a refers to those items that are links instead of pure text.

Specific modules

Lists

If a module contains a list, such as .module-navlinks, .module-categories or .module-pagesummary, it is laid out thusly:

ul.module-list

li.module-list-item

.module-calendar

Inside its .module-content, there is a table with:

  • td.empty-day
  • td.entry-day

.module-time

Inside its .module-content:

  • span#load-time

.module-powered

  • span#site-branding

.module-categories

After the ul.module-list, there is:

  • div.manage-tags-link

No header modules

These modules have no headers:

  • .module-photo
  • .module-user-links
  • .module-about
  • .module-navlinks
  • .module-time
  • .module-powered