Hide items from SharePoint Ribbon using CSS

When you search for ways to hide items from the SharePoint Ribbon, such as the Font formatting block or the Edit HTML Source option, you will generally find a bunch of methods that involve fancy code and creating a new project in Visual Studio. One thing the Ribbon does have going for it is a ton of added classes and IDs to all the various options, buttons, links, blocks and components. You can target and remove elements from the Ribbon by just using CSS.

If your user isn’t loading CSS for some reason, you honestly have a bigger problem on your hands than if they can see the Bold option in the Ribbon. So set aside the programatic approaches and just add these simple snippets to your custom CSS file. This list is by no means comprehensive as there are so many options in the Ribbon, but it will get you going in the right direction and provide how you can target any item you wish in the Ribbon.

How to Hide a Ribbon Element

I use browser inspector tools constantly, especially with SharePoint, and this is no exception.  Break out your favorite browser and inspector tool and take a look at something in the Ribbon.  I prefer Firefox and Firebug, and use it pretty much exclusively for SharePoint client-side code exploration.

For this post I am using a SharePoint 2013 Enterprise Wiki site and targeting a rich text editor control, but these techniques can be applied to any site template in any SharePoint version.  The code snippets provided work for SharePoint 2010, SharePoint 2013 and SharePoint Online.

  1. Open a SharePoint web page and select to Edit the page, thus opening the Ribbon in all of its formatting options glory.
  2. Pick an option to target, I am going to look at the Font block in the Ribbon:
    Font area in the SharePoint 2013 ribbon
  3. Next I have to use the element picker feature in Firebug to view the related code.  If you right-click in the ribbon area you will not get an option to inspect the element.  So in whatever browser you are using, open the inspector and then use the picker tool to target the element.
    Firebug inspector focused on the Font area in the SharePoint 2013 Ribbon
  4. From there start walking up the chain in the code and you will see numerous classes and IDs assigned to nested SPAN tags within the unordered list (UL, LI) that makes up the Ribbon options.
  5. Depending on what you want to hide, find the right class/ID (for the Ribbon I typically target IDs) and create a new style statement in your custom CSS file that sets the display to none. Here are some code examples, make note of the “\” in the selectors.  Step 6 outlines why it is included.
    To hide the entire Font block:
    Hide Font block in Ribbon

    #Ribbon\.EditingTools\.CPEditTab\.Font {
    	display: none;
    }

    To hide the font face AND size:
    Hide font face and size selections in SharePoint ribbon

    #Ribbon\.EditingTools\.CPEditTab\.Font-Large-0-0 {
    	display: none;
    }

    To hide the ONLY the font face:Hide font face selection in SharePoint ribbon

    #Ribbon\.EditingTools\.CPEditTab\.Font\.Fonts-Medium {
    	display: none;
    }

    To hide the ONLY the font size:Hide font size selection in SharePoint ribbon

    #Ribbon\.EditingTools\.CPEditTab\.Font\.FontSize-Medium {
    	display: none;
    }
  6. With each of the examples above the periods in the ID values are  escaped, which is what the backward slashes are doing  in the style selector. Periods have a special meaning in CSS so without escaping the periods in the IDs, this method won’t work.

Using this technique you can target any number of things in the Ribbon area.  Here is a list of selectors to get you started:

Font Block

Entire font section:
#Ribbon\.EditingTools\.CPEditTab\.Font

Font face and size:
#Ribbon\.EditingTools\.CPEditTab\.Font-Large-0-0

Font face:
#Ribbon\.EditingTools\.CPEditTab\.Font\.Fonts-Medium

Font size:
#Ribbon\.EditingTools\.CPEditTab\.Font\.FontSize-Medium

Font formatting (all):
#Ribbon\.EditingTools\.CPEditTab\.Font-Large-0-1

Font formatting (Bold, italic, underline, strikethrough, sub/super script):
#Ribbon\.EditingTools\.CPEditTab\.Font-Large-0-1-0

