Internet Template Package 2006


General Template Information

The 2006 internet template package was released by the Online Channel Office (OCO) July 2006. The versions provided below have been altered for use in the Ministry of Forests and Range and are basic HTML for use with any authoring software. These templates are to be used for our public web site only.

Templates (customized for Ministry of Forests and Range)

Right click the links below and select "Save Target As" to download a copy of these templates to your office web folder.

Primary Web page template

Alternate Web page templates

Government policy information contained on this site has been taken from the documentation provided by the OCO and is not the official copy. The document provided by the OCO also contains information for customizing the templates to individual ministry use, the templates above have already been customized.

Note, the Ministry of Forests and Range web server does not have the same structure as the main government site, as such, references to paths and URLs may not be the same as specified in the documentation provided by the OCO.

The OCO has also updated the Internet standards and guidelines.

Top

Tips on Using the Templates

HTML Head / Meta Data / CSS & JS Files

Certain parts of the code in these template are crucial and should not be altered. Web custodians that edit HTML code directly will need to be especially careful not to alter certain aspects of the templates. The very first line in the HTML for DOCTYPE needs to be intact including the URL to the DTD (Document Type Definitions) file as removing this will completely alter the method the browser renders the page.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

The default TITLE tag contains the following:

Ministry of Forests and Range - Province of British Columbia

You should add the title of your page or site at the beginning of this text separated by a dash.

Meta tags for KEYWORD and DESCRIPTION are included but are blank. Key index pages (home pages) should have values added here as this will greatly improve your page ranking results in the government search engine as well as other external search engines.

The link to the style sheet is critical in maintaining the look of the page and can not be removed or altered.

<link rel="stylesheet" href="http://www.for.gov.bc.ca/mof/portal/css/style.css" type="text/css">

Web custodians should not take a copy of this style sheet to store on their individual sites as this defeats the purpose of a central style sheet. Additional styles can be added to the main style sheet by contacting alasdair.ring@gov.bc.ca or a second style sheet can be created locally as more than one style sheet can be linked to.

The link to the two JS files are required on all pages. The MENU.JS file contains cookie information that is required by the text sizer so it is required on all pages, not just ones using the expanding menu system. As such, the BODY tag requires the two JavaScript event calls.

<body onUnload="javascript:closeWindow();" onLoad="javascript:ChangeFontSize(0)">

Page Elements

DIV tags are used by the style sheet to apply certain styles to different sections of the page so should not be altered. Only when removing entire optional page elements can they be removed.

The “breadcrumb trail” at the top of the page below the search box is a bulleted list that is set by the style sheet to display inline (horizontally) and to use the “double chevron” graphic as the bullet. To add another level to the breadcrumb trail simply place your cursor at the end of the text and click Enter to enter a carriage return and create a new breadcrumb bullet.

Other bulleted lists are the same in that the red arrow bullets in the navigation section and the yellow boxed arrow bullets in the main content section are assigned automatically; you do not have to manually link to these image files. The yellow boxed arrow bullets in the content section are intended as a page contents to link to “bookmarks” within the same page.

The grey navigation section for “Key Indexes” and “Government” are not mandatory and can be removed. Consider keeping them on your office homepage but when on sub-pages requiring detailed navigation they could be removed. The title “Key Indexes” should not be used for other navigational systems but should be changed to the standard “Resources” or some other appropriate title e.g. “Programs” or “Popular Topics”.

The Ministry of Forests and Range banner graphic is not mandatory but new graphics can not be created without the approval of the Public Affairs Bureau. It is best left on home pages but can be removed on detailed content pages.

Top

Cascading Style Sheets

Cascading style sheets (CSS) are used in these templates to define colours, fonts and general styles, page layout is done using tables. Appendix B in the documentation provided by the OCO explains the various styles and should be reviewed. Basically different sections of the page are assigned a class by way of a <DIV> tag. These DIV tags are very important to the display of the page and should not be altered. For example the "Printer Version" option mandatory on all pages uses a JavaScript function to open the same page in a new browser window in a format better for printing. It uses the <DIV> tags to determine what sections of the page to display and what sections of the page to turn off.

Top

Mandatory Page Elements

Banner Graphic / Program or Office Name

It is preferable to have a standard Ministry banner and the program or office name below as text, Information Management Group will not be creating custom banner images and any custom banners need the approval of the Public Affairs Bureau.

  • Mandatory for the top level/entry point of the site, optional on pages lower down on the site. The decision-maker on use of the banner is the ministry Communications Director or PAB Online Communications
  • May include PAB-approved logos as well as the site name
  • Placement is under printer version/breadcrumb line
  • Banner is spread across the entire page for 2 column templates, and is confined to the main/centre section for the 3 column template

B.C. Government Logo

  • Mandatory on all pages
  • Link to B.C. Home: http://www.gov.bc.ca
  • ALT text Mandatory: B.C. Government
  • Logo vertical and horizontal orientation, size, template placement and surrounding white space must not be changed Please review the governing document, B.C. Government’s BC ID Standards for full details of the use of this Logo.

Contact Us

Help

Vertical Separator Header Lines

  • Vertical line ‘A’: Mandatory between logo and remainder of header
  • Vertical line ‘B’: Mandatory between search and contact us/help sections
  • CSS class: darkGreyBg

Printer Version

  • Mandatory: located at the right side of breadcrumb line
  • The printer version invokes a JavaScript within the utility_inc.js

