The University of Tennessee, Knoxville

Office of Communications and Marketing

Downloads, Implementation, and the “Boilerplate”

Implementing the templates should be a simple process—simply download the theme package of your choice, create your Unit Header graphic, plug in your navigation and content, and upload everything onto your web server. The reality is rarely that simple.

Anyone who has been a web developer for more than a week or two has had the frustrating experience of inheriting someone else’s code. We’ve been very careful to make our code as lean as possible, and we’ve carefully commented it, so please read the code comments carefully as you work with it. The comments should address most of your questions.


DOWNLOAD THE THEMES

Each of the five zipped themes includes the following:

  1. Two HTML files.
    1. Vertical navigation
    2. Horizontal navigation
  2. One Custom Stylesheet
    1. For making optional customizations
  3. Header graphic
    1. HeaderTemplate.psd is a Photoshop file with each of the five standard colors on a separate layer and the standard font already formatted

THE FIVE THEMES

Clean

Web

View a Demo
Download


Muted

Web

View a Demo
Download


Green

Web

View a Demo
Download


Energetic

Web

View a Demo
Download


Bright

Web

View a Demo
Download



THEME IMPLEMENTATION

We’ve done most of the work for you, and we hope that it will allow you to focus on the most important parts of your website—your content and how it’s organized. If you’re planning to use the themes as-is, here are some instructions on implementation.


HEADER CODE & STYLESHEET CALLS

When you look within the <head> tags of, for instance, the “muted” template, you’ll see the following bit of code:

<link href="http://www.utk.edu/stylesheets/templates/global.css" rel="stylesheet" type="text/css" />
<link href="http://www.utk.edu/stylesheets/templates/muted.css" rel="stylesheet" type="text/css" />

The first stylesheet call references the global stylesheet that we’re hosting on our webserver. The second call references one of our five secondary stylesheets—we’ll also be hosting these as well. If you’re just implementing the themes as-is, you should have no reason to upload these css files to your own webserver, or touch the .css files that are included in the download package. If and when we make changes to the stylesheets on our server, we will send a message to the CAMPCOMM and UTWEBFORUM listservs to notify you of the changes so there won’t be any unpleasant surprises.


THEME CUSTOMIZATION

If you want to use a standard theme but also would like to include additional CSS formatting, we suggest that you customize the “custom.css” file in the download package and upload it to your own web server. We’ve pre-populated that file with some selectors that can be modified, or you can add a few of your own depending on your level of comfort. If you choose this route, you’ll need to add a third stylesheet call to your <head> code. It would look something like this:

<link href="http://www.utk.edu/stylesheets/templates/global.css" rel="stylesheet" type="text/css" />
<link href="http://www.utk.edu/stylesheets/templates/muted.css" rel="stylesheet" type="text/css" />
<link href=”http://www.myserveraddress.edu/styles/custom.css” rel="stylesheet" type="text/css" />

If you’re very comfortable with web design and familiar with CSS, you’re welcome to modify a theme or even create your own. We still recommend that you call the global.css file on our server and create a secondary stylesheet to enforce your customizations. That secondary stylesheet would be hosted on your own web server. Your <head> code would then look something like this:

<link href="http://www.utk.edu/stylesheets/templates/css/global.css" rel="stylesheet" type="text/css" />
<link href="http://www.myserveraddress.edu/styles/mycss.css” rel="stylesheet" type="text/css" />


A NOTE ON TYPOGRAPHY & FONTS

The recommended font for creating the unit header is Gotham. This recommendation is in keeping with our overall graphic identity guidelines for typography.

Most users will not have Gotham installed on their computers, and will not be able to properly view and work with the font in the Photoshop file we are providing. We have a limited number of licenses for Gotham that we can share with campus designers. You may request a license here. Be sure to mention that you need the fonts to design your unit header.

If you require our assistance with designing your Unit Header, please request it here.


BOILERPLATE

The boilerplates give examples of how HTML elements will look in action using just the global stylesheet or one of the secondary themes.


IMAGES

Images that appear on the left side of text have a class of “alignleft frame.”

<img class="alignleft frame">

“Alignleft” floats the image to the left and allows text to wrap around the image. Replacing it with “alignright” would float the image to the right.

“Frame” generates a bit of padding and an outside border—in other words, it frames the image.


LISTS

Unordered lists may remain unclassed, but you can apply different classes for different types of lists. Navigational lists, for instance, may be classed “navigation,” as in:

<ul class="navigation">

This will add the animated orange carats to the left of each item on the list, as well as a hover color for linked items (all items in a navigational list should be linked).

The “breadcrumb” navigation just above the footer in the boilerplate is also an unordered list with a class of “breadcrumbs,” as in:

<ul class="breadcrumbs">


A NOTE ON COLUMNS

The templates are divided into a three-column grid. You may use any configuration of these three columns, including three individual columns of equal width, a two-thirds column with a one-third column, or a full width configuration. There are examples of each within the boilerplates.

When you need a two-thirds column, use the <section> tag with a class of “two-thirds column,” as in: <section class="two-thirds column">

If you require a one-third width column, apply a class of “one-third column col,” as in:

<section class="one-third column col">

If you require a full-width column, apply a class of “three-thirds column,” as in:

<section class="three-thirds column">


OTHER RANDOM STUFF

Again, we encourage you to peruse the boilerplates to see other elements in action—including highlight boxes, headers, blockquote, and forms—along with explanations for implementing them.


Contribute to a big idea. Give to UT.

The University of Tennessee. Our New Tagline Here.

Knoxville Tennessee 37996  |  865-974-1000
The flagship campus of the University of Tennessee System.