S2 CSS: High level layout ids and classes

From Dreamwidth Notes
Revision as of 04:15, 28 May 2011 by Foxfirefey (Talk | contribs)

(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)
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 spatial layout purposes.

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. The body tag will have .has-navstrip or .no-navstrip to indicate whether the page is displaying 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".

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

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

The footer can contain modules.

Body classes

The <body> tag is classed in several ways.

Page Type

The body will have a class indicating what page type you're viewing.

  • .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
  • .page-network: For the Network Page view
  • .page-tags: For the Tags view

Layout Type

Another class will indicate what layout type has been set:

  • .one-column: for designs that don't use sidebars
  • .two-columns: for any two column design
  • .three-columns: for any three column design
  • .column-left: for any design with a sidebar on the left
  • .column-right: for any design with a sidebar on the right
  • .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

You don't have to design for all of these, but this gives you the capability to.

Logged Status

These indicates whether the viewer is logged in.

  • .logged-in
  • .logged-out

Subscription and Access Type

These indicate what the viewer's circle status is in relation to the journal they are viewing.

  • .my-journal: On the viewer's own journal
  • .subscribed: For a journal the viewer has subscribed to
  • .not-subscribed: For a journal the viewer doesn't subscribed to, and logged-out users
  • .has-access: For a journal the viewer has reading or posting access to
  • .no-access: For a journal the viewer doesn't have reading or posting access to, and logged-out users

Membership Type

These indicates what the viewer's membership status is when they are viewing community journals.

  • .is-admin: For maintainers
  • .is-moderator: For moderators (and maintainers since they always have moderation capabilities)
  • .is-member: For members
  • .non-member: For non members and logged-out users

Navstrip

There is also a class to indicate whether the navigation strip is being displayed or not:

  • .has-navstrip: This page has the navstrip on.
  • .no-navstrip: This page does not have the navstrip on.
Retrieved from "http://wiki.dreamwidth.net/wiki/index.php?title=S2_CSS:_High_level_layout_ids_and_classes&oldid=9822"