Theme Design: Theme Style Sheet

In OneNet the theme style sheet is one of at least three style sheets included when pages are rendered. It defines the font styles and colors used by applications and the design. It does this by using a semi-reverse procedure where multiple classes are added to an element to define its style. These classes are part of an overall palette shown below that simplifies the use of styles.

.forecolor0,.forecolor0:link{color:#FFFFFF;}
.forecolor1,.forecolor1:link{color:#E6EDF1;}
.forecolor2,.forecolor2:link,.forecolor0 A,A.forecolor0:hover{color:#CDDBE4;}
.forecolor3,.forecolor3:link,.forecolor1 A,A.forecolor1:hover{color:#B4C9D7;}
.forecolor4,.forecolor4:link,.forecolor2 A,A.forecolor2:hover,.forecolor0 A:hover{color:#9CB7C9;}
.forecolor5,.forecolor5:link,.forecolor3 A,A.forecolor3:hover,.forecolor1 A:hover,.forecolor9 A:hover{color:#83A5BC;}
.forecolor6,.forecolor6:link,.forecolor4 A,A.forecolor4:hover,.forecolor2 A:hover,.forecolor10 A:hover{color:#5986A6;}
.forecolor7,.forecolor7:link,.forecolor5 A,A.forecolor5:hover,.forecolor3 A:hover,.forecolor7 A:hover,A.forecolor9:hover,.forecolor9 A{color:#43657C;}
.forecolor8,.forecolor8:link,.forecolor6 A,A.forecolor6:hover,.forecolor4 A:hover,.forecolor8 A:hover,A.forecolor10:hover,.forecolor10 A{color:#2C4353;}
.forecolor9,.forecolor9:link,.forecolor7 A,A.forecolor7:hover,.forecolor5 A:hover{color:#162129;}
.forecolor10,.forecolor10:link,.forecolor8 A,A.forecolor8:hover,.forecolor6 A:hover{color:#000000;}

.backcolor0{background-color:#FFFFFF;}
.backcolor1{background-color:#E6EDF1;}
.backcolor2{background-color:#CDDBE4;}
.backcolor3{background-color:#B4C9D7;}
.backcolor4{background-color:#9CB7C9;}
.backcolor5{background-color:#83A5BC;}
.backcolor6{background-color:#5986A6;}
.backcolor7{background-color:#43657C;}
.backcolor8{background-color:#2C4353;}
.backcolor9{background-color:#162129;}
.backcolor10{background-color:#000000;}

.bordercolor0{border-color:#FFFFFF;}
.bordercolor1{border-color:#E6EDF1;}
.bordercolor2{border-color:#CDDBE4;}
.bordercolor3{border-color:#B4C9D7;}
.bordercolor4{border-color:#9CB7C9;}
.bordercolor5{border-color:#83A5BC;}
.bordercolor6{border-color:#5986A6;}
.bordercolor7{border-color:#43657C;}
.bordercolor8{border-color:#2C4353;}
.bordercolor9{border-color:#162129;}
.bordercolor10{border-color:#000000;}

.fontstyle0{font-size:10px;}
.fontstyle1{font-size:11px;}
.fontstyle2{font-size:11px; font-weight:bold;}
.fontstyle3{font-size:12px;}
.fontstyle4{font-size:12px; font-weight:bold;}
.fontstyle5{font-size:14px; font-weight:bold;}
.fontstyle6{font-size:16px; font-weight:bold; text-decoration:none;}
.fontstyle7{font-size:18px; font-weight:bold; text-decoration:none;}
.fontstyle8{font-size:20px; font-weight:bold; text-decoration:none;}
.fontstyle9{font-size:22px; font-weight:bold; text-decoration:none;}
.fontstyle10{font-size:24px; font-weight:bold; text-decoration:none;}
.bordersolid {
     border-style:solid;
     border-width:1px;
}


Note the custom class bordersolid that applies all border styles, except the color. All applications added you your page will use these classes in this manner, and you can use these elements in your design any way you like.

Example:

say I want a table cell with a light background color (backcolor2), a dark border (bordercolor8), and a dark colored large text (forecolor8 fontstyle6) my code would look like this:

<table>
  <tr>
    <td class="backcolor2 bordercolor8 forecolor8 fontstyle6" style="border: 1px solid;">
      Hello World!
    </td>
  </tr>
</table>