University of Vermont

UVM Self-help Web Guide

Non-Responsive Banners

Important note: The following documentation refers to non-responsive, fixed-width templates. See our current banner documentation for information on responsive banners.

graphic slice of website that shows homepage banner.

Creating a homepage banner

Homepage banners are a feature that became available after the 2010 redesign whereby we offered downloadable HTML templates. A mini-redesign of your site will be necessary if you plan to adopt one of these templates and employ a homepage banner. View the templates.

Creating a secondary masthead (or subbanner)

You may consider the text banner/secondary masthead option. A text banner appears below the navigation bar above your content area and appears in that same spot on every page of your site. To apply a text banner to your site, you must add the following call to your zero line of your defaultmenu.html or your configuration file replacing the "My Department Title" with your own custom banner title: banner=My Department Title

In the zero line, you should have something like this: email=john.doe@uvm.edu,style=lime,banner=Linguistics Department

graphic slice of website that shows what happens when you add your name in the defaultmenu or the magicoptions.

Creating a secondary navigation (template_global_navigation.html)

Some units or departments have extraordinary navigational needs. In this case, you can add an additional horizontal navigation bar below the primary UVM navigational bar by creating a file called template_global_navigation.html. This file should contain html, by default, and it appears below any custom banners but above the content area.

graphic slice of website that shows what a template_global_navigation.html area looks like.

Creating a custom banner (defaultbanner.html)

To create a custom banner in HTML that will appear below the top banner, above the content area and to the right of the main menu area, create a file called: defaultbanner.html

How is this different from the above mentioned text banner?

graphic slice of website that shows what a defautlbanner.html area looks like.

The text banner is for text/html only, while the custom banner (defaultbanner.html) can be a variety of other formats. Typically, if you use a graphic for your secondary banner, this is the feature to employ.

This feature can also be applied on a page-level basis (only appearing on a single page). To use a custom banner on a single page, append the name of the page for which you wish the file to appear onto the banner file name preceded by an underscore, example: defaultbanner-mypage.html

Creating a rotating top banner

Often, departments will ask that the photo and text in their homepage banner rotate each time the page is loaded. This makes the most sense when the department has an abundance of high quality photos (see the free image library supplied by the UVM Web Team) and when they have a need to publicize fresh information on a regular basis (department news, research updates, dates and deadlines, events, etc.). Check out the banner in this example.

Choose appropriate images and text

Create a set of images and text that are consistent with one another. The images should all have the same dimensions and the text should be about the same length.

Insert code into your homepagebanner.html file

In the homepagebanner.html file insert the following code in the top of the file and then change the text that appears in the paragraph tags and the image src information to match your own.

 
  
 <div id="rotating_banner1" style="display: none;">
 <img class="uvmbanner" 
 src="/webguide/images/template_images/580-200-photos/davis6.jpg" 
 width="635" height="200" alt="" />
 <h4 class="uvmbanner">Call-out box 1</h4>
 <p class="uvmbanner">Replace this short paragraph.  
 This is a <a href="">link</a> to more info.</p>
 </div>
 
 <div id="rotating_banner2" style="display: none;">
 <img class="uvmbanner" 
 src="/webguide/images/template_images/580-200-photos/billings1.jpg" 
 width="635" height="200" alt="" />
 <h4 class="uvmbanner">Call-out box 2</h4>
 <p class="uvmbanner">Replace this short paragraph.  
 This is a <a href="">link</a> to more info.</p>
 </div>
 
 <div id="rotating_banner3" style="display: none;">
 <img class="uvmbanner" 
 src="/webguide/images/template_images/580-200-photos/music1.jpg" 
 width="635" height="200" alt="" />
 <h4 class="uvmbanner">Call-out box 3</h4>
 <p class="uvmbanner">Replace this short paragraph.  
 This is a <a href="">link</a> to more info.</p>
 </div>
 
 <div id="rotating_banner4" style="display: none;">
 <img class="uvmbanner" 
 src="/webguide/images/template_images/580-200-photos/sciences3.jpg" 
 width="635" height="200" alt="" />
 <h4 class="uvmbanner">Call-out box 4</h4>
 <p class="uvmbanner">Replace this short paragraph.  
 This is a <a href="">link</a> to more info.</p>
 </div>
 
 

Then insert the javascript shown below at the very end of the same file. Depending on how many image/text sets you have, you will need to change the number range in the javascript in the line that has

 var randImage = getRandomNumImage(1,5);
 
. Note that the range is one number past the total number of sets; in this case there are four sets, and the range is 1,5.

 
 <script type="text/javascript">
 /* <![CDATA[ */
 //
 function getRandomNumImage(lbound, ubound) {
 return (Math.floor(Math.random() * (ubound - lbound)) + lbound);
 }
 function showDivImage(showImage) {
 document.getElementById(showImage).style.display = "block";
 }
 var randImage = getRandomNumImage(1,5);
 var showImage = "rotating_banner"+randImage;
 showDivImage(showImage);
 /* //]]> */
 </script>
 
 

Last modified January 24 2013 11:09 AM