Skin support
The CSS that creates the My VT skins are supported by the following browsers:
NS 6.0+ :: All platforms
Mozilla/Gecko 1.0+ :: All platforms
IE 5.0+ :: Windows
IE 5.0+ :: Mac
Opera 5.0+ :: All platforms
Konqueror 2.2+ :: *nix
Clue 4.x+ :: All platforms
ICE 5.x :: All platforms
If a browser is not listed then it is not officially supported. Please be aware that although a browser may support the CSS, it
may or may not support the corresponding HTML/XHTML or JavaScript.
The CSS validates to W3C recommended standards.
Skin basics
Regular links are in a
Blue color.
Visited links are in a
Purple color.
All basic styling elements are available:
italic or emphasis
bold or strong
H1
H2
H3
H4
preformatted text
paragraph text
subscript and
superscript
Skin fonts
The common fonts used are at a 12 pixel size and are (in preference order) Verdana, Geneva, Arial, Helvetica, sans-serif.
For items such as addresses and program/HTML code the fonts Courier New, Courier, and monospace are used.
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.
class="myvt-text-white"
class="myvt-text-black"
class="myvt-text-red"
class="myvt-text-blue"
Example code:
<span style="color: #0000FF">This is blue text</span>
This is blue text
Skin colors
Every My VT skin is based on a monochrome color scheme. There is one color and it's tints (lighter values),
tones (grayed colors) and shades (darker values). The color palette can be called with the follow CSS classes:
Note the main color is listed as 'myvt-bgcolor-light'
class="myvt-bgcolor-highlight"
class="myvt-bgcolor-light"
class="myvt-bgcolor-med"
class="myvt-bgcolor-dark"
class="myvt-bgcolor-shadow"
class="myvt-bgcolor-gray66"
class="myvt-bgcolor-gray99"
class="myvt-bgcolor-graycc"
class="myvt-bgcolor-graydd"
class="myvt-bgcolor-grayee"
class="myvt-bgcolor-white"
class="myvt-bgcolor-black"
class="myvt-bgcolor-maroon"
class="myvt-bgcolor-orange"
Lists of links
Aside from the standard ordered or unordered lists of links, it is also possible to display links in an
Office XP'esk style. This can be done with a simple class call within a DIV, SPAN, or TD tag.
Example code:
<div class="myvt-linkitem">
<a href="http://www.google.com">www.google.com</a>
<a href="http://www.google.com">www.google.com</a>
</div>
Example code:
<table><tr><td class="myvt-linkitem">
<a href="http://www.google.com"><img src="gif">www.google.com</a>
<a href="http://www.google.com"><img src="gif">www.google.com</a>
</td></tr></table>
Styling Forms
Form elements can be stylized in two different manners. The first method is to match the skin colors and the second is
to match with the page content.
Example code:
<form>
<input type="text" class="myvt-skin-form"/>
<input type="text" class="myvt-skin-formfocus"/>
<input type="text" class="myvt-skin-form"
onblur="this.className='myvt-skin-form';"
onfocus="this.className='myvt-skin-formfocus';"/>
<input type="submit" class="myvt-submit-formbutton"/>
</form>
Example code:
<form>
<input type="text" class="myvt-content-form"/>
<input type="text" class="myvt-content-formfocus"/>
<input type="text" class="myvt-content-form"
onblur="this.className='myvt-content-form';"
onfocus="this.className='myvt-content-formfocus';"/>
</form>