Difference between revisions of "S2 CSS: High level layout ids and classes"
From Dreamwidth Notes
Foxfirefey (Talk | contribs) m (moved S2 CSS: High level layout classes to S2 CSS: High level layout ids and classes: Nothing here is classes!) |
Foxfirefey (Talk | contribs) |
||
| Line 1: | Line 1: | ||
{{Expand|text=Needs overall description}} | {{Expand|text=Needs overall description}} | ||
| − | == #canvas == | + | == Main page sections == |
| + | |||
| + | All of the below IDs are attached to <div>s and have <tt>div.inner</tt>s nested inside of them. | ||
| + | |||
| + | === #canvas === | ||
* '''Affects:''' The whole page, excluding the nav strip | * '''Affects:''' The whole page, excluding the nav strip | ||
* '''Views:''' All | * '''Views:''' All | ||
| − | == #header == | + | === #header === |
* '''Affects:''' The page header, containing the title/subtitle of the page. | * '''Affects:''' The page header, containing the title/subtitle of the page. | ||
| Line 12: | Line 16: | ||
* '''Other information:''' This would usually contain an h1 and h2 saying something like "Your Name / Recent Entries". | * '''Other information:''' This would usually contain an h1 and h2 saying something like "Your Name / Recent Entries". | ||
| − | == #primary == | + | === #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) | * '''Affects:''' Main content area (user entries on Recent, other users' entries on Read, calendar on Calendar) | ||
| Line 18: | Line 28: | ||
* '''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. | * '''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 == | + | === #secondary === |
* '''Affects:''' A sidebar or other non-primary section of the page, usually used to for modules such as navigation, links, calendar, tags etc | * '''Affects:''' A sidebar or other non-primary section of the page, usually used to for modules such as navigation, links, calendar, tags etc | ||
| Line 24: | Line 34: | ||
* '''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. | * '''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 == | + | === #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. | * '''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 | * '''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. | * '''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:''' 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 <i>class</i> that's used inside entries, but this is the footer at the bottom of the page. | ||
| + | |||
| + | == Body classes == | ||
| + | |||
| + | The bodies of pages are classed, and these include: | ||
| + | |||
| + | * '''.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 | ||
| + | |||
| + | == Header classes == | ||
| + | |||
| + | 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 | ||
[[Category: S2 CSS]] | [[Category: S2 CSS]] | ||
Revision as of 08:26, 26 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 bodies of pages are classed, and these include:
- .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
Header classes
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
