Listed below are some of the most common CSS classes and their application within the Project Insight Web Application.   You may use these CSS classes within your SDK customizations.

Tables & Lists

The following classes are used to format basic tables and lists

Formats a table like the "task list" in Project Insight.  The table has a light border around the entire table and light lines separating cells.

<table class="DataList"><tr><th>Header</th></tr><tr onmouseover="HOn(this);"><td>Data</td></tr></table>

NOTE: The mouseover event on the row connected to the global function HOn(this) applies

Formats a table with no shading or borders, but applies default spacing to the table.

<table class="ViewList"><tr><th>Header</th></tr><tr onmouseover="HOn(this);"><td>Data</td></tr></table>

Formats a table row used for inline editing on a DataList table

<tr class="DataListInlineRowEditForm"><td></td></tr>

Display Forms

The following classes are commonly used on display forms, like the Task display form, or issue display form

 Formats a table with the proper spacing for display pages, like the Issue display form.

 Formats an element with a larger font, used for presenting information larger than the base font size, like on the Task display form.
 Formats an element with a smaller font, used for presenting de-emphasized information smaller than the base font.

<table class="ViewTable"><tr><th><Metafuse:DisplayLabel id="name_DL" for="name" PropertyName="Name"  runat="server"/></th></tr><tr><td class="FDL"><Metafuse:TextLabel id="name" runat="server"/></td></tr></table>

Input Forms

The following classes are commonly used on input forms like the Project add/edit form.

Input Table
Formats a table with the proper spacing for an input form.

<table class="InputTable"><tr><th><Metafuse:FormLabel id="name_FL" for="name" PropertyName="Name" runat="server"></th><td><Metafuse:TextBox id="name" runat="server"/></td></tr></table>

Common Unspecific Formatting Classes

The following classes available to perform basic formatting on any element.  These are not tied to any specific structure or design pattern. 

Button = button declaration, apply to anchor tags, or LinkButton controls in ASP.Net
<a href="[URL]" class="Button">TEXT</a>

B = bold
U = underline
N = normal font weight
AR = align right
AL = align left
AC = align center
VT = vertical align top
VM = vertical align middle
VB = vertical align bottom
WW = word wrap
NW = no wrap
OF = overflow hidden, with ellipsis
FL = float left
FR = float right

Font Sizes
SM = small
VSM = very small
VVSM = very, very small

LG = large
VLG = very large
VVLG = very, very large

Standard Widths & Heights
W100 = width 100% (or w100)
W75 = width 75%
W50 = width 50%
W33 = width 33%
W25 = width 25%
H100 = height 100%

Padding & Margins
p0 = padding 0px (all sides)
p1 = padding 1px
p2 = padding 2px
..... (continued to)
p10 padding 10px;

pT0 = padding-top:0px; (pattern continues to pT10)
pB0 = padding-bottom:0px; (pattern continues to pB10)
pL0 = padding-left:0px; (pattern continues to pL10)
pR0 = padding-right:0px;  (pattern continues to pR10)

NOTE: When applied to a table, the padding does not cascade, only effects first level table cells

m0 = margin 0px (all sides)
m1 = margin 1px
m2 = margin2px
..... (continued to)
m10 margin10px;

mT0 = margin-top:0px; (pattern continues to mT10)
mB0 = margin-bottom:0px; (pattern continues to mB10)
mL0 = margin-left:0px; (pattern continues to mL10)
mR0 = margin-right:0px;  (pattern continues to mR10)


Online 5/15/2012