UVM WEB GUIDE: Template Publishing System

Q & a

To-do list

Design Feature: Cascading Style Sheets

The template heavily relies on cascading style sheets to apply color, typography, and layout to the UVM Web Template. Some major tags are already preconfigured for use with the template. Here are some examples:

Heading 1

Note heading 1 is generally reserved for The University of Vermont.

Heading 2

Note heading 2 is generally reserved for your site's title, but is also recommended for use in the content area when no banner option is used.

Heading 3

This is sample default text. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex.

Heading 4

Heading 5

Heading 6

You can also use our pre-configured styles for some main design elements.

Alpha Bars

A B C D E F G H I J K L M N O P Q R S T U V W X Y Z

The alpha bar style can be created using <p class="alpha"> </p>.

Tables

UVM Simple Table Design
Table Heading 1	Table Heading 2	Table Heading 3
contents	contents	contents
contents	contents	contents

This table design can be created using <table class="uvmtable"> </table>.

Images wrapped in text

placeholder image This is the caption for this text wrapped image

There are many occasions when a descriptive photograph or illustration can contribute to the value of text content. You can effectively link the two elements together by wrapping the text around the image with the image either on the left or the right of the text. Wrapped images can also be accompanied by a caption.

Implementing this feature is easy. Our stylesheet contains the information to make the wrapping and captions look and function correctly. All you need to do is follow the directions below to create proper html tags.

Create a wrapped image without a caption:

Resize the image you would like to include.
Upload the image to your public_html folder or to an images folder within public_html
In your html page go to beginning of the text where you'd like the image to appear and insert an image "tag" that looks like this (for an image on the left side):
<img src="image.jpg" class="imageleft" alt="Placeholder image " height="120" width="140" />
or like this for an image on the right side of the text:

<img src="image.jpg" class="imageright" alt="Placeholder image " height="120" width="140" />
Note: be sure that you have included the "class" attributes in your image tag!

placeholder image This is the placeholder caption

Creating a wrapped image with a caption

Resize the image you would like to include. For the caption to fit nicely under the photo please choose one of the predetermined sizes for the image:
- small: 160 pixels wide
- medium: 280 pixels wide
- large: 400 pixels wide
You will need to input the size name as part of the "class" attribute.
Upload the image to your public_html folder or to an images folder within public_html
In your html page go to beginning of the text where you'd like the image to appear and insert a paragraph and image "tag" that look like this (for an image on the right side):
<p class="with_captionright sm_caption"> <img src="image.jpg" class="imageright" alt="Placeholder image" height="120" width="160" /> This is the placeholder caption</p>
There are two critical aspects of this call. The first is that the image tag must be inside the paragraph tag. The second is that the "class" attribute in the img tag has two pieces - the first part (with_captionleft or with_captionright) positions the text under the image and move the whole thing to the right or left of the rest of the copy - the second (sm_caption, med_caption, lg_caption) dictates how wide the text area is. Choose the size that corresponds with the image size you selected.
Note: These two pieces must have a space between them!

Applying Your Own Style Sheet

You may use your own style sheets to your template site as you see fit. You can also apply an external style sheet to your entire template site by attaching it to the zero line of your defaultmenu.html or to your configuration file using the call: stylesheet=mystyle.css where mystyle.css represents the file name of your style sheet.

Using your own stylesheet you can also override some of the template default visual settings. The following is a list of settings most commonly changed and the corresponding CSS call. Note: If you use multiple parameters, you will separate each item in the series with a comma with no space after it.

#uvmmain { width: 775px; }
To set a fixed (non-fluid) width for your site
#subbanner { color: #fff; background: #447548; font-family: georgia, serif; font-size: 1.7em; }
To change the color, background color, font face, or size of the text banner
#uvmmaincontent h3 { color: #447548; font-size: 1.5em; }
To change font color or size of the headings in the content area (can be set for each heading type)
#uvmcustomnav { background: #e8e8e8; }
To change the background color for the custom navigation bar

Consult the main UVM template stylesheet to see more styles that you can alter in your own stylesheet.

Last modified September 25 2008 02:25 PM