How To Use the Templates
Note: The "blue" theme has been updated to fix the named anchor problem. "blue.css" still exists, unchanged, on the server for those of you who are referencing it. However, by simply changing the call in your header to "blue2.css" the problem will be solved.
Getting started with the templates should be pretty easy. You just need to download the generic pages, create your header graphic, plug in your content, and upload everything onto your server. Piece of cake, right?
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. There's no way around it, I'm afraid, but we've trimmed it all as much as possible and have commented the heck out of it. Read the code comments carefully. They should address most (if not all) of your questions.
About the download files
Each of the five zipped themes includes four files: a one-column layout, a two-column layout, a three-column layout, and the style sheet. Headers.zip includes seven standard images that can be used for a header graphic. (Or you can view them here.) Headerpsd.zip includes a single Photoshop file with each of the seven standard images on a separate layer and the standard font already formatted.
Borrowing from the UT wordmark, the standard font is Goudy Old Style. Unfortunately, we do not have a university-wide license for that font, so we cannot give it away. However, we'd be happy to create a title graphic for you. Remember, you're under no obligation to use the standard images or font.
I want to use one of the themes "as is" . . .
If that's the case, then we've done most of the work for you. When you look in the <head> of, say, the "simple" template, you'll see the following:
<link href="http://www.utk.edu/cs/templates/css/global.css" rel="stylesheet" type="text/css" />
<link href="http://www.utk.edu/cs/templates/css/simple.css" rel="stylesheet" type="text/css" />
We're hosting global.css and the five secondary style sheets on the main UTK server, so you should have no reason to even touch the .css file that is included in the download package.
If you want to use a standard theme but also need to include additional CSS formatting, we suggest that you create a third sheet and host it on your own server. For example, if you wish to format a table cell or create a style for H4, you should do so in a new .css file. Your <head> would then look something like this:
<link href="http://www.utk.edu/cs/templates/css/global.css" rel="stylesheet" type="text/css" />
<link href="http://www.utk.edu/cs/templates/css/simple.css" rel="stylesheet" type="text/css" />
<link href="http://www.myserveraddress.edu/css/new.css" rel="stylesheet" type="text/css" />
I want to modify a theme or create my own . . .
Great! That's why we've included the secondary style sheets in the download packages. Let's say you want to have a left column menu that extends the full length of the page but you hate those particular shades of blue. To tweak the template, make edits to blue.css and then host it on your own server. Your <head> would then look like this:
<link href="http://www.utk.edu/cs/templates/css/global.css" rel="stylesheet" type="text/css" />
<link href="http://www.myserveraddress.edu/css/blue2.css" rel="stylesheet" type="text/css" />
A word of advice to CSS gurus . . . Having worked with the templates for a couple weeks now, I would suggest playing with one of the theme sheets for a couple hours before beginning a full-on custom design. I've found that it's far easier to radically tweak a theme -- using its predetermined naming conventions, for example -- than it is to start from scratch.
Download Files
- blue.zip (16kb)
- different.zip (16kb)
- formal.zip (16kb)
- simple.zip (16kb)
- traditional.zip (16kb)
- headers.zip (96kb)
- headerpsd.zip (904kb)