Font formatting (Highlight and font color):
#Ribbon\.EditingTools\.CPEditTab\.Font-Large-0-1-1

Font formatting (Clear formatting):
#Ribbon\.EditingTools\.CPEditTab\.Font-Large-0-1-2

Bold:
#Ribbon\.EditingTools\.CPEditTab\.Font\.Bold-Small

Italic:
#Ribbon\.EditingTools\.CPEditTab\.Font\.Italics-Small

Underline:
#Ribbon\.EditingTools\.CPEditTab\.Font\.Underline-Small

Strikethrough:
#Ribbon\.EditingTools\.CPEditTab\.Font\.Strikethrough-Small

Subscript:
#Ribbon\.EditingTools\.CPEditTab\.Font\.Subscript-Small

Superscript:
#Ribbon\.EditingTools\.CPEditTab\.Font\.Superscript-Small

Highlight:
#Ribbon\.EditingTools\.CPEditTab\.Font\.FontBackgroundColor-Small

Font color:
#Ribbon\.EditingTools\.CPEditTab\.Font\.FontColor-Small

Paragraph Block

Entire paragraph section:
#Ribbon\.EditingTools\.CPEditTab\.Paragraph

Paragraph formatting (Bullets, numbering, outdent/indent, paragraph direction):
#Ribbon\.EditingTools\.CPEditTab\.Paragraph-Large-0-0

Paragraph formatting (Alignment options): #Ribbon\.EditingTools\.CPEditTab\.Paragraph-Large-0-1

Bullets and numbering:
#Ribbon\.EditingTools\.CPEditTab\.Paragraph-Large-0-0-0

Bullets:
#Ribbon\.EditingTools\.CPEditTab\.Paragraph\.Bullets-Small

Numbering:
#Ribbon\.EditingTools\.CPEditTab\.Paragraph\.Numbering-Small

Outdent and indent:
#Ribbon\.EditingTools\.CPEditTab\.Paragraph-Large-0-0-1

Outdent:
#Ribbon\.EditingTools\.CPEditTab\.Paragraph\.Outdent-Small

Indent:
#Ribbon\.EditingTools\.CPEditTab\.Paragraph\.Indent-Small

Paragraph direction (both):
#Ribbon\.EditingTools\.CPEditTab\.Paragraph-Large-0-0-2

Left to right:
#Ribbon\.EditingTools\.CPEditTab\.Paragraph\.LTR-Small

Right to left:
#Ribbon\.EditingTools\.CPEditTab\.Paragraph\.RTL-Small

Align left:
#Ribbon\.EditingTools\.CPEditTab\.Paragraph\.AlignLeft-Small

Align center:
#Ribbon\.EditingTools\.CPEditTab\.Paragraph\.AlignCenter-Small

Align right:
#Ribbon\.EditingTools\.CPEditTab\.Paragraph\.AlignRight-Small

Justified:
#Ribbon\.EditingTools\.CPEditTab\.Paragraph\.AlignJustify-Small

Style Block

Entire style section:
#Ribbon\.EditingTools\.CPEditTab\.Styles

Paragraph:
#Ribbon\.EditingTools\.CPEditTab\.Styles\.RibbonStyle0-Large,
#Ribbon\.EditingTools\.CPEditTab\.Paragraph\.ElementWithStyle\.Menu\.Styles\.Gallery tr:first-child > td:first-child /* Within drop down */

Heading 1:
#Ribbon\.EditingTools\.CPEditTab\.Styles\.RibbonStyle1-Large,
#Ribbon\.EditingTools\.CPEditTab\.Paragraph\.ElementWithStyle\.Menu\.Styles\.Gallery tr:first-child > td:nth-child(2) /* Within drop down */ (browser support)

