Skip to content

The Head

The 2015 templates use the SVG (scalable vector graphics) image format for most of the graphics.

SVG allows for resolution independence (that’s a fancy way of saying that your logos and icons will not be blurry or pixelated, no matter what size monitor they’re on).


SVG Icons and Logos

The first thing you’ll notice in the <head> is a lot of inline JavaScript (JS) referencing various CSS files. Why? Some older browsers do not support SVG, so fallbacks must be provided. These stylesheets and scripts are detecting browser capability and serving the appropriate file.

Our advice: Simply ensure your links are correct and then leave them alone. You’ll know that they are incorrect if no logos or icons appear on your site.

<script>

/*! grunt-grunticon Stylesheet Loader - v2.1.2 | https://github.com/filamentgroup/grunticon | (c) 2015 Scott Jehl, Filament Group, Inc. | MIT license. */

(function(e){func....

....

....(grunticon,this);

grunticon(["http://PATH/TO/YOUR/FILES/icons.data.svg.css", "http://PATH/TO/YOUR/FILES/icons.data.png.css", "PATH/TO/YOUR/FILES/icons.fallback.css"]);

</script>

<noscript><link href="http://PATH/TO/YOUR/FILES/icons.fallback.css" rel="stylesheet"></noscript>


HTML5.js Script

The next thing you’ll notice is a reference to a javascript file called HTML5.js. Why? Again, the purpose of this code is to accommodate visitors using older browsers. Removing this file may appear to do no damage; however, it must be kept to ensure that your site looks good on older machines.

<!--[if lt IE 9]>

<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>

<![endif]-->


Primary Style Sheet

Further down in the <head> you will find a reference to style.css. This is the site’s central CSS file. We do not recommend modifying this file, so that it can be updated periodically by central communications without jeopardizing your customizations.

For information on customizing your site, see the Customizing section of this document.

<link rel="stylesheet" href="http://PATH/TO/YOUR/FILES/style.css" type="text/css" media="all" />


IE Style Sheet

You’ll also notice a conditional link to a file called ie.css. If you’ve stayed with us this far, we’re going to assume you already know what this file does. Simply put, it accommodates older Internet Explorer (IE) versions.

<!--[if lt IE 9]>

<link rel="stylesheet" href="http://PATH/TO/YOUR/FILES/ie.css" type="text/css" media="all" />

<![endif]-->


jQuery

At last you’ll see a jQuery link. Keep this link intact and make sure it is referenced before the JavaScript file utk-min.js.

Once you ensure all the above links are in place, you are ready to begin adding the things (structure, content, design) that make your website unique.

<script type="text/javascript" src="//code.jquery.com/jquery-1.11.2.min.js"></script>

<script type="text/javascript" src="http://PATH/TO/YOUR/FILES/utk-min.js"></script>


Info IconWhy are the HTML5 shim and jQuery linked to a different server?

These two javascript files are used by many sites all over the web, and the jQuery CDN server is widely used as a respository. If your user has visited many sites, they are likely to have already downloaded jQuery or the HTML5 shim and stored the files in their browser cache. When the user visits your site, they will not need to download them again, making your site load faster.

The flagship campus of the University of Tennessee System and partner in the Tennessee Transfer Pathway.

Report an accessibility barrier