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

From Dreamwidth Notes
Jump to: navigation, search
(div.module-section-one)
Line 9: Line 9:
 
has <tt>.inner</tt>
 
has <tt>.inner</tt>
  
== <tt>div.module-section-one</tt> ==
+
== <tt>div.module-wrapper</tt> ==
  
=== <tt>div.module</tt> ===
+
=== <tt>div.module-section-one</tt> ===
  
There are also specific classes for different modules:
+
Within this there are specific classes for different modules:
  
 
* <tt>div.module-photo</tt>
 
* <tt>div.module-photo</tt>
Line 25: Line 25:
 
* <tt>div.module-time</tt>
 
* <tt>div.module-time</tt>
 
* <tt>div.module-powered</tt>
 
* <tt>div.module-powered</tt>
 +
* <tt>div.module-userprofile</tt>
 +
* <tt>div.module-tags_list</tt>
 +
* <tt>div.module-pagesummary</tt>
  
 
==== <tt>h2.module-header</tt> ====
 
==== <tt>h2.module-header</tt> ====

Revision as of 18:59, 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-categories -- going to be changed
  • 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