Skip to navigation
Home ยป Phased header implementation

Instructions for implementing the phased header

Posted December 6th, 2010 by Anonymous

The “phased header” will replace the header section on your website with something that looks like this:

Screenshot of Communications & Public Affairs header

To do this, you will need to make a few small modifications to your Dreamweaver template. Instructions for widening the width, adopting the new colours, secure sites, and for sites using Server Side Includes are below.

Instructions for Dreamweaver templates

  1. Generate your new website title from the website title generator page. WatIAM credentials are required to view and download generated titles.
  2. If you normally need to synchronize your site before updating the template, do so now.
  3. Go into code view by using the “Code” button on the toolbar or going to View > Code.
  4. Look for the following line:
    @import url("http://www.uwaterloo.ca/css/UWblank.css");
    If you are using a later version of the template you may see UWblank_v1p1.css or something similar instead.
  5.  Immediately after that line, paste the following:
    @import url("http://www.uwaterloo.ca/css/common_header.css");

    Academic departments with a two-level wordmark (Waterloo | Your Faculty with your department name below) should use the following instead:
    @import url("http://www.uwaterloo.ca/css/common_header_depts.css");
  6. A few lines further down, find this line:
    @import url("http://www.uwaterloo.ca/css/UWhome.css");
  7. Replace this line with:
    @import url("http://www.uwaterloo.ca/css/UWhome_v4p1.css");
  8. Next, scroll down until you see this:
    <!-- header -->
  9. Select all of the code between
    <!-- header -->
    and
    <!-- primary nav, add or delete links as you desire -->
  10. Press delete to remove this section of code
  11. Copy the following code:
    <div id="header">
       <div id="clfbar">
          <div id="uw_wordmark">
               <a href="http://www.uwaterloo.ca">
      <img src="http://uwaterloo.ca/images/template/uw_wordmark.gif" alt="Link to the University of Waterloo home page" height="40" width="120" />
               </a>
          </div><!-- end #uw_wordmark -->
          <div id="searchbox">
             <form action="http://search.uwaterloo.ca" method="get" id="search" title="search" dir="ltr" lang="en" xml:lang="en">
             <fieldset>
              <label for="searchterm" class="search_note">Search:</label>
             <input name="searchterm" type="text" id="searchterm" class="google" accesskey="s" tabindex="2" size="30" />
                <input type="image" id="submit" src="http://uwaterloo.ca/images/template/search_arrow.gif" class="google" tabindex="3" value="Search" alt="Search" />
              <input name="searchtype" type="hidden" value="google-uwdir-keyword" />
              </fieldset>
           </form>
          </div><!-- end #searchbox -->

    </div><!-- end #clfbar -->

       <div id="wordmark">
          <h1><a href="http://yoursite.uwaterloo.ca">Your Wordmark Here</a></h1>
       </div><!-- end #wordmark -->

    </div><!-- end #header -->
    <span class="none"><a href="#content">Skip to the content of the web site.</a></span>
  12. Paste this code into the space where you removed the code in the previous step, right after the <body> tag.
  13. Switch back to design view. If you see a black bar with the Waterloo wordmark and search box at the top of your page, you have completed the previous steps correctly.
  14. Under the black bar you’ll see “Your Wordmark here” in large text. Remove this text and insert your wordmark in the same place. When it asks for “Image Tag Accessibility Attributes”, enter your unit/department name in the “Alternate Text” field
  15. With the image selected, go to the link field in the Dreamweaver tools panel and add a link to the home page of your site (e.g. http://yoursite.uwaterloo.ca)
  16. Save the template. Dreamweaver will ask if you want to update templates across your site. Choose "update".
  17. Synchronize your site again to copy the website files up to the server.
  18. Check your site to ensure the new template has been applied to all pages. If you find that some pages do not have the new template, open the affected pages in Dreamweaver and choose Modify -> Templates -> Apply template to page. Follow the instructions to apply the new template to your pages.

Widening the width of the template (optional)

As part of the phasing protocol, you are encouraged to adapt the CLF to expand the width. To do this, add a new stylesheet after the new common_header.css:

  1. In code view, find the following line:
    @import url("http://www.uwaterloo.ca/css/common_header.css");
  2. After that paste the following:
    @import url("http://www.uwaterloo.ca/css/UWwider.css");
  3. Find this line:
    @import url("http://www.uwaterloo.ca/css/UWhome_v4.css");
  4. Replace this line with:
    @import url("http://www.uwaterloo.ca/css/UWhome_v4p1.css");

Once this is done the banner image will also need to be resized. The new banner size is 789px x 165px.

Applying the new colour sets (optional)

As part of the phasing protocol, you are also encouraged to adopt the new colour sets. Stylesheets have been created to apply these colour treatments to the standard CLF template. To do this, add a new stylesheet after the new common_header.css:

  1. In code view, find:
    @import url("../css/custom.css");
    or
    <!-- @import url("../css/custom.css"); --><!-- you need to replace this with your own stylesheet to customize colours -->
  2. After that paste a link to the stylesheet for your faculty, or the institutional colours for administrative units:
    • Applied Health Sciences
      @import url("http://www.uwaterloo.ca/css/UWfaculties-ahs.css");  
    • Arts
      @import url("http://www.uwaterloo.ca/css/UWfaculties-arts.css");
    • Engineering
      @import url("http://www.uwaterloo.ca/css/UWfaculties-eng.css");
    • Environment
      @import url("http://www.uwaterloo.ca/css/UWfaculties-env.css");
    • Mathematics
      @import url("http://www.uwaterloo.ca/css/UWfaculties-math.css");
    • Science
      @import url("http://www.uwaterloo.ca/css/UWfaculties-sci.css");
    • Institutional colours (all other units)
      @import url("http://www.uwaterloo.ca/css/UWdefault-colours.css");

Instructions for secure sites (https)

If your site needs to be accessed over a secure connection, you simply need to change the paths to the stylesheets and images located on the central server. Change these paths from:

http://www.uwaterloo.ca/

to

https://info.uwaterloo.ca/www/

If you are still getting errors check to make sure all stylesheet links and all image links pointing to uwaterloo.ca are changed to info.uwaterloo.ca/www.

Instructions for Server Side Includes

If you do not know what "Server Side Includes" are, you can ignore this section.

Specific instructions for updating a site using Server Side Includes will vary depending on your specific set up. Two basic changes are needed:

New header code: http://redesign.uwaterloo.ca/headers/header_new.txt

New stylesheet links

  • Common header css: http://www.uwaterloo.ca/css/common_header.css
  • Wider width: http://www.uwaterloo.ca/css/UWwider.css
  • New colours:
    • Applied Health Sciences: http://www.uwaterloo.ca/css/UWfaculties-ahs.css  
    • Arts: http://www.uwaterloo.ca/css/UWfaculties-arts.css
    • Engineering: http://www.uwaterloo.ca/css/UWfaculties-eng.css
    • Environment: http://www.uwaterloo.ca/css/UWfaculties-env.css
    • Mathematics: http://www.uwaterloo.ca/css/UWfaculties-math.css
    • Science: http://www.uwaterloo.ca/css/UWfaculties-sci.css
    • Institutional colours (all other units): http://www.uwaterloo.ca/css/UWdefault-colours.css

Wordmarks should have an image map applied to point WATERLOO to the Waterloo home page. At the department level, the faculty name in the wordmark should point to the faculty home page.

UW Website Redesign on Facebook

All blog posts

 Redesign project