Overwrite or Hide OOB Markup Styles in SharePoint 2010 Ribbon

In a previous blog post I wrote how to provide customized styles for the SharePoint Rich Text Field, so that the “Styles” and “Markup Styles” dropdowns in the ribbon will contain brand compliant styles in addition to the OOB styles.

But there can be a requirement like we want to remove all or some of OOB styles and add custom styles. There are several ways we can achieve this task. One option is using jQuery we can catch the click event of the styles or markup styles dropdown and there we can hide the unwanted styles from the dropdown.

Approach explaining in this post is a completely CSS method. We simply find the id of each dropdown item and hide unwanted items using CSS.

Using developer tool bar of the browser, locate the markup style anchor tags and get the anchor tag ids. Ids are almost same but the number towards the end is incrementing. Here is how Styles drop down items look:

Here is how Markup Styles drop down items look:

We can hide items in Styles dropdown as below. Below code hide the first 2 OOB items in the dropdown.

/* ----- Hide OOB Ribbon Styles - Start ----- */

#Ribbon\.EditingTools\.CPEditTab\.Styles\.Styles\.Menu\.Styles

a[id="Ribbon.EditingTools.CPEditTab.Styles.Styles.Menu.Styles.TextStyle0-Menu"]

{

    display:none;

}

#Ribbon\.EditingTools\.CPEditTab\.Styles\.Styles\.Menu\.Styles

a[id="Ribbon.EditingTools.CPEditTab.Styles.Styles.Menu.Styles.TextStyle1-Menu"]

{

    display:none;

}

...

...

/* ----- Hide OOB Ribbon Styles - End ----- */

This is how we hide items in Markup Styles dropdown.

/* ----- Hide OOB Markup Styles - Start ----- */

#Ribbon\.EditingTools\.CPEditTab\.Paragraph\.ElementWithStyle\.Menu\.Styles

a[id="ElementWithStyle0-Menu"]

{

    display:none;

}

#Ribbon\.EditingTools\.CPEditTab\.Paragraph\.ElementWithStyle\.Menu\.Styles

a[id="ElementWithStyle1-Menu"]

{

    display:none;

}

...

...

/* ----- Hide OOB Markup Styles - End ----- */

Adding few custom Styles and Markup Styles in the ribbon.

/* ----- Styles - Start ------ */

.ms-rteStyle-BodyTextNormal {

  -ms-name: "Normal";

  font-family: Arial, Helvetica, sans-serif;

  font-size: 12px;

  color: #3e3e3e;

}

.ms-rteStyle-RegularArrowLink {

  -ms-name: "Regular Arrow Link";

  font-family: Arial, Helvetica, sans-serif;

  font-size: 12px;

  color: #1c3f95;

  background:url('/Style Library/Images/ar5.png') no-repeat;

  background-position:left center;

  padding-left: 15px;

}

.ms-rteStyle-RegularArrowLink a:hover {

  color: #236699;

  text-decoration: underline;

}

.ms-rteStyle-IntroductionParagraph {

  -ms-name: "Introduction Paragraph";

  font-family: Arial, Helvetica, sans-serif;

  font-size: 16px;

  line-height: 24px;

  color: #3e3e3e;

}

/* ----- Styles - End ------ */

/* ----- Markup Styles - Start ------ */

div.ms-rteElement-BodyParagraph {

  -ms-name: "Paragraph";

  font-family: Arial, Helvetica, sans-serif;

  font-size: 12px;

  color: #3e3e3e;

}

div.ms-rteElement-ThickHorizontalDivider {

  -ms-name: "Thick Horizontal Divider";

  border-bottom: 4px solid #f0f2f3;

  padding-bottom: 10px;

}

/* ----- Markup Styles - End ------ */

When hiding items from the styles dropdowns we can also use display name of the dropdown item as below. So the need to use developer tool bar to find out the ids can be avoided.

#Ribbon\.EditingTools\.CPEditTab\.Paragraph\.ElementWithStyle\.Menu\.Styles

a[title="Heading 1"]

{

    display:none;

}

But the drawback with this approach is, we cannot add a custom style with the same name as OOB item.