HTML Editor/ Rich Text Editor Style Customization in SharePoint Ribbon

Hi All,

In this post I am explaining you how to customize the default markup styles in HTML Rich Text Editor of SharePoint 2010 Ribbon. We can change or remove the existing styles and as well as we can add a new custom style . By default we will get these styles from the Mark up Styles Button in the Rich Text Editor pane (Ribbon) as shown below.

Here I am removing the default style i.e Heding2 Style.For this go to the style sheet which you are using for the site (by default COREV4.CSS)

This will be located under the path

C:\Program Files\Common Files\Microsoft Shared\Web Server Extensions\14\TEMPLATE\LAYOUTS\1033\STYLES\Themable

Open COREV4.css and find the class ms-rteElement-H2 and remove it

H2.ms-rteElement-H2

{
-ms-name:"Heading 2";
}
.ms-rteElement-H2
{
font-size:1.3em;
font-weight:normal;
}

Now save it and check the site, the Heading 2 is removed

In the similar way If we want to add a new style (our custom style)

H4.ms-rteElement-H4mystyle
{
-ms-name:"MY CUSTOM STYLE";
}
.ms-rteElement-H4mystyle
{
font-size:15px;
font-weight:bold;
color: red;
}

Here I added a style with the properties like font-size of 15px ,font-weight bold and forecolor red. I added this class under CallOut 4 class. So that will be appear under callout4 style as shown with the specified styles like this