Difference between revisions of "S2 CSS: High level layout ids and classes"
From Dreamwidth Notes
Foxfirefey (Talk | contribs) (→Body classes) |
Foxfirefey (Talk | contribs) |
||
| Line 1: | Line 1: | ||
| − | 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. | + | 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 == | == Main page sections == | ||
| Line 7: | Line 7: | ||
=== <tt>#canvas</tt> === | === <tt>#canvas</tt> === | ||
| − | * '''Affects:''' The whole page, excluding the nav strip | + | * '''Affects:''' The whole page, excluding the nav strip. The body tag will have <tt>.has-navstrip</tt> or <tt>.no-navstrip</tt> to indicate whether the page is displaying the nav strip. |
| − | * '''Views:''' All | + | * '''Views:''' All. |
* '''Other information:''' Wherever possible, this should be used instead of <tt>body</tt> to do things like changing the font for your whole journal. Contains <tt>#header</tt>, <tt>#content</tt> and <tt>#footer</tt>. | * '''Other information:''' Wherever possible, this should be used instead of <tt>body</tt> to do things like changing the font for your whole journal. Contains <tt>#header</tt>, <tt>#content</tt> and <tt>#footer</tt>. | ||
| − | === <tt>#header</tt> === | + | ==== <tt>#header</tt> ==== |
* '''Affects:''' The page header, containing the title/subtitle of the page. | * '''Affects:''' The page header, containing the title/subtitle of the page. | ||
| Line 17: | Line 17: | ||
* '''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". | ||
| − | === <tt>#content</tt> === | + | The header on each page contains three title header ids: |
| + | |||
| + | * '''<tt>h1#title</tt>''' -- title of the journal | ||
| + | * '''<tt>h2#subtitle</tt>''' -- subtitle of the journal | ||
| + | * '''<tt>h2#pagetitle</tt>''' -- title of the page | ||
| + | |||
| + | ==== <tt>#content</tt> ==== | ||
* '''Affects:''' Contains the <tt>#primary</tt>, <tt>#secondary</tt>, and <tt>#tertiary</tt> divs | * '''Affects:''' Contains the <tt>#primary</tt>, <tt>#secondary</tt>, and <tt>#tertiary</tt> divs | ||
| Line 23: | Line 29: | ||
* '''Other information:''' | * '''Other information:''' | ||
| − | === <tt>#primary</tt> === | + | ===== <tt>#primary</tt> ===== |
* '''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 29: | Line 35: | ||
* '''Other information:''' <tt>#primary</tt>, <tt>#secondary</tt>, and <tt>#tertiary</tt> are layout identifiers. CSS for these areas will generally be focused on size and positioning rather than the formatting of their contents. | * '''Other information:''' <tt>#primary</tt>, <tt>#secondary</tt>, and <tt>#tertiary</tt> are layout identifiers. CSS for these areas will generally be focused on size and positioning rather than the formatting of their contents. | ||
| − | === <tt>#secondary</tt> === | + | ===== <tt>#secondary</tt> ===== |
* '''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 35: | Line 41: | ||
* '''Other information:''' <tt>#primary</tt>, <tt>#secondary</tt>, and <tt>#tertiary</tt> are layout identifiers. CSS for these areas will generally be focused on size and positioning rather than the formatting of their contents. | * '''Other information:''' <tt>#primary</tt>, <tt>#secondary</tt>, and <tt>#tertiary</tt> are layout identifiers. CSS for these areas will generally be focused on size and positioning rather than the formatting of their contents. | ||
| − | === <tt>#tertiary</tt> === | + | ===== <tt>#tertiary</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:''' 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. | ||
| Line 41: | Line 47: | ||
* '''Other information:''' <tt>#primary</tt>, <tt>#secondary</tt>, and <tt>#tertiary</tt> are layout identifiers. CSS for these areas will generally be focused on size and positioning rather than the formatting of their contents. | * '''Other information:''' <tt>#primary</tt>, <tt>#secondary</tt>, and <tt>#tertiary</tt> are layout identifiers. CSS for these areas will generally be focused on size and positioning rather than the formatting of their contents. | ||
| − | === <tt>#footer</tt> === | + | ==== <tt>#footer</tt> ==== |
* '''Affects:''' Footer, at the bottom of the page. | * '''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. | ||
| + | |||
| + | The footer can contain modules. | ||
== Body classes == | == Body classes == | ||
| Line 81: | Line 89: | ||
* <b><tt>.has-navstrip</tt></b>: This page has the navstrip on. | * <b><tt>.has-navstrip</tt></b>: This page has the navstrip on. | ||
* <b><tt>.no-navstrip</tt></b>: This page does not have the navstrip on. | * <b><tt>.no-navstrip</tt></b>: This page does not have the navstrip on. | ||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
[[Category: S2 CSS]] | [[Category: S2 CSS]] | ||
Revision as of 22:04, 31 August 2009
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.
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. 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.
- 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
Layout Type
Another class will indicate what layout type has been set:
- .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
You don't have to design for all of these, but this gives you the capability to.
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.