Heading 2:
#Ribbon\.EditingTools\.CPEditTab\.Styles\.RibbonStyle2-Large,
#Ribbon\.EditingTools\.CPEditTab\.Paragraph\.ElementWithStyle\.Menu\.Styles\.Gallery tr:first-child > td:nth-child(3) /* Within drop down */ (browser support)

Heading 3:
#Ribbon\.EditingTools\.CPEditTab\.Styles\.RibbonStyle3-Large,
#Ribbon\.EditingTools\.CPEditTab\.Paragraph\.ElementWithStyle\.Menu\.Styles\.Gallery tr:first-child > td:nth-child(4) /* Within drop down */ (browser support)

Heading 4:
#Ribbon\.EditingTools\.CPEditTab\.Styles\.RibbonStyle4-Large,
#Ribbon\.EditingTools\.CPEditTab\.Paragraph\.ElementWithStyle\.Menu\.Styles\.Gallery tr:first-child > td:nth-child(5) /* Within drop down */ (browser support)

Heading Alternate (All):
#Ribbon\.EditingTools\.CPEditTab\.Paragraph\.ElementWithStyle\.Menu\.Styles\.Gallery tr + tr

Heading 1 Alternate:
#Ribbon\.EditingTools\.CPEditTab\.Paragraph\.ElementWithStyle\.Menu\.Styles\.Gallery tr + tr td:first-child

Heading 2 Alternate (browser support):
#Ribbon\.EditingTools\.CPEditTab\.Paragraph\.ElementWithStyle\.Menu\.Styles\.Gallery tr + tr td:nth-child(2)

Heading 3 Alternate (browser support):
#Ribbon\.EditingTools\.CPEditTab\.Paragraph\.ElementWithStyle\.Menu\.Styles\.Gallery tr + tr td:nth-child(3)

Heading 4 Alternate (browser support): #Ribbon\.EditingTools\.CPEditTab\.Paragraph\.ElementWithStyle\.Menu\.Styles\.Gallery tr + tr td:nth-child(4)

Text Styles (All):
#Ribbon\.EditingTools\.CPEditTab\.Styles\.Styles\.Menu\.Styles

Text Styles 1st Row:
#Ribbon\.EditingTools\.CPEditTab\.Styles\.Styles\.Menu\.Styles tr:first-child

Normal:
#Ribbon\.EditingTools\.CPEditTab\.Styles\.Styles\.Menu\.Styles tr:first-child td:first-child

Quote (browser support):
#Ribbon\.EditingTools\.CPEditTab\.Styles\.Styles\.Menu\.Styles tr:first-child td:nth-child(2)

Intense Quote (browser support):
#Ribbon\.EditingTools\.CPEditTab\.Styles\.Styles\.Menu\.Styles tr:first-child td:nth-child(3)

Emphasis (browser support):
#Ribbon\.EditingTools\.CPEditTab\.Styles\.Styles\.Menu\.Styles tr:first-child td:nth-child(4)

Intense Emphasis (browser support):
#Ribbon\.EditingTools\.CPEditTab\.Styles\.Styles\.Menu\.Styles tr:first-child td:nth-child(5)

Text Styles 2nd Row (browser support):
#Ribbon\.EditingTools\.CPEditTab\.Styles\.Styles\.Menu\.Styles tr:nth-child(2)

Reference:
#Ribbon\.EditingTools\.CPEditTab\.Styles\.Styles\.Menu\.Styles tr:nth-child(2) td:first-child

Intense Reference (browser support):
#Ribbon\.EditingTools\.CPEditTab\.Styles\.Styles\.Menu\.Styles tr:nth-child(2) td:nth-child(2)

Accent 1 (browser support):
#Ribbon\.EditingTools\.CPEditTab\.Styles\.Styles\.Menu\.Styles tr:nth-child(2) td:nth-child(3)

Accent 2 (browser support):
#Ribbon\.EditingTools\.CPEditTab\.Styles\.Styles\.Menu\.Styles tr:nth-child(2) td:nth-child(4)