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

From Dreamwidth Notes
Jump to: navigation, search
(→‎Specific modules)
 
(9 intermediate revisions by 3 users not shown)
Line 1: Line 1:
−
{{Expand|text=We are expanding the documentation here!}}
+
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.
  
−
= Sidebar classes =
+
= Containing classes =
  
−
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".)
+
Modules can be found in the following page sections:
  
−
= <tt>div.#secondary</tt> or <tt>div.#tertiary</tt> =
+
* <tt>div.#secondary&gt;div.inner</tt>
 +
* <tt>div.#tertiary&gt;div.inner</tt>
  
−
has <tt>.inner</tt>
+
== <tt>div.module-wrapper</tt> ==
  
−
== <tt>div.module-section-one</tt> ==
+
Inside the <tt>div.inner</tt> class.
  
−
=== <tt>div.module</tt> ===
+
=== <tt>div.module-section-one</tt> or <tt>div.module-section-two</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 21: Line 22:
 
* <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>
 
* <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>div.module-search</tt>
  
 
==== <tt>h2.module-header</tt> ====
 
==== <tt>h2.module-header</tt> ====
Line 41: Line 45:
 
== Lists ==
 
== Lists ==
  
−
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:
+
These modules contain lists:
 +
 
 +
* <tt>.module-navlinks</tt> -- contains navigation links
 +
* <tt>.module-tags_list</tt> -- contains the list of tags
 +
* <tt>.module-pagesummary</tt> -- summary of posts/comments on the page
 +
* <tt>.module-typelist</tt> -- a list of links
  
 
=== <tt>ul.module-list</tt> ===
 
=== <tt>ul.module-list</tt> ===
Line 51: Line 60:
 
Inside its <tt>.module-content</tt>, there is a table with:
 
Inside its <tt>.module-content</tt>, there is a table with:
  
−
* <tt>td.empty-day</tt>
+
* <tt>td.empty-day</tt> -- a day that didn't have any posts and thus has nothing in it.
−
* <tt>td.entry-day</tt>
+
* <tt>td.entry-day</tt> -- a day that has posts; this means there will be a linked number inside the post.
 +
 
 +
If the calendar is displayed horizontally, there is no table but you can use similar classes:
 +
 
 +
* <tt>.empty-day</tt>
 +
* <tt>.entry-day</tt>
  
 
== <tt>.module-time</tt> ==
 
== <tt>.module-time</tt> ==
Line 58: Line 72:
 
Inside its <tt>.module-content</tt>:
 
Inside its <tt>.module-content</tt>:
  
−
* <tt>span#load-time</tt>
+
* <tt>span#load-time</tt> -- contains the time the page was loaded.
  
 
== <tt>.module-powered</tt> ==
 
== <tt>.module-powered</tt> ==
  
−
* <tt>span#site-branding</tt>
+
* <tt>span#site-branding</tt> -- contains "Powered by [http://www.dreamwidth.org/ Dreamwidth Studios]"
  
−
== <tt>.module-categories</tt> ==
+
== <tt>.module-tags_list</tt> ==
  
−
After the <tt>ul.module-list</tt>, there is:
+
After the <tt>ul.module-list</tt>, there might be this:
  
−
* <tt>div.manage-tags-link</tt>
+
* <tt>div.manage-tags-link</tt> -- contains a link to the manage tags page, if the viewer can has the appropriate permissions.
 +
 
 +
Also note that the list items here have [http://wiki.dwscoalition.org/notes/S2_CSS:_Tag_page_ids_and_classes#Visibility_classes tag visibility classes].
 +
 
 +
== <tt>.module-search</tt> ==
 +
 
 +
Contains <tt>div.search-form</tt>, inside is the form.
 +
 
 +
<tt>.search-box</tt> is the text entry.
 +
<tt>.search-button</tt> is the submit button.
  
 
== No header modules ==
 
== No header modules ==
Line 74: Line 97:
 
These modules have no headers:
 
These modules have no headers:
  
−
* <tt>.module-photo</tt>
+
* <tt>.module-navlinks</tt> -- but some styles have added one.
−
* <tt>.module-user-links</tt>
+
−
* <tt>.module-about</tt>
+
−
* <tt>.module-navlinks</tt>
+
 
* <tt>.module-time</tt>
 
* <tt>.module-time</tt>
 
* <tt>.module-powered</tt>
 
* <tt>.module-powered</tt>
 +
 
[[Category: S2 CSS]]
 
[[Category: S2 CSS]]

Latest revision as of 04:17, 26 January 2012

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.

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

These modules contain lists:

  • .module-navlinks -- contains navigation links
  • .module-tags_list -- contains the list of tags
  • .module-pagesummary -- summary of posts/comments on the page
  • .module-typelist -- a list of links

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.

If the calendar is displayed horizontally, there is no table but you can use similar classes:

  • .empty-day
  • .entry-day

.module-time

Inside its .module-content:

  • span#load-time -- contains the time the page was loaded.

.module-powered

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

.module-search

Contains div.search-form, inside is the form.

.search-box is the text entry. .search-button is the submit button.

No header modules

These modules have no headers:

  • .module-navlinks -- but some styles have added one.
  • .module-time
  • .module-powered
Retrieved from "http://wiki.dreamwidth.net/wiki/index.php?title=S2_CSS:_Module_ids_and_classes&oldid=10469"