Difference between revisions of "S2 CSS: Module ids and classes"
From Dreamwidth Notes
Foxfirefey (Talk | contribs) (Created page with '{{Expand|text=We are expanding the documentation here!}} = Sidebar classes = These are classes generally found in the #secondary or #tertiary sidebars (which might not actually...') |
Foxfirefey (Talk | contribs) (moar modules) |
||
| Line 3: | Line 3: | ||
= Sidebar classes = | = 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".) | + | These are classes generally found in the <tt>#secondary</tt> or <tt>#tertiary</tt> 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 | |
| − | + | ||
| − | + | ||
| − | == .module- | + | == 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 -- [http://bugs.dwscoalition.org/show_bug.cgi?id=980 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 <tt>.module-content</tt>, there is a table with: | ||
| + | |||
| + | * <tt>td.empty-day</tt> | ||
| + | * <tt>td.entry-day</tt> | ||
| + | |||
| + | == .module-time == | ||
| + | |||
| + | Inside its <tt>.module-content</tt>: | ||
| + | |||
| + | * <tt>span#load-time</tt> | ||
| + | |||
| + | == .module-powered == | ||
| + | |||
| + | * <tt>span#site-branding</tt> | ||
| + | |||
| + | == .module-categories == | ||
| + | |||
| + | After the <tt>ul.module-list</tt>, there is: | ||
| + | |||
| + | * <tt>div.manage-tags-link</tt> | ||
| + | |||
| + | == No header modules == | ||
| + | |||
| + | These modules have no headers: | ||
| + | |||
| + | * .module-photo | ||
| + | * .module-user-links | ||
| + | * .module-about | ||
| + | * .module-navlinks | ||
| + | * .module-time | ||
| + | * .module-powered | ||
[[Category: S2 CSS]] | [[Category: S2 CSS]] | ||
Revision as of 00:35, 27 April 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-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
