Some Fixes for the UVM Web Template

Using Javascript, here are a couple of fixes we came up with for issues regarding the UVM web template:

  1. Linking a banner graphic back to your site’s home page
    If your site uses a graphic for the the banner image (instead of the standard block of color), it’s nice to offer your users a way back to your site’s home page by allowing them to click on your banner. This is especially true if you’re not using a departmental logo.

    Here’s how we did it with some basic Javascript:

    function bannerLink() {
    
    	var home = "http://www.uvm.edu/ctl";
    	
    	document.getElementById("banner").onclick = function() {
    		window.location = home;
    	}
    	document.getElementById("global").onclick = function() {
    		window.location = home;
    	}
    }
    

    First, we set a variable for our site’s home:

    var home="http://www.uvm.edu/ctl";

    Then we set up onclick event handlers for each of the elements in question, “banner” and “global”:

    document.getElementById("banner").onclick = function() {
    	window.location = home;
    }
    document.getElementById("global").onclick = function() {
    	window.location = home;
    }

    Place that bannerLink() function in a .js file so you can link to it from each page and then call it using an onload handler of the body.

  2. Styling the footer below the main menu
    Did you ever notice how even though you might have set a background color for the footer of your site, the footer bar below the menu doesn’t change? Again, using some basic Javascript, we can change that:

    function setFooter() {
    	var bkgd = "#DE9442";
    	document.getElementById("footer").style.background = bkgd;
    }
    

    First we’ll set a variable to hold the color (this is the orange of the CTL site footer), and then set the footer background to be that color.
    Stash the setFooter() function in your .js file and call it with a body onload handler.

We actually combined the above functions into one init() function so that we could do multiple things when the page loads.