Difference between revisions of "S2 CSS: High level layout ids and classes"
From Dreamwidth Notes
(→#canvas) |
Foxfirefey (Talk | contribs) m (→Subscription and Access Type) |
||
| (13 intermediate revisions by 3 users not shown) | |||
| 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 == | ||
| − | The <body> tag is classed in | + | The <body> tag is classed in several ways. |
| + | |||
| + | === Page Type === | ||
| + | |||
| + | The body will have a class indicating what page type you're viewing. | ||
* '''<tt>.page-day</tt>''': For the Day Page view | * '''<tt>.page-day</tt>''': For the Day Page view | ||
| Line 57: | Line 69: | ||
* '''<tt>.page-archive</tt>''': For the Year Page view | * '''<tt>.page-archive</tt>''': For the Year Page view | ||
* '''<tt>.page-read</tt>''': For the Read Page view | * '''<tt>.page-read</tt>''': For the Read Page view | ||
| + | * '''<tt>.page-network</tt>''': For the Network Page view | ||
| + | * '''<tt>.page-tags</tt>''': For the Tags view | ||
| − | + | === Layout Type === | |
| + | |||
| + | Another class will indicate what layout type has been set: | ||
* '''<tt>.one-column</tt>''': for designs that don't use sidebars | * '''<tt>.one-column</tt>''': for designs that don't use sidebars | ||
| + | * '''<tt>.two-columns</tt>''': for any two column design | ||
| + | * '''<tt>.three-columns</tt>''': for any three column design | ||
| + | * '''<tt>.column-left</tt>''': for any design with a sidebar on the left | ||
| + | * '''<tt>.column-right</tt>''': for any design with a sidebar on the right | ||
* '''<tt>.two-columns-left</tt>''': 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 | ||
* '''<tt>.two-columns-right</tt>''': 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 | ||
| Line 67: | Line 87: | ||
* '''<tt>.three-columns-right</tt>''': for three column designs that put both sidebars on the right | * '''<tt>.three-columns-right</tt>''': 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 === | |
| − | * '''<tt> | + | These indicates whether the viewer is logged in. |
| − | * '''<tt> | + | |
| − | * '''<tt> | + | * '''<tt>.logged-in</tt>''' |
| + | * '''<tt>.logged-out</tt>''' | ||
| + | |||
| + | === Subscription and Access Type === | ||
| + | |||
| + | These indicate what the viewer's circle status is in relation to the journal they are viewing. | ||
| + | |||
| + | * '''<tt>.my-journal</tt>''': On the viewer's own journal | ||
| + | * '''<tt>.subscribed</tt>''': For a journal the viewer has subscribed to | ||
| + | * '''<tt>.not-subscribed</tt>''': For a journal the viewer doesn't subscribed to, and logged-out users | ||
| + | * '''<tt>.has-access</tt>''': For a journal the viewer has reading or posting access to | ||
| + | * '''<tt>.no-access</tt>''': 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. | ||
| + | |||
| + | * '''<tt>.is-admin</tt>''': For maintainers | ||
| + | * '''<tt>.is-moderator</tt>''': For moderators (and maintainers since they always have moderation capabilities) | ||
| + | * '''<tt>.is-member</tt>''': For members | ||
| + | * '''<tt>.non-member</tt>''': For non members and logged-out users | ||
| + | |||
| + | === Navstrip === | ||
| + | |||
| + | There is also a class to indicate whether the navigation strip is being displayed or not: | ||
| + | |||
| + | * <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. | ||
[[Category: S2 CSS]] | [[Category: S2 CSS]] | ||
Latest revision as of 04:15, 28 May 2011
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
- .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
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.
