Queen's University

Faculty and Staff Banner

Utility Bar and Responsive Header

For those groups who continue to develop their websites by means other than WebPublish (Queen's custom designed content management tool), the Marketing & Communications Department provides solutions to facilitate a common web template utility bar/header element featuring: Queen's branding (i.e. wordmark), access to the improved Queen's web search, and a convenient Log In list.

If your site uses responsive web design, or you would simply like your utility bar to appear the same as the Queen's header used on the main site and new WebPublish sites, please consider using the responsive Queen's header. For all other sites, see the Utility Bar described below.

Please note that as we continue to improve and update the queensu.ca site, your site will reflect any changes we make to the utility bar/header, as long as you include one of the PHP or Javascript snippets rather than a copy of our HTML code.

If you have any questions, please contact the Marketing and Communications Department.

Utility Bar

Live examples:

Step 1

Choose a colour scheme appropriate for your site. The default colour is blue, however you can choose grey or red by simply modifying the queens_utilitybar.css stylesheet name accordingly in Step 2. For example, to use the grey utility bar, the utility bar CSS include would be:

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

Step 2

Link to the external stylesheet, and javascript files (for IE support) within the <head> </head> tags.  Note that utilitybar.js requires jQuery, which is included in queens_common.js - so if your site already includes jQuery, there's no need for you to include the queens_common.js script.

<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]-->

Step 3

(Option A) PHP Include for PHP based sites

Place the following PHP snippet into your existing webpage, immediately after the <body> element. Note this is only available for PHP based web sites.

<?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 sites

This option is available for any web sites, those using PHP or any other language including plain HTML. Insert this code right after the <body> tag.

<script src="http://www.queensu.ca/style/javascript/queensDefault/utilitybar.js.php" type="text/javascript"></script>

Responsive Header

Live examples:

Step 1

If your site is responsive, it probably already includes a Viewport Meta tag, however it's a good idea to ensure it does. If your site is not responsive, but you would still like the header to respond, then include a Viewport meta tag like this one within the <head> </head> tags:

<meta name="viewport" content="width=device-width" />

Step 2

Choose a colour scheme appropriate for your site. The default colour is white, however you can choose blue, grey or red by simply modifying the queensheader.css stylesheet name accordingly in Step 2. For example, to use the blue header, the header CSS include would be:

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

Step 3

Link to the external stylesheet, and javascript files (for IE support) within the <head> </head> tags.  Note that queensheader.js requires jQuery, which is included in queens_common.js - so if your site already includes jQuery, there's no need for you to include the queens_common.js script.

<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]-->

Step 4

(Option A) PHP Include for PHP based sites

Place the following PHP snippet into your existing webpage, immediately after the <body> element. Note this is only available for PHP based web sites.

<?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 sites

This option is available for any web sites, those using PHP or any other language including plain HTML. Insert this code right after the <body> tag.

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