Queen's University

Queen's University Queen's University

Header-MainMenu-FACULTY-STAFF

[FACULTY AND STAFF]
[FACULTY AND STAFF]

Faculty & Staff

Utility Bar

The Utility Bar is a standard feature on websites using Queen's content management system, WebPublish (for example, the Office of the Principal website). Similar versions exist on other websites created by University Marketing, such as Queen’s Gazette and The Isabel.

It contains the Queen’s wordmark, which links back to Queen’s main website, as well as Queen’s Search and login access to widely-used Queen’s websites and portals.

[Queen's digital wordmark in Utility Bar]
Standard Utility Bar

If your website is built outside of the WebPublish environment, the Utility Bar should be incorporated into the interface so that it adequately aligns with Queen’s Visual Identity and maintains a consistent user experience within Queen’s larger web presence.

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 is also designed and tested to comply with AODA standards for accessibility and a responsive version is available that is optimized for viewing on mobile devices and smaller screens.

The following information is intended for owners, administrators and third-party developers of Queen’s websites who are not using WebPublish. 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.


Responsive Version

If your site uses responsive design, or you would simply like your Utility Bar to appear the same as other Queen's websites, then this is the recommended version to use.

[Utility Bar - responsive version, full width]
Full width view (desktop or tablet at landscape orientation)
[Utility Bar - responsive version, tablet size]
Tablet view (portrait orientation)
[Utility Bar - responsive version, mobile view]
Mobile view (portrait orientation)

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)

Instructions

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="screen" type="text/css" href="http://www.queensu.ca/style/css/queensweb/queensheader.css" />
<!--[if lt IE 9]> <link rel="stylesheet" media="screen" type="text/css" href="http://www.queensu.ca/style/css/queensweb/queensheader_ie.css" /> <![endif]-->
<!--[if lte IE 9]>
<script src="http://www.queensu.ca/style/javascript/queensDefault/queens_common.js" type="text/javascript"></script>
<script src="http://www.queensu.ca/style/javascript/queensweb/queensheader.js" type="text/javascript"></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="screen" type="text/css" href="http://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('http://www.queensu.ca/resources/php/queensheader.php');
?>

Or if you would prefer to use cURL:

<?php
$curl_handle=curl_init();
curl_setopt($curl_handle,CURLOPT_URL, 'http://www.queensu.ca/resources/php/queensheader.php');
curl_setopt($curl_handle,CURLOPT_CONNECTTIMEOUT, 4);
curl_exec($curl_handle);
curl_close($curl_handle);
?>

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 src="http://www.queensu.ca/style/javascript/queensweb/queensheader.js.php" type="text/javascript"></script>


Legacy Version

This version is available for legacy purposes. It has the same look and feel of older Queen’s websites, but is not responsive.

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)

Instructions

Step 1: 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="screen" type="text/css" href="http://www.queensu.ca/style/css/queensDefault/queens_utilitybar.css" />
<!--[if lt IE 9]> <link rel="stylesheet" media="screen" type="text/css" href="http://www.queensu.ca/style/css/queensDefault/queens_utilitybar_ie.css" /> <![endif]-->
<!--[if lte IE 9]>
<script src="http://www.queensu.ca/style/javascript/queensDefault/queens_common.js" type="text/javascript"></script>
<script src="http://www.queensu.ca/style/javascript/queensDefault/utilitybar.js" type="text/javascript"></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 2: Choose a colour

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

<link rel="stylesheet" media="screen" type="text/css" href="http://www.queensu.ca/style/css/queensDefault/queens_utilitybar_grey.css" />

Colour options

Blue/default: queens_utilitybar.css
[Utility Bar - legacy version, blue]

Grey: queens_utilitybar_grey.css
[Utility Bar - legacy version, grey]

Red: queens_utilitybar_red.css
[Utility Bar - legacy version, red]

Step 3: 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('http://www.queensu.ca/resources/php/utilitybar.php');
?>

Or if you would prefer to use cURL:

<?php
$curl_handle=curl_init();
curl_setopt($curl_handle,CURLOPT_URL, 'http://www.queensu.ca/resources/php/utilitybar.php');
curl_setopt($curl_handle,CURLOPT_CONNECTTIMEOUT, 4);
curl_exec($curl_handle);
curl_close($curl_handle);
?>

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 src="http://www.queensu.ca/style/javascript/queensDefault/utilitybar.js.php" type="text/javascript"></script>