Difference between revisions of "S2 CSS: High level layout ids and classes"

From Dreamwidth Notes
Jump to: navigation, search
m (→‎#primary)
(→‎#footer)
Line 42: Line 42:
 
=== <tt>#footer</tt> ===
 
=== <tt>#footer</tt> ===
  
−
* '''Affects:''' Additional sidebar or similar.  In a three-column layout, this would be the second sidebar, but it could also appear at the bottom of the page, or anywhere else where you might want to put modules.
+
* '''Affects:''' Footer, at the bottom of the page.
 
* '''Views:''' All
 
* '''Views:''' All
 
* '''Other information:''' Note: there is a footer <i>class</i> that's used inside entries, but this is the footer at the bottom of the page.
 
* '''Other information:''' Note: there is a footer <i>class</i> that's used inside entries, but this is the footer at the bottom of the page.

Revision as of 18:34, 14 July 2009

Expand: Needs overall description

Main page sections

All of the below IDs are attached to <div>s and have div.inners nested inside of them.

#canvas

  • Affects: The whole page, excluding the nav strip
  • Views: All

#header

  • Affects: The page header, containing the title/subtitle of the page.
  • Views: All
  • Other information: This would usually contain an h1 and h2 saying something like "Your Name / Recent Entries".

#content

  • Affects: Contains the #primary, #secondary, and #tertiary divs
  • Views: All
  • Other information:

#primary

  • Affects: Main content area (user entries on Recent, other users' entries on Read, calendar on Calendar)
  • Views: All
  • Other information: #primary, #secondary, and #tertiary are layout identifiers. CSS for these areas will generally be focused on size and positioning rather than the formatting of their contents.

#secondary

  • Affects: A sidebar or other non-primary section of the page, usually used to for modules such as navigation, links, calendar, tags etc
  • Views: All
  • Other information: #primary, #secondary, and #tertiary are layout identifiers. CSS for these areas will generally be focused on size and positioning rather than the formatting of their contents.

#tertiary

  • Affects: Additional sidebar or similar. In a three-column layout, this would be the second sidebar, but it could also appear at the bottom of the page, or anywhere else where you might want to put modules.
  • Views: All
  • Other information: #primary, #secondary, and #tertiary are layout identifiers. CSS for these areas will generally be focused on size and positioning rather than the formatting of their contents.

#footer

  • Affects: Footer, at the bottom of the page.
  • Views: All
  • Other information: Note: there is a footer class that's used inside entries, but this is the footer at the bottom of the page.

Body classes

The <body> tag is classed in two ways. One way is the type of page being shown:

  • .page-day: For the Day Page view
  • .page-entry: For the Entry Page view
  • .page-recent: For the Recent Page view
  • .page-month: For the Month Page view
  • .page-archive: For the Year Page view
  • .page-read: For the Read Page view

The other way is by the layout type:

  • .one-column: for designs that don't use sidebars
  • .two-columns-left: for two column designs that put the sidebar on the left
  • .two-columns-right: for two column designs that put the sidebar on the right
  • .three-columns-sides: for three column designs that put each sidebar on the sides
  • .three-columns-left: for three column designs that put both sidebars on the left
  • .three-columns-right: for three column designs that put both sidebars on the right

Header title ids

The header on each page contains three title header ids:

  • h1#title -- title of the journal
  • h2#subtitle -- subtitle of the journal
  • h2#pagetitle -- title of the page
Retrieved from "http://wiki.dreamwidth.net/wiki/index.php?title=S2_CSS:_High_level_layout_ids_and_classes&oldid=5240"