Adding your custom styles in your SharePoint 2010 Rich Html Editor

This blog post describes how to add a custom styles in your Rich Html Editors.

The new style will appear when editing e.g. a wiki or site page in the Markup-Style dropdown:

 

 

Or in the Table-Style drop down:

 

1: Create the style
Add CSS file to managed folder /layouts/Namespace/wiki.css

Example headings (Markup-Style dropdown):

H1.ms-rteElement-MyH1
{
    /* This name will be displayed in the drop down */
    -ms-name: "My heading 1";
}
.ms-rteElement-MyH1
{
    background-color: #597087;
    color: #ffffff;
}

Example tables (Table-Style drop down) - Table with coloured header row and zebra stripes:

.ms-rteTable-10,
.ms-rteTableHeaderFirstCol-10,
.ms-rteTableHeaderLastCol-10,
.ms-rteTableHeaderOddCol-10,
.ms-rteTableHeaderEvenCol-10,
.ms-rteTableFirstCol-10,
.ms-rteTableLastCol-10,
.ms-rteTableOddCol-10,
.ms-rteTableEvenCol-10,
.ms-rteTableFooterFirstCol-10,
.ms-rteTableFooterLastCol-10,
.ms-rteTableFooterOddCol-10,
.ms-rteTableFooterEvenCol-10,
TD.ms-rteTable-10,
TH.ms-rteTable-10,
.ms-rtetablecells
{
    /* This name is displayed in the drop down */
    -ms-name:"Table Style 4 - Zebra stripes";
    border-left: none;
    border-right: none;
    text-align:left;
    line-height:2;
    vertical-align: top;
    padding:2px;
    padding-left: 5px;
}
.ms-rteTableHeaderFirstCol-10,
.ms-rteTableHeaderLastCol-10,
.ms-rteTableHeaderOddCol-10,
.ms-rteTableHeaderEvenCol-10
{
    background-color: #b5c1ce;
    color: white;
    border-top: solid #D5DCE3 1px; 
    border-bottom: solid #D5DCE3 1px;
}
.ms-rteTableFooterFirstCol-10,
.ms-rteTableFooterLastCol-10,
.ms-rteTableFooterOddCol-10,
.ms-rteTableFooterEvenCol-10
{
    font-weight: bold;
    border-top: solid #D5DCE3 2px; 
    border-bottom: solid #D5DCE3 2px;
}
.ms-rteTableFirstCol-10, 
.ms-rteTableLastCol-10
{
    font-weight: bold;
}
.ms-rteTable-10 tr.ms-rteTableOddRow-10 {
 background-color: #eee;
}
.ms-rteTable-10 tr.ms-rteTableEvenRow-10 {
 background-color: #fff;
}

2: Add Css to master page or default page layout

<SharePoint:CssRegistration ID="CssRegistrationWiki" 
   name="/_layouts/Namespace/wiki.css"  After="corev4.css" runat="server"/>3: 

It is not possible to remove any existing table or heading styles. You can change existing style or add new styles, but not delete. Also, it is not possible to change the name of an existing style.

A common thing you would like to do is change the default table style, this can be done by using "-default" instead of "-10" in the style selectors in the example above. But remember that the name of the default table style will never be changed.

There is a way to do this but it requires you to add a parameter every place the "PublishingWebControls:RichHtmlField" field is used, see this blog post at sharepoint blues.