Difference between revisions of "S2 CSS: Module ids and classes"
From Dreamwidth Notes
Foxfirefey (Talk | contribs) (moar modules) |
|||
| Line 5: | Line 5: | ||
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".) | 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 = | + | = <tt>div.#secondary</tt> or <tt>div.#tertiary</tt> = |
| − | has .inner | + | has <tt>.inner</tt> |
| − | == div.module-section-one == | + | == <tt>div.module-section-one</tt> == |
| − | === div.module === | + | === <tt>div.module</tt> === |
There are also specific classes for different modules: | There are also specific classes for different modules: | ||
| − | * div.module-photo | + | * <tt>div.module-photo</tt> |
| − | * div.module-user-links | + | * <tt>div.module-user-links</tt> |
| − | * div.module-about | + | * <tt>div.module-about</tt> |
| − | * div.module-navlinks | + | * <tt>div.module-navlinks</tt> |
| − | * div.module-calendar | + | * <tt>div.module-calendar</tt> |
| − | * div.module-syndicate | + | * <tt>div.module-syndicate</tt> |
| − | * div.module-categories -- [http://bugs.dwscoalition.org/show_bug.cgi?id=980 going to be changed] | + | * <tt>div.module-categories</tt> -- [http://bugs.dwscoalition.org/show_bug.cgi?id=980 going to be changed] |
| − | * div.module-pagesummary | + | * <tt>div.module-pagesummary</tt> |
| − | * div.module-time | + | * <tt>div.module-time</tt> |
| − | * div.module-powered | + | * <tt>div.module-powered</tt> |
| − | ==== h2.module-header ==== | + | ==== <tt>h2.module-header</tt> ==== |
Not all modules have this. | Not all modules have this. | ||
* '''Affects:''' Titles of module sections such as Tags, Page Summary, Syndicate, etc. | * '''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. | + | * '''Other information:''' ''<tt>h2.module-header a</tt>'' refers to those items that are links instead of pure text. |
| − | ==== .module-content ==== | + | ==== <tt>.module-content</tt> ==== |
| − | 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. | + | This affects the content of modules such as tags list, links list, free text, about section, page summary. ''<tt>.module-content a</tt>'' refers to those items that are links instead of pure text. |
= Specific modules = | = Specific modules = | ||
| Line 41: | Line 41: | ||
== Lists == | == Lists == | ||
| − | If a module contains a list, such as .module-navlinks, .module-categories or .module-pagesummary, it is laid out thusly: | + | If a module contains a list, such as <tt>.module-navlinks</tt>, <tt>.module-categories</tt> or <tt>.module-pagesummary</tt>, it is laid out thusly: |
| − | === ul.module-list === | + | === <tt>ul.module-list</tt> === |
| − | ==== li.module-list-item ==== | + | ==== <tt>li.module-list-item</tt> ==== |
| − | == .module-calendar == | + | == <tt>.module-calendar</tt> == |
Inside its <tt>.module-content</tt>, there is a table with: | Inside its <tt>.module-content</tt>, there is a table with: | ||
| Line 54: | Line 54: | ||
* <tt>td.entry-day</tt> | * <tt>td.entry-day</tt> | ||
| − | == .module-time == | + | == <tt>.module-time</tt> == |
Inside its <tt>.module-content</tt>: | Inside its <tt>.module-content</tt>: | ||
| Line 60: | Line 60: | ||
* <tt>span#load-time</tt> | * <tt>span#load-time</tt> | ||
| − | == .module-powered == | + | == <tt>.module-powered</tt> == |
* <tt>span#site-branding</tt> | * <tt>span#site-branding</tt> | ||
| − | == .module-categories == | + | == <tt>.module-categories</tt> == |
After the <tt>ul.module-list</tt>, there is: | After the <tt>ul.module-list</tt>, there is: | ||
| Line 74: | Line 74: | ||
These modules have no headers: | These modules have no headers: | ||
| − | * .module-photo | + | * <tt>.module-photo</tt> |
| − | * .module-user-links | + | * <tt>.module-user-links</tt> |
| − | * .module-about | + | * <tt>.module-about</tt> |
| − | * .module-navlinks | + | * <tt>.module-navlinks</tt> |
| − | * .module-time | + | * <tt>.module-time</tt> |
| − | * .module-powered | + | * <tt>.module-powered</tt> |
[[Category: S2 CSS]] | [[Category: S2 CSS]] | ||
Revision as of 02:07, 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
