Queen's University

Queen's University Queen's University

Header-MainMenu-FACULTY-STAFF

[FACULTY AND STAFF]
[FACULTY AND STAFF]

Faculty & Staff

Queen’s Utility Bar

The Queen's utility bar is a common feature of many Queen's websites. It includes Queen's "webmark," which links back to Queen’s main website (queensu.ca), Queen’s search function (searching Queen's web pags and the people directory), and login access to widely-used Queen’s websites and portals.

The queensu.ca main website, the Queen’s Gazette, and The Isabel website, for example, all use either the current or legacy version of the utility bar. The utility bar is also standard feature of sites built using Queen's content management system, WebPublish (for example: the Office of the Principal website).

[Queen's digital wordmark in Utility Bar]
Standard utility bar 2017 (full width view: desktop or tablet at landscape orientation)
[Utility Bar - mobile view]
Standard utility bar 2017 (mobile view, portrait orientation)

The utility bar is available to developers of other Queen’s sites as a way to fulfill the requirements of Queen’s Visual Identity, and at the same time supports a consistent user experience.

University Marketing has created common templates for the utility bar, with code that can be embedded into any website. Several versions of the code are available for different programming languages, all using Queen’s official colours.

The utility bar has been designed and tested to comply with AODA standards for accessibility and is responsive (optimized for viewing on multiple devices and screens).

How to include the utility bar (JavaScript required)

The following information is intended for owners, administrators and third-party developers of Queen’s websites who are not using Queen’s WebPublish CMS. Readers should have some knowledge of web coding languages and the ability to make changes to the <head> element of web templates.

Please note that as we continue to improve our websites, any changes to the utility bar will be reflected on your site immediately, as long as you are using one of our code snippets. We do not recommend creating a new version of the code to host on your own site, as it can easily become out of date without your knowledge. If you have any questions, please contact University Marketing.

To include only the webmark and not the search or sign in elements, please refer to the Queen’s Logo and Wordmarks page of Queen’s Visual Identity website.

See working examples:

Step 1: Add viewport meta tag

If your site is responsive, it probably already includes a viewport meta tag; however, it's a good idea to ensure that it does. If your site is not responsive, but you would still like the utility bar to respond, then include a viewport meta tag within the <head> element, like this:

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

Step 2: Link to external files

Link to the external stylesheet and JavaScript files by inserting the following code within the <head> element:

<link rel="stylesheet" media="all" type="text/css" href="https://www.queensu.ca/style/css/queensweb/queenswebheader.css" />
<!--[if lt IE 9]> <link rel="stylesheet" media="all" type="text/css" href="https://www.queensu.ca/style/css/queensweb/queenswebheader_ie.css" /> <![endif]-->
<script type="text/javascript" src="https://www.queensu.ca/style/javascript/queensweb/queensweb_common.js">
<!--[if lt IE 9]> <script type="text/javascript" src="https://www.queensu.ca/style/javascript/queensweb/queensheader.js"></script> <![endif]-->
<script type="text/javascript" src="https://www.queensu.ca/style/javascript/queensweb/queenswebheader.js"></script>

Note: jQuery is included in queensweb_common.js. If your site already uses jQuery, there's no need to include this script.

Step 3: Choose a webmark colour

Choose a webmark colour that is appropriate for your site. The default colour is red; or you can choose blue, grey or black by modifying the name of the main CSS file, queenswebheader.css. For example, to use the blue webmark, change the stylesheet reference to:

<link rel="stylesheet" media="all" type="text/css" href="https://www.queensu.ca/style/css/queensweb/queenswebheader_blue.css" />

Step 4: Include files

Option A: PHP include (for PHP websites only)

Insert this PHP code into your page or template, immediately after the opening <body> tag:

<?php print file_get_contents('https://www.queensu.ca/resources/php/queenswebheader.php');
?>

Option B: JavaScript include (for any website)

This option is available for any website, including those using PHP or any other language.

Insert this code into your page or template, immediately after the opening <body> tag:

<script type="text/javascript" src="https://www.queensu.ca/style/javascript/queensweb/queenswebheader.js.php"></script>

 

Instructions for the legacy version of the utility bar  (JavaScript not required)

There are two options available, depending on which language you are using for your site:

  • Option A: PHP include – for PHP-based websites only
  • Option B: JavaScript include – for any website (including those using PHP)

See working examples:

Step 1: Add viewport meta tag

If your site is responsive, it probably already includes a viewport meta tag; however, it's a good idea to ensure that it does. If your site is not responsive, but you would still like the utility bar to respond, then include a viewport meta tag within the <head> element, like this:

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

Step 2: Link to external files

Link to the external stylesheet and JavaScript files (for IE support), by inserting the following code within the <head> element:

<link rel="stylesheet" media="all" type="text/css" href="https://www.queensu.ca/style/css/queensweb/queensheader.css" />
<!--[if lt IE 9]> <link rel="stylesheet" media="all" type="text/css" href="https://www.queensu.ca/style/css/queensweb/queensheader_ie.css" /> <![endif]-->
<!--[if lte IE 9]>
<script type="text/javascript" src="https://www.queensu.ca/style/javascript/queensDefault/queens_common.js"></script>
<script type="text/javascript" src="https://www.queensu.ca/style/javascript/queensweb/queensheader.js"></script>
<![endif]-->

Note: jQuery is included in queens_common.js. If your site already uses jQuery, there's no need to include this script.

Step 3: Choose a colour

Choose a colour scheme that is appropriate for your site. The default colour is white; or you can choose blue, grey or red by modifying the name of the CSS file, queensheader.css. For example, to use the blue version, change the stylesheet reference to:

<link rel="stylesheet" media="all" type="text/css" href="https://www.queensu.ca/style/css/queensweb/queensheader_blue.css" />

Colour options

White/default: queensheader.css
[Utility Bar - responsive version, white]

Blue: queensheader_blue.css
[Utility Bar - responsive version, blue]

Grey: queensheader_grey.css
[Utility Bar - responsive version, grey]

Red: queensheader_red.css
[Utility Bar - responsive version, red]

Step 4: Include files

Option A: PHP include (for PHP websites only)

Insert this PHP code into your page or template, immediately after the opening <body> tag:

<?php print file_get_contents('https://www.queensu.ca/resources/php/queensheader.php');
?>

Option B: JavaScript include (for any website)

This option is available for any website, including those using PHP or any other language.

Insert this code into your page or template, immediately after the opening <body> tag:

<script type="text/javascript" src="https://www.queensu.ca/style/javascript/queensweb/queensheader.js.php"></script>