Difference between revisions of "S2 CSS: Module ids and classes"

From Dreamwidth Notes
Jump to: navigation, search
(div.module-section-one)
(div.module-section-one)
Line 21: Line 21:
 
* <tt>div.module-calendar</tt>
 
* <tt>div.module-calendar</tt>
 
* <tt>div.module-syndicate</tt>
 
* <tt>div.module-syndicate</tt>
* <tt>div.module-categories</tt> -- [http://bugs.dwscoalition.org/show_bug.cgi?id=980 going to be changed]
 
 
* <tt>div.module-pagesummary</tt>
 
* <tt>div.module-pagesummary</tt>
 
* <tt>div.module-time</tt>
 
* <tt>div.module-time</tt>

Revision as of 19:00, 14 July 2009

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-wrapper

div.module-section-one

Within this there are 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-pagesummary
  • div.module-time
  • div.module-powered
  • div.module-userprofile
  • div.module-tags_list
  • div.module-pagesummary

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