• Fonts, lists and rules
• Paragraphs and headings
• Color and box styles
• Positioning images
• Application icons
• Special Characters
• Additional documentation (PDF)
• Style guide home

Back to Web development home

Visual style guide for Office of the Chancellor Web templates

Color and box styles for paragraphs, tables and divs

The following represents the prescribed pallette of colors and boxes available for use within the Web templates. Instructions for applying the boxes and colors to various block-level elements are included in each area. There are many other applications for these colors and boxes; however, the following should provide a good overview of the options available.

---

Applying color box styles to tables (general)

The following are generated by applying the following styles from the "Style" menu in the Dreamweaver Properties window to table cells:

• class="box-blue-light"
• class="box-red-light"
• class="box-green-light"
• class="box-brown-light"
• class="box-gold-light"
• class="box-gray-light"
• class="box-clear"

---

Applying color box styles to tables with headers and sub-rows

No HTML table properties set. Styles applied to individual table cells (td) rather than complete rows (tr).

Table with "box-blue" and "box-blue-light" applied to each table cell

Header	Row
Sub	Row

Table with "box-red" and "box-red-light" applied to each table cell

Header	Row
Sub	Row

Table with "box-green" and "box-green-light" applied to each table cell

Header	Row
Sub	Row

Table with "box-brown" and "box-brown-light" applied to each table cell

Header	Row
Sub	Row

Table with "box-gold" and "box-gold-light" applied to each table cell

Header	Row
Sub	Row

Table with "box-gray" and "box-gray-light" applied to each table cell

Header	Row
Sub	Row

---

Applying color box styles to paragraphs

The following are generated by applying the following styles from the "Style" menu in the Dreamweaver property bar to paragraphs:

class="box-blue"
[Note: a reverse+bold+italics style (span class="reverseboldital") has been added to the description above.]

class="box-blue-light"
[Note: An italics style (span class="ital") has been added to the description above.]

class="box-blue-narrow"

class="box-blue-light-narrow"

class="box-red"

class="box-red-light"

class="box-red-narrow"

class="box-red-light-narrow"

class="box-green"

class="box-green-light"

class="box-green-narrow"

class="box-green-light-narrow"

class="box-brown"

class="box-brown-light"

class="box-brown-narrow"

class="box-brown-light-narrow"

class="box-gold"

class="box-gold-light"

class="box-gold-narrow"

class="box-gold-light-narrow"

class="box-gray"

class="box-gray-light"

class="box-gray-narrow"

class="box-gray-light-narrow"

class="box-clear"

class="box-clear-narrow"

---

Applying background colors to tables (no boxes)

Table properties (HTML): width="200" border="0" cellpadding="4" cellspacing="2"

Table with "color-blue" and "color-blue-light" tr class attribute and reversebold th class attribute.

Main	Row
Sub	Row

Table with "color-red" and "color-red-light" tr class attribute and reversebold th class attribute.

Main	Row
Sub	Row

Table with "color-green" and "color-green-light" tr class attribute and reversebold td class attribute.

Main	Row
Sub	Row

Table with "color-brown" and "color-brown-light" tr class attribute and reversebold th class attribute.

Main	Row
Sub	Row

Table with "color-gold" and "color-gold-light" tr class attribute and a bold th class attribute.

Main	Row
Sub	Row

Table with "color-gray" and "color-gray-light" tr class attribute and a bold th class attribute.

Main	Row
Sub	Row

Gold/Light-Gold auto-table setup with "mainrow" and "subrow" tr class attribute and th scope="col" (bolds).

No need to set classes for table headers using the "mainrow" and "subrow" styles.The "mainrow" and "subrow" styles are only available in gold. This legacy table setup has been replaced by the gold/light-gold box and other color options above.

Main	Row
Sub	Row

---

More options

Table with "color-gray" and "color-gray-light" tr class attribute

Main	Row
Sub	Row

Table with "color-brown" and "color-brown-light" tr class attribute; "reversebold" style applied to th.

Main	Row
Sub	Row

Table with "color-red" and "color-red-light" tr class attribute; "reversebold" style applied to th.

Main	Row
Sub	Row

Table data class attribute of color-red and table celpadding of 8

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam tempus adipiscing sem. Mauris dictum sem eu est. Sed felis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Suspendisse potenti. Etiam nec magna. Aliquam sit amet sapien a elit tempor mollis. Aenean ut arcu at nisi iaculis vehicula. Cras sem. Suspendisse potenti. Ut egestas nunc id risus. Maecenas sodales nunc at elit.