OGPL theme

Purpose

The OGPL is based on the WET theme and is intended for use on OGPL sites.

Benefits

• Top tasks have been tested with users: contact us, search, return to home page, learn about us, stay connected through social media, navigate the site, read the terms and conditions, and toggling to the users official language of choice.
• Conforms to the Standard on Web Accessibility and meets the principles of the Standard on Web Usability
• Conforms to WCAG 2.0 AA
• Responsive design that includes both mobile and desktop views
• Uses HTML5 semantic elements and WAI-ARIA to enhance accessibility
• Groups most of the navigation after the content area
• Validates to HTML5 and is XML conformant

Recommended usage

General instructions

1. Use the \theme-ogpl\*.html files to create your Web pages.
2. Optional: Create and install one or more new CSS files (will be used for custom CSS)
3. Optional: Create link(s) to the new CSS file(s) in between the following comments:

   < !-- CustomScriptsCSSStart -->
   < !-- CustomScriptsCSSEnd -->

4. Correct all *.css, *.js, and *.gif file paths referenced in the installed *.html files
5. Replace the page title (in between <title> and </title>), the site title, and the content title (in between <h1 id="wb-cont"> and </h1>)
6. Correct the metadata values

Content page-specific instructions (cont*.html)

1. Correct the menu bar links or remove the menu bar
2. Correct the mega menu links or remove the mega menus
3. Correct the English/Français link or remove the language selection link
4. Optional: Implement either secondary navigation version 1 (maximum of 3 levels) or secondary navigation version 2 (maximum of 4 levels)
5. Correct the search field or remove the search field
6. Correct the breadcrumb or remove the breadcrumb
7. Correct the site footer links
8. Correct the Date modified/Date de modification or change to Version
9. Optional: Fix the mobile view header navigation bar to the top of the viewport by adding the following to settings.js:

   // Mobile view
   var wet_boew_mobile_view = {
   	header_fixed : true
   };

Welcome page-specific instructions (sp-pe*.html)

1. Correct the English and French language links
2. Optional: Include language selection links for other languages

Server message page-specific instructions (serv*.html)

1. Replace the English and/or French messages.
2. Optional: Include messages for other languages