The University of Tennessee, Knoxville

Office of Communications and Marketing

About Our Stylesheets

CSS We conceived of these templates and themes as a toolbox for building university websites. Most of the tools you’ll need to build a standard website are provided here. You’ll need to supply your own content and imagery (graphics and photography) of course, and you’ll have to come up with a scheme for organizing or “architecting” your website content so visitors can find the information they need. You’ll also need to consider whether social media outlets can aid in your communications efforts (they’re not for everybody) [link]. But the bones of your site can be found here.


STYLESHEETS

Stylesheets provide the code that is used to govern how webpages look and feel. Our stylesheet scheme provides a general, or global, stylesheet that can be further customized by adding secondary stylesheets. Every page in your website should call at least one stylesheet, namely "global.css."


PRIMARY

The stylesheet named “global.css” is responsible for the basic structure of your website, and includes styles for the two areas of the template that should not be edited—namely, the UT Header and UT Footer.

You should have no reason to edit this file, and it will be served from the university’s main website, so there’s also no need to move it to your unit’s web server. It will provide all of the layout elements you may need, including options for both horizontal and vertical navigations. We don’t anticipate them, but any major changes or fixes to global.css will be communicated to the university community via the CAMPCOMM and UTWEBFORUM listservs.

Vertical Navigation Layout

Web

View a Demo | Download


Horizontal Navigation Layout

Web

View a Demo | Download


All of these elements can be seen in action on our “boilerplate” pages.


SECONDARY

If you’d like to use an alternate color scheme for your site, you may call a secondary style sheet. Simply add the stylesheet call beneath the global.css call in your header markup (both sheets must be called). We have provided some ready-made secondary style sheets in four color schemes:

Muted

Web

View a Demo | Download

Green

Web

View a Demo | Download

Energetic

Web

View a Demo | Download

Bright

Web

View a Demo | Download


TERTIARY

The easiest way to modify styling to suit your needs is to add a custom stylesheet. If you are more comfortable with CSS and require further customization for your site, we’ve provided a third stylesheet that can be called along with global.css and/or a secondary stylesheet. In it, you will find a list of selectors that will allow you to easily modify some of the style elements.


DIY

Code For compliance with the template standards, we ask that you call at least the global.css stylesheet. Many of you may be more familiar with CSS and may be comfortable building your own secondary or tertiary stylesheet to add custom styles to your websites. For suggestions on color combinations, please consult Our Palette.


FONT STACKS

Arial and Cambria are the primary web and electronic media fonts. This website serves as a good example of how these typefaces offer easy-to-read text within a clean, easy-to-navigate interface. Below are the suggested font stacks for web use.

Serif
Cambria, Georgia, Times, Times New Roman, serif
Sans-serif
Arial, Helvetica, sans-serif

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.