Removing and Replacing Default SharePoint Ribbon Styles

SharePoint 2010 (and most likely future versions) provides default styles in the ribbon. You can see these with the “Styles” and “Markup Styles” sections of the ribbon. Here is an example of the “Markup Styles” section in action.

What if a client does not want the default ones in there? You could overwrite them in CSS, but most likely your client will not want all of the default ones available. The way to change this is to use the PrefixStyleSheet attribute on the RichHtmlField in your page layout. Here is an example of it in action using the default column for publishing content. (This is also where you can disable other parts of the ribbon using attributes such as AllowFonts=”False” to turn off the font selection option in the ribbon.)

<PublishingWebControls:RichHtmlField PrefixStyleSheet="mystyle"
FieldName="PublishingPageContent" runat="server">
</PublishingWebControls:RichHtmlField>

Changing the prefix for the custom styles will now remove them from the ribbon. Now using the following CSS, you can add selections to the “Styles” and “Markup Styles” section. (As a note, the default CSS prefix is “ms-rte”.)

/* Add to Styles Section */
.mystyleStyle-Bold   {
  -ms-name:"Bold";
  font-weight: bold;
}
/* Add to Markup Styles Section */
h3.mystyleElement-Title   {
  -ms-name:"Heading 3";
  font-size: 30px;
}

Now you can see your custom styles in each dropdown. Notice that the “Markup Styles” styles necessitate an element on the selector.

Using Custom Styles in Content Editor Web Parts

One of the caveats of this method is that it doesn’t work in content editor web parts. So, if a user were to try and add a content editor web part and edit the text, not only would they see the old default styles, but our custom ones would be gone. I thought that was just the way it would be until I found this post on the MSDN forums. In it, someone shares a bit of jQuery that allows us a similiar behavior on the content editor web parts as the publishing HTML fields.

jQuery(document).ready(function ($) {
/* Enable custom stylesheet prefix for CEWP */
ExecuteOrDelayUntilScriptLoaded(function() {
   $("div[RteRedirect]").each(function() {
      var id = $(this).attr("RteRedirect"),
      editSettings = $("#" + id);
      if(editSettings.length > 0 && editSettings[0].PrefixStyleSheet != 'mystyles') {
         editSettings[0]['PrefixStyleSheet'] = 'mystyles';
      }
   });
}, "sp.ribbon.js");
});