Left Navigation Menu

  • Mandatory on all pages - the bottom must have a rounded left corner. The appropriately coloured bottom strip - blue, white or grey - will be applied by JavaScript depending on the colour of the bottom box. The default is grey if JavaScript is not enabled.
  • CSS class: leftTop

B.C. Home Link

  • B.C. Government home link: http://www.gov.bc.ca
  • Placement top left navigation area
  • White ¾ underscore separating B.C. Home from Ministry or Organization Home Link
  • CSS class: leftTop
    • Colours: blue background with dark lettering
    • Hyperlinks: no underlines denoting hyperlink, rollover action - white

This Site’ Home

  • Mandatory on all pages
  • Link name = name of site
  • Placement is top left navigation area below Ministry name (or if Ministry name is not used, below B.C. Home)
  • If this is the lowermost block on left nav (no white or grey section), the blue rounded bottom left corner will be displayed
  • CSS class: leftTop
    • Colours: blue background with dark lettering (except on the site home page)
    • Hyperlinks: no underlines denoting hyperlink, rollover action - white (except on the site home page) Note: The default text colour is white (see Appendix C) because the Site Name is not an active link when you are on the home or index page for the current site
Top

Optional Page Elements

Search Section

  • Optional. If the search function is not used, the space will be retained but display blank (placeholder)
  • If Search is used, the placement is in the centre of the header row
  • Default Search: all B.C. Government websites, as indicated by the text “All B.C. Government. “ The wording of this radio button is mandatory, and is not to be changed.
  • Contextual Search:
    • Use of contextual search is optional for ‘this site’ (e.g. Development Services Program)
    • Instructions for completing this are available in Appendix F in the documentation provided by the OCO.
    • If contextual search is used, both radio buttons (All B.C. Government and contextual button) are required to display in the order as per the example above - the intent is to ‘balance’ both the radio buttons/ titles used in this section in the space available above the search text box
    • The contextual search label should be a maximum of 30 characters, where exceptions apply the text must not wrap on more than two lines and must not start higher then the radio button.
    • If contextual search is not used, do not use any radio buttons or labels
  • ‘Go’ icon: mandatory, activates the search query
  • ALT text: “Go”

Main Index

Breadcrumb

  • Optional: if not used, the space will be retained but display blank (placeholder)
  • If Used: Mandatory placement directly below the header; maximum two lines, will be centred vertically
  • Breadcrumb trail must display actual site structure, not the path followed by the user to get to the page. Ignore intermediary elements such as “Ministry and Organizations” when creating the breadcrumbs. For further information refer to the Standards and Guidelines document and the “B.C. Government Website Best Practices”
  • The first element in the breadcrumb should be “B.C. home”
  • CSS class: breadcrumb

Ministry or Organization Home

  • Optional - if used: Ministry name only e.g. Forests and Range (no ‘Ministry of’)
  • Placement is top left navigation area below B.C. Home
  • Do not link to the portal URL, use the appropriate redirected link for the B.C. Home (www.gov.bc.ca/for)
  • CSS class: leftTop
    • Colours: Blue background with dark lettering
    • Hyperlinks: no underlines denoting hyperlink, rollover action - white

Site Details Section

  • Optional - uses: current site details, steps in a process, expand/collapse menu
  • Placement is top left navigation area below ’This Site’ Home Link
  • If this is the lowermost block on left nav (no grey section), the white rounded bottom left corner will be displayed
  • CSS class: nav_white
    • Colours: white background with dark grey text
    • Bullets: red arrows (class: red_arrow)
    • Hyperlinks: underlined, blue; rollover action - light blue; visited state - maroon

Resources or Related Links Section

  • Optional - uses: related sites, further site details, hyperlinks to relevant information
  • Placement is top left navigation area below ’This Site’ Home Link or below White section if used
  • If this is the lowermost block on left nav, the grey rounded bottom left corner will be displayed
  • Lowermost block on left nav must have rounded bottom left corner
  • Do not specify borders in or around this navigation menu
  • CSS class: nav_grey
    • Block Format - Use Type 1 block first, then all Type 1’s thereafter OR Use Type 1 first, then all Type 2’s thereafter, see documentation provided by the OCO
    • Horizontal separator lines can be used between sections to organize the links
    • Colours: grey background with dark grey text
    • Bullets: red arrows
    • Hyperlinks: underlined, blue; rollover action - light blue; visited state - maroon

Right Navigation (3 column template only)

Sub-category section - ‘Open Block’ Format

  • Optional - uses: steps in a process, required information, hints and tips, ministry message
  • Placement is in the 3rd column (right) navigation area below ‘Printer Version’ icon
  • Use of other specific images or logos must be pre-approved through PAB
  • CSS class: right_col
    • Colours: white background with red text for title, grey text for content
    • Bullets: black chevrons (class: right_sub_cat)
    • Hyperlinks: underline, blue; rollover action - light blue; visited state - maroon and underlined

Feature Table Section - ‘Closed’ Table Format

  • Optional - uses: steps in a process, required information, expand/collapse menu, hints and tips, ministry message
  • Placement is in the 3rd column (right) navigation area below ‘Printer Version’ icon
  • Rounded left and right bottom corners
  • Use of other specific images or logos must be pre-approved through PAB
  • CSS class: right_col
    • Colours: grey background with blue text for title, dark grey text for content
    • Bullets: black chevrons (class: feature)
    • Hyperlinks: underline, blue; rollover action - light blue; visited state - maroon and underlined