How to Replace or Remove HTML Editor styles in the Sharepoint 2010 Ribbon

Question

I want to replace the HTML Editor styles in the HTML Style dropdown on the editor ribbon with styles of my own creation. According to this MSDN article http://msdn.microsoft.com/en-gb/library/ms551040.aspx as soon as I start putting classes that begin with the pattern ms-rteCustom-XXXX(XXXX being a custom name) into CSS that's loaded in the page, the existing styles should be replaced. I would expect this to leave only my styles in the drop-down, however I can see all of the original Sharepoint styles, and then my styles.

Am I missing something in the documentation, or is it lying to me? As far as I can tell, the original styles come from the corev4.css that's also loaded by the master page, however as my CSS is loaded later, it seems like any styles already in the drop down should be cleared.

Here is one of the new/custom styles in the CSS I'm using;

H3.ms-rteElement-H3CompanyName
{
    -ms-name:"Heading 3";
}
.ms-rteElement-H3CompanyName
{
    font-family: Arial, Helvetica, sans-serif;
    font-size: small;
    font-style: normal;
    line-height: normal;
    font-weight: bold;
    font-variant: normal;
    text-transform: none;
    color: #000000;
}

Solution 1

It looks like the only way to remove elements from the Markup Style drop down list is to modify files in the main Sharepoint hive. A reset of IIS is probably a good idea after these changes, then ctrl-F5 to fully refresh what the browser is seeing.

This is not normally recommended as these files may change as part of a Sharepoint upgrade, however it seems to be the only way that reliably works.

To remove unwanted elements from the Markup Style dropdown, remove all CSS rules that affect classes named in this pattern .ms-rteElement-XXXX . Our own styles for use in this menu are added in one of our own style sheets.

There are four files that need to be modified, two copies of Controls.css and two copies of Corev4.css.

They are located as follows;

Controls.css 
C:\Program Files\Common Files\Microsoft Shared\Web Server Extensions\14\TEMPLATE\FEATURES\PublishingLayouts\en-us\Controls.css

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

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

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

Solution 2

The best way to remove the styles, assuming this is a publishing page, is to modify the control within your page layout.

<PublishingWebControls:RichHtmlField FieldName="PublishingPageContent" HasInitialFocus="True" MinimumEditHeight="400px" runat="server" PrefixStyleSheet="customPrefix"/>

By declaring a new PrefixStyleSheet it will remove all of the default styles so that you can only provide your own.

Solution 3

Rather than JavaScript, you can also use css to hide Markup Styles. For example, this is how to hide Heading 1s.

#Ribbon\.EditingTools\.CPEditTab\.Paragraph\.ElementWithStyle\.Menu\.Styles #ElementWithStyle0-Menu,
#Ribbon\.EditingTools\.CPEditTab\.Paragraph\.ElementWithStyle\.Menu\.Styles #ElementWithStyle4-Menu
    {display:none;}

Solution 4

I'm not sure where you've read that "as soon as custom styles are added, old ones are removed". The way I read the documentation, it correlates to my experience with this - that the custom styles are just added to the bottom of the dropdown list.

What you could do though, is to override the built-in ones with your custom style as well. Just use the exact same name as the OOTB styles and enter your own styles in the CSS file. Example: to override the style "Callout 1", add a rule for .ms-rteElement-Callout1 in your CSS and add your own styling there.

Another option is to write a JavaScript function and attach it to the ribbon resized event using

SP.UI.Workspace.add_resized(your_javascript_function_name);

Inside your function, you can use a jQuery statement to remove all (or the first X) elements from the dropdown list in the ribbon control.

View more solutions