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 dev 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)