S2 CSS: High level layout ids and classes

From Dreamwidth Notes
Revision as of 18:51, 14 July 2009 by CesyDW (Talk | contribs)

Jump to: navigation, search

The following ids are high-level wrappers for sections of the page. They are useful for things you want to apply to the whole page, and for layout.

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
  • Other information: Wherever possible, this should be used instead of body to do things like changing the font for your whole journal. Contains #header, #content and #footer.

#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=5244"