Skip to Main Content

UPDATE Avtex is now TTEC Digital. Visit our new website →

Remove default text styles from SharePoint 2010 dropdowns

In my article on custom rich-text-editor (RTE) styles in SharePoint 2010, I noted that while it's easy to add styles, or to wipe out all the default styles and replace them with your own, it's not easy to modify the list of default styles -- Remove a few but keep most of them.

Indeed, the simplest way to do that is to copy all of the default styles into your custom RTE stylesheet, assign them a new prefix, and then delete the ones you don't want. This is both time-consuming in development and code-heavy on the client side -- nearly all the RTE styles get loaded twice (the default files, plus your custom copies), slowing down your pages.

So what's the alternative?

There is a way, using CSS, to hide individual default styles in the Style and Markup menus. It's not perfect, as you'll see below; but it works in most cases.

1. Make sure your browser has a DOM inspector installed (I'll use Firebug, an easy-to-use plugin for Firefox, in this example).

2. Go to the menu you want to alter (We'll use the Style menu for this example).

Screenshot: RTE Stylesheet-1

3. Click on the menu to bring up the dropdown, and right-click to inspect the style you want to hide. (Unlike most of the ribbon, the dropdowns can be directly inspected with Firebug).

Screenshot: RTE Stylesheet-2

You'll see an <a> tag with an ID something like this:

Ribbon.EditingTools.CPEditTab.Styles.Styles.Menu.Styles.TextStyle6-Menu

You can use that ID to hide the entry with CSS.

The catch

Yes, there's a catch. Actually, two of them:

1. See all those periods in the ID? They need to be escaped with backslashes in your CSS. So the style to hide the above is this:

#Ribbon\.EditingTools\.CPEditTab\.Styles\.Styles\.Menu\.Styles\.TextStyle6-Menu {
 display:none;
}

2. This ID merely specifies the order of the item in the menu, not the underlying style. In the above example, we're just hiding the sixth menu item. If the order of styles changed for some reason, the above CSS would end up hiding the wrong menu item. Luckily, these are default styles: they always display first in the menu, and in the same order. So this shouldn't be a problem unless some future upgrade to SharePoint alters the default styles.