Web Standards at the Open University
Styles and Standards for a unified OU web interface
Please note: This site has been replaced with a newer version. It remains here for historical reference only.
| Name | Notes |
|---|---|
| a#s0 (for s plus any number!) | CSS-powered tabs |
| a.external | For external links. |
| a.first | child of div.paged |
| a.last | child of div.paged |
| a.next | child of div.paged |
| a.parent | Link to parent page |
| a.previous | child of div.paged |
| a.root | child of p.ancestors |
| a.to-top | For links to top of page |
| body.dreamweaver | Dreamweaver template namespace |
| body.drupal | Drupal theme namespace |
| body.mediawiki | MediaWiki theme namespace |
| body.ou | Reserved but provides no function |
| body.smf | SMF theme namespace |
| body.wordpress | Wordpress theme namespace |
| div#ia-nav | For StudentHome, Study at the OU and other "middle bars" (global secondary top bars). |
| div#main-image | For image-based content pages (like flickr) |
| div#ou | The outer container in the core anatomy template. Used as the hook in the "wrapped" layout. |
| div#page | Core container element. |
| div#region0 | Often left unused. Can be used to flag important notices or promotional material. |
| div#region1 | The main content region. |
| div#region2 | Secondary content and local navigation. |
| div#site | Core container element. |
| div#site-body | Core container element. |
| div#site-footer | Core container element. |
| div#site-header | Core container element. |
| div#site-ident | Contains p#site-title and p#site-description. Child of the div#site-header. |
| div.action | Content style. |
| div.activity | Content style. |
| div.appendix | Content style. |
| div.comment | Content style. |
| div.contact | Content style. |
| div.context-nav | Navigation system. |
| div.dialogue | Content style. |
| div.download | Content style. |
| div.entry-content | Child of .hfeed. |
| div.example | Content style. |
| div.go1 | Float left |
| div.go2 | Float right |
| div.info | Content style. |
| div.keypoints | Content style. |
| div.landscape | Photo style |
| div.notes | Content style. |
| div.paged | Navigation system. |
| div.photo | Content style. |
| div.portrait | Photo style. |
| div.promo | Content style. Designed for home and landing pages. |
| div.quote | Content style. |
| div.remember | Content style. |
| div.steps | Content style. |
| div.summary | Content style. |
| div.thumbnails | Designed for pages where photos are the main content. |
| div.tip | Content style. |
| div.warning | Content style. |
| dl#toc | "On this page" links. |
| dl.categories | Navigation system. |
| dl.children | Navigation system. |
| dl.glossary | Navigation system. |
| dl.menu | Navigation system. |
| dl.parent-siblings | Navigation system. |
| dl.promo | Navigation system. |
| dl.related | Navigation system. |
| dl.tags | Navigation system. |
| dl.toc | Navigation system. |
| form.ouice | For surveys, questionnaires, contact forms, administration |
| form.search-form | For search pages and anywhere else that needs a search form. |
| h2.entry-title | Part of .hfeed. |
| input#search-box | Child of form.search-form. |
| input#search-button | Child of form.search-form. |
| li.hentry | Child of .hfeed. |
| ol#comments | Container of l.comment elements. For blogs. |
| ol.code | For code examples. |
| ol.comments | Used in conjunction with ol#comments. Style hooks are applied to the class. |
| ol.hfeed | hAtom microformat used for gallery and search results pages as well as blogs. |
| ol.search-results | |
| p#site-description | Pithy slogan. |
| p#site-title | Where am I? |
| p.ancestors | Navigation system - breadcrumbs. |
| p.caption | To accompany a photo. |
| p.entry-summary | Child of .hfeed |
| p.introduction | Lead into page. |
| p.meta | Data about data (published, author, updated, categories, tags etc). |
| p.source | Source of a quote. Used with quotes. Why not cite? Hmm. |
| span.root | Child of p.ancestors (breadcrumbs) |
| span.seperator | Note the spelling! The bit between the links. Why spelt thusly. Well.. |
| ul.atoz | For A to Z lists. |
| ul.children | Navigation system. |
| ul.sections | Navigation system. |
| ul.siblings | Navigation system. |
| ul.sitemap | Navigation system. |
| ul.utilities | Navigation system. |
| ul.xoxo | Navigation system. |
| ul.zebra | For stripey rows. |