CSS Class Structure for Common Formatting Elements in Project Insight

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

DataList
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

ViewList
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>

DataListInlineRowEditForm
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

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

FDL
 Formats an element with a larger font, used for presenting information larger than the base font size, like on the Task display form.
 
FDS
 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