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.
Default Markup Styles
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.
Our New Markup Styles
