SharePoint 2010 Rich Text Editor

SharePoint 2010 allows for incredible site branding of content. This has always been a challenge in MOSS 07.

SharePoint 2010 as a seamless process of including specific style rules through a combination of the out-of-the-box "WYSIWYG" functionality and Custom StyleSheets.

Custom Style Sheet

I created a custom StyleSheet that is referenced in a master page template. This step is not necessary since you can simply include the stylehseet through the Alternate CSS URL when you select/configure the master page under Look and Feel section (Site Settings>Master Page).

SharePoint parses the StyleSheets and includes specific "ms-rte" class rules. The rules are devided by Functionality; Style, Element, Image, Position, Table. Depending on the rule name used after the "rte".

ms-rteStyle

Specifies a Style Rule

ms-rteElement

Specifies an Element Rule

ms-rteImage

Specifies an Image Rule

ms-rtePosition

Specifies a Position Rule

ms-rteTable

Specifies a Table Rule

In order for the style names to be available in the desired drop down selector you have to specify the "-ms-name" property in the class:
.ms-rteStyle-FooBar{
-ms-name: "Foo Bar";
}

This will include "Foo Bar" as a label in the Style Selector.

Element Rules

[element].ms-rteElement-[name]

Will specify styles for the Element Source Selector

Element rules are very concrete element specific rules.
This gives you complete control of what type of element you want rendered and what class name it should inherit.
If I wanted the Shadowed Box to render as a "DIV", I would simply specify the element (DIV) tag in the stylesheet along with the ms-rteElement rule:
DIV.ms-rteElement-ShadedBox{
-ms-name:"Shaded Box";
border: 1px solid #d7d7d7;
padding: 5px 10px;
background: #eee;
}

This rule is then available in the Markup Styles selection.

And will render the following:
<div class='ms-rteElement-ShadedBox'>Shaded Box</div>

Style Rules

.ms-rteStyle-[name]

Will classifiy rules for the Markup Styles Selector

Style rules are simply appending class names to any element that you choose in the "WYSIWYG" Editor.
For example, if you want a selected elment to inerhit a style that creates a shaded box around content:
.ms-rteStyle-ShadedBox{
-ms-name: "Shaded Box";
border: 1px solid #d7d7d7;
background: #eee;
padding: 5px 10px;
display: block;
}

After a quick browser refresh, this rule was available in the Style Selector. I am very excited about this. I know that this was available in MOSS 07, but it took some work around to get it to work, so we never deployed it. SharePoint 2010 implements this behavior exactly the way it should be.

Position Rules

.ms-rtePosition-[name]

Will classify rules for the Postion Selector (designed for images)

Image Rules

.ms-rteImage-[name]

Will classify rules specifically for the Image Selector

For Example, say we wanted an image with a dark orange border and a lighter orange background:
.ms-rteImage-OrangeBackground{
-ms-name: "Orange Background";
background-color: #f93;
border: 1px solid #c63;
padding: 6px;
}
Will Give you the following option:

Table Rules

Note that the name is very important in this context. You want to specify the same name for every cascading rule of the table.
For example if you start with:
.ms-rteTable-Foo.
Every cascasding class has to have the name Foo:

/*Table Rule */
.ms-rteTable-Foo{}

/* Header Row */
.ms-rteTable-Foo tr.ms-rteTableHeaderRow-Foo{}

/*First Header Col*/
.ms-rteTable-Foo td.ms-rteTableHeaderFirstCol-Foo{}

/*Last Header Col*/
.ms-rteTable-Foo td.ms-rteTableHeaderLastCol-Foo{}

/*Odd Header Col*/
.ms-rteTable-Foo td.ms-rteTableHeaderOddCol-Foo{}

/*Even Header Col*/
.ms-rteTable-Foo td.ms-rteTableHeaderEvenCol-Foo{}

/*Odd Row*/
.ms-rteTable-Foo tr.ms-rteTableOddRow-Foo{}

/*Even Row*/
.ms-rteTable-Foo tr.ms-rteTableEvenRow-Foo{}

/*First row Col*/
.ms-rteTable-Foo td.ms-rteTableFirstCol-Foo{}

/*Last row Col*/
.ms-rteTable-Foo td.ms-rteTableLastCol-Foo{}

/*Odd row Col */
.ms-rteTable-Foo td.ms-rteTableOddCol-Foo{}

/*Even Table Col*/
.ms-rteTable-Foo td.ms-rteTableEvenCol-Foo{}

/*Footer Row*/
.ms-rteTable-Foo tr.ms-rteTableFooterRow-Foo{}

/*First Footer Col*/
.ms-rteTable-Foo td.ms-rteTableFooterFirstCol-Foo{}

/*Last Footer Col*/
.ms-rteTable-Foo td.ms-rteTableFooterLastCol-Foo{}

/*Odd Footer Col*/
.ms-rteTable-Foo td.ms-rteTableFooterOddCol-Foo{}

/*Even Footer Col*/
.ms-rteTable-Foo td.ms-rteTableFooterEvenCol-Foo{}

.ms-rteTable-[name]

Will classify rules specifially for the Table Selector

tr.ms-rteTableHeaderRow-[name]

Is a cascading rule for the Header Row of the parent class.

td.ms-rteTableHeaderFirstCol-[name]

Is a cascading rule for the first header table cell

td.ms-rteTableHeaderLastCol-[name]

Is a cascading rule for the last header table cell

td.ms-rteTableHeaderOddCol-[name]

Is a cascading rule for every Odd header table cell

td.ms-rteTableHeaderEvenCol-[name]

Is a cascading rule for every Even header table cell

tr.ms-rteTableEvenRow-[name]

Is a cascading rule for every even table row

tr.ms-rteTableOddRow-[name]

Is a cascading rule for every odd table row

td.ms-rteTableFirstCol-[name]

Is a cascaing rule for the first table column

td.ms-rteTableEvenCol-[name]

Is a cascading rule for every even table column

td.ms-rteTableOddCol-[name]

Is a cascading rule for every odd table column

td.ms-rteTableLastCol-[name]

Is a cascading rule for the last table column

tr.ms-rteTableFooterRow-[name]

Is a cascading rule for the footer row

td.ms-rteTableFooterFirstCol-[name]

Is a cascading rule for the first footer column

td.ms-rteTableFooterEvenCol-[name]

Is a cascading rule for every even footer column

td.ms-rteTableFooterOddCol-[name]

Is a cascading rule for every odd footer column

td.ms-rteTableFooterLastCol-[name]

Is a cascading rule for the last footer column