Developing Content for My VT

Channel Style Guide

The portal uses a set of formatting information that is called a skin. The skin defines presentation elements for the entire portal, and these elements can also be used within channels. If your channel content is HTML or XHTML, you have the option of overriding portal skin elements with locally defined style elements embedded within the content. But by using the skin styles, the user experience and the portal interface is more consistent, which can improve the usability of the portal. When you use skin styles, the portal can apply formatting associated with a portal theme consistently, which results in a visually consistent and appealing presentation.

Characteristics of a channel

Every channel has a title that is displayed as the first line of text in the channel in bold. Next to the title are control buttons provided by the portal framework. Every channel may be minimized or maximized by the end user. The uPortal framework provides other controls. It is possible for example to associate a help file with a channel. The user can access this information through a small control that is labeled with a question mark. Below the title, the portal will display a channel's description, if one is provided. This is displayed in gray text. Descriptions should be limited to 60-80 characters. Long descriptions push the channel contents farther down the page. A channel may also have an icon, but like descriptions, this is optional. We recommend that icon width be 100-150 pixels, and the height be no more than 30 pixels.

Skin basics

Unvisited links are displayed in blue, while visited links are purple. HTML formatting and presentation elements will be rendered just as they would in a regular Web page. These include italics, bold, section headings (H1-H6), preformatted text, paragraphs, subscripts and superscripts.

Skin fonts

My VT default font size is 12 pixel. The default font faces are (in preference order) Verdana, Geneva, Arial, Helvetica, sans-serif. For items such as addresses and program/HTML code My VT uses Courier New, Courier, and monospace font faces. The preferred method of changing a font's size or color is through a CSS class call or inline style. There are several predefined classes available for use (see the complete style guide for the color class list).

Skin colors

Every My VT skin is based on a monochrome color scheme. There is one color and its tints (lighter values), tones (grayed colors) and shades (darker values). The color palette can be called with the follow CSS classes:

Lists of links

In addition to the standard ordered or unordered lists of links, it is also possible to display links in an Office XP'esque style. This can be done with a simple class call within a DIV, SPAN, or TD tag, like this:
<div class="myvt-linkitem">

Styling forms

Form elements can be stylized to match the page content. Here is an example: