Other colors not css class accessable:

intro_text, intro-text

bold: bold, box-title, box_title, or just use <strong> or <b>

italic: italic or use <i>

underline: don't use it.

allcaps: allcaps

size75, size80, size85, size95 (others removed in RWD)

<h1>h1. Bootstrap heading <small>Secondary text</small></h1>

<h2>h2. Bootstrap heading <small>Secondary text</small></h2>

<h3>h3. Bootstrap heading Secondary text</small></h3>

<h4>h4. Bootstrap heading <small>Secondary text</small></h4>

<h5>h5. Bootstrap heading <small>Secondary text</small></h5>

<h6>h6. Bootstrap heading <small>Secondary text</small></h6>

<p class="indent">

<p class="lead">Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.</p>

You can use the mark tag to highlight text.

<p>You can use the mark tag to <mark>highlight</mark> text.</p>

Left aligned text.

<p class="text-left">Left aligned text.</p>

Center aligned text.

<p class="text-center">Center aligned text.</p>

Right aligned text.

<p class="text-right">Right aligned text.</p>

Justified text... Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras sed arcu quis orci convallis sollicitudin. Donec tincidunt ante id maximus eleifend. Suspendisse eu quam pulvinar, rhoncus augue eu, euismod nibh. Mauris dui tellus, aliquet eu rutrum sed, feugiat tristique mauris. Aenean fermentum mi eget nisl tincidunt, nec commodo lacus fringilla. Vestibulum tortor nunc, rutrum a pretium ac, malesuada quis erat. Quisque vehicula nec neque nec sollicitudin. 

<p class="text-justify">Justified text.</p>

No wrap text... Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras sed arcu quis orci convallis sollicitudin. Donec tincidunt ante id maximus eleifend. Suspendisse eu quam pulvinar, rhoncus augue eu, euismod nibh. Mauris dui tellus, aliquet eu rutrum sed, feugiat tristique mauris. Aenean fermentum mi eget nisl tincidunt, nec commodo lacus fringilla. Vestibulum tortor nunc, rutrum a pretium ac, malesuada quis erat. Quisque vehicula nec neque nec sollicitudin. 

<p class="text-nowrap">No wrap text.</p>

<address>
  <strong>Twitter, Inc.</strong><br>
  795 Folsom Ave, Suite 600<br>
  San Francisco, CA 94107<br>
  <abbr title="Phone">P:</abbr> (123) 456-7890
</address>

More in Weizhen's site

Font Family classes

• arial

No specific CSS code for below, but for reference:

• regular (body): font-family:opensansr,verdana,arial,sans-serif !important;
• light: font-family:opensansl,arial,sans-serif
• bold: font-family:opensansb,arial,sans-serif;

• Normal link
• Class: nounderline
• Class: underline-on-hover
• Class: link (just like normal link)
• Class: hide-link-icon <--external link

quick-links-buttons (if possible, use quick-links in the Content Megablock)

<div class="quick-links-buttons">
 <div class="links-content">
  <ul>
   <li><a href="education/emstat/ems-feedback.php">EMS Feedback</a></li>
  </ul>
 </div>
</div>

boxlink (note: do not use in a WYSIWYG, link is stripped when submitted)

<a class="boxlink" href="https://www.upstate.edu/upstateconnect/appointment.php"> <div class="boxlink">Request Appointment </div>
</a>

Width

Percentages:

width10, width15, width20, width25, width30, width35, width40, width45, width50, width55, width60, width65, width70, width75, width80, width85, width90, width95, width100

Pixels:

width5px, width10px, width15px....  width1200px
max-width5, max-width10, max-width15.... max-width1000

Auto:

width-auto / width_auto

Mixed:

min200px_max50_left ({min-width:200px;max-width:50%;float:left;margin-right:10px})

Height (pixel-only):

Pixels:

min-height100, min-height105, min-height110 ... min-height500

Auto:

height-auto / height_auto

Line Height (percentages)

lheight80, lheight90, lheight95, lheight120, lheight125, lheight150, lheight200

12-based Percentages

pixels are of media size, not container size

Learn more here...

centerobject, aligncenter, center, centertable
leftobject, alignleft
rightobject, alignobject

RWD only:

col-sm-push-4 (any number 1-12), pull-left

col-sm-pull-4 (any number 1-12), pull-right

col-sm-offset-4 (any number 1-12)

Borders

solid1, solid2, solid3, solid4
borderleft1, borderleft2
borderright1, borderright2
borderbottom1, borderbottom2
noborder

Corners

round5, round7, round9
roundtop5, roundtop7, roundtop9
roundbottom5, roundbottom7, roundbottom9

Shadows

darkshadow3, darkshadow5
mediumshadow3, mediumshadow5
lightshadow 3, lightshadow5

Display

block, inline-block, inline
hide, hidden (both set display to "none")

Clear

br.all (example: <br class="all" />)
clr, clearfix

Horizontal Rule

thin (1px), medium (2px), lightgray (eg. <hr class="thin color1 bg1 width80 center" />

If possible, use the image block in the Multimedia Megablock.

• img-responsive - if image is big, shrinks to size of div
• width100 - if image is small, expands to size of div
• imagerollover - used for image links (also use hide-link-icon class in the <a> if it's an external link or file)

Example code:

<a class="hide-link-icon" href="healthcare/index.php">
  <img alt="add image description" class="img-responsive imagerollover width100" src="images/example.jpg" />
</a>

For simple tables, especially those which will be often updated, use the "simple-table" in the Content Megablock.

Working with tables, in detail, on the Cascade-Training site.

Classes to use:

• table table-striped table-upstate - add for <table> adds 1px border spacing, 3px padding for cells
• table-head - add for first row, center and bold white text, color1 background, 5px padding

Optional Classes:

• tvalignbottom, tvalignmiddle, tvaligntop - verticle alignment of text
• taligncenter, talignleft, talignright - horizontal alignment of text
• tcellpadding1 -> tcellpadding5 - add padding inside cell
• tcellspacing1 -> tcellspacing5 - add border spacing between cells

Example in code:

    
<table class="table table-striped table-upstate" summary="Table example" border="0">
  <tbody> 
    <tr class="table-head"> 
      <td>Letters</td>
      <td colspan="3">Examples</td>
    </tr>
    <tr>
      <td>A</td>
      <td>Albert Einstein</td>
      <td>Alabama</td>
      <td>Alligators</td>
    </tr>
    <tr>
      <td>B</td>
      <td>Beethoven</td>
      <td>Botswana</td>
      <td>Batteries</td>
    </tr>
    <tr>
      <td>C</td>
      <td>Charles Schultz</td>
      <td>California</td>
      <td>Classrooms</td>
    </tr>
    <tr>
      <td>D</td>
      <td>Don Knots</td>
      <td>Denmark</td>
      <td>Desks</td>
    </tr> 
    <tr>
      <td>E</td>
      <td>Ella Fitzgerald</td>
      <td>Europe</td>
      <td>Ears</td>   
    </tr> 
  </tbody> 
</table>
   

Example result:

If possible, use the accordion block in the Content Megablock.

Accordion code example:

<a href="#" id="expand_all">Expand all</a>
<div class="accordion">
 <h2>Blah Blah Blah</h2>
 <div>Hidden text goes here</div>
</div>