Difference between revisions of "S2 CSS: Module ids and classes"
Foxfirefey (Talk | contribs) |
Foxfirefey (Talk | contribs) m (→div.module-section-one or div.module-section-two) |
||
Line 28: | Line 28: | ||
* <tt>div.module-tags_list</tt> | * <tt>div.module-tags_list</tt> | ||
* <tt>div.module-pagesummary</tt> | * <tt>div.module-pagesummary</tt> | ||
+ | * <tt>div.module-search</tt> | ||
==== <tt>h2.module-header</tt> ==== | ==== <tt>h2.module-header</tt> ==== |
Revision as of 16:33, 18 November 2010
Modules are meant to provide styles with flexible methods of rearranging ancillary content and providing features to styles like page summaries, link lists, tag lists, layout credits, and calendar summaries. Users can rearrange the order and showing of modules in the wizard customize area instead of editing the style.
Contents
Containing classes
Modules can be found in the following page sections:
- div.#secondary>div.inner
- div.#tertiary>div.inner
div.module-wrapper
Inside the div.inner class.
div.module-section-one or div.module-section-two
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
- div.module-search
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-tags_list 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 -- a day that didn't have any posts and thus has nothing in it.
- td.entry-day -- a day that has posts; this means there will be a linked number inside the post.
.module-time
Inside its .module-content:
- span#load-time -- contains the time the page was loaded.
.module-powered
- span#site-branding -- contains "Powered by Dreamwidth Studios"
.module-tags_list
After the ul.module-list, there might be this:
- div.manage-tags-link -- contains a link to the manage tags page, if the viewer can has the appropriate permissions.
Also note that the list items here have tag visibility classes.
No header modules
These modules have no headers:
- .module-photo
- .module-user-links
- .module-about
- .module-navlinks
- .module-time
- .module-powered