Difference between revisions of "S2 CSS: High level layout ids and classes"
From Dreamwidth Notes
(→#content) |
(→Body classes) |
||
| Line 50: | Line 50: | ||
The <body> tag is classed in two ways. One way is the type of page being shown: | The <body> tag is classed in two ways. One way is the type of page being shown: | ||
| − | * '''.page-day''': For the Day Page view | + | * '''<tt>.page-day</tt>''': For the Day Page view |
| − | * '''.page-entry''': For the Entry Page view | + | * '''<tt>.page-entry</tt>''': For the Entry Page view |
| − | * '''.page-recent''': For the Recent Page view | + | * '''<tt>.page-recent</tt>''': For the Recent Page view |
| − | * '''.page-month''': For the Month Page view | + | * '''<tt>.page-month</tt>''': For the Month Page view |
| − | * '''.page-archive''': For the Year Page view | + | * '''<tt>.page-archive</tt>''': For the Year Page view |
| − | * '''.page-read''': For the Read Page view | + | * '''<tt>.page-read</tt>''': For the Read Page view |
The other way is by the layout type: | The other way is by the layout type: | ||
| − | * '''.one-column''': for designs that don't use sidebars | + | * '''<tt>.one-column</tt>''': for designs that don't use sidebars |
| − | * '''.two-columns-left''': for two column designs that put the sidebar on the left | + | * '''<tt>.two-columns-left</tt>''': 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 | + | * '''<tt>.two-columns-right</tt>''': 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-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-left''': for three column designs that put both sidebars on the left | ||
Revision as of 01:43, 27 April 2009
Expand: Needs overall description
Contents
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.
- 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: 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
