Customize Styles and Markup Styles Menus in the SP Ribbon

Styles and Markup Styles menus of SharePoint 2010 ribbon are populated dynamically by the client side code using Microsoft Ajax when we activate the Edit Mode of a page. Also they are populated based on the CSS styles that are available for the page.

How to Manage Styles Menu Items
Write CSS classes whose names have the prefix ms-rteStyle-XXXXX. Here XXXXX distinguishes different styles. “-ms-name” specifies the display name of the class within the Styles menu. Selecting this item will apply the styles corresponding to this CSS class to the Rich Text Editor content.

.ms-rteStyle-MyNormal
{
  -ms-name: "My Normal";
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12pt;
}
.ms-rteStyle-MyHighlight
{
  -ms-name: "My Highlight";
  color: #312a26;
  background-color: #fae032;
} 
.ms-rteStyle-MyComment
{
  -ms-name: "My Comment";
  font-style: italic;
}

How to Manage Markup Styles Menu Items
Write CSS classes whose names have the prefix ms-rteElement-XXXXX. Here XXXXX distinguishes different markup styles. “-ms-name” specifies the display name of the class within the Markup Styles menu. Selecting this item will apply the styles corresponding to this CSS class to the Rich Text Editor content. In here by specifying a HTML tag in the front of the class name (Ex: H1.ms-rteElement-OMyHeadline1) will nest the content with that HTML tag.

div.ms-rteElement-MyNormal
{
  -ms-name: "My Normal";
  font-size: 12px;
  color: #5a5a5a !important;
  font-weight: normal;
}
H1.ms-rteElement-OMyHeadline1
{
  -ms-name: "My Headline 1";
  font-size: 22px;
  color: #774d77;
  font-weight: normal;
  letter-spacing: 1.5px !important;
}
H2.ms-rteElement-MyHeadline2
{
  -ms-name: "My Headline 2";
  font-size: 18px;
  color: #774d77;
  font-weight: normal;
  letter-spacing: 1.5px !important;
}
div.ms-rteElement-MyBold
{
  -ms-name: "My Bold";
  font-size: 12px;
  color: #5a5a5a !important;
  font-weight: bold !important;
}
div.ms-rteElement-MyCallout1
{
  -ms-name: "My Callout 1";
  color: #660000;
  background-color: #fef4e4;
  float: left;
  border: 1px solid #FD9F08;
}
P.ms-rteElement-MyParagraph
{
  -ms-name:"My Paragraph";
  color: #576170;
}

“My Headline 2” style will be applied in this way. Text content including the DIV element is nested within a H2 tag.


Difference between Styles and Markup Styles
Styles:

• Nest the text in a tag with the style class if the text is not already inside an HTML tag
• Just add the class to the current HTML tag if this tag is not a tag
• Replace the class of the HTML tag if this tag is a tag
• Remove the html tag if the same style is applied a second time (this is a way of removing a Style)

Markup Styles:

• Nest the text and its HTML tag within the html tag specified in the style if the tag to nest is a element
• Replace the current tag if it is not a element
• Remove all the styles for the children elements
• Remove the html tag if the same style is applied a second time (this is a way of removing a Markup style)