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)

31 thoughts on “Hide items from SharePoint Ribbon using CSS”

  1. Nice article but i question about the efficiency of the process, since SharePoint already have no css process for this type of tasks and how hard will be a user/dev/admin to implement this, this take me less of 1 minute to make the change using OofBox Objects and with css need to add css identify ribbon id, etc etc > 1 minute.

    1. It all comes down to what works best for you and your organization. For many the process you described would take a long time and CSS would be less than a minute for them to implement. 😉

        1. For future folks visiting the blog, please note that this is a 3rd party tool that you pay for and add to SharePoint. The poster works for the company. To custom develop a solution like this would be time intensive. CSS only solutions do not require SharePoint Designer or master page edits, just to clarify for anyone wondering.

  2. How can I use this same concept to hide OOTB Table Styles. I am able to hide the entire Styles drop-down but I just need to be able to hide specific table formats in the drop-down list. Any help on this would be appreciated. Thanks.

    1. Every table style is wrapped in an anchor that has a unique ID. You just need to find the ID of the style(s) you want to remove and add it to the CSS. For example, to hide the “Table Style 1 – Clear” option you would use this:
      #TableStyle1-Menu {display: none;}

      All of the IDs follow the same pattern so you can just update the ID to reflect the styles you want to remove. So #TableStyle2-Menu, #TableStyle3-Menu, #TableStyle4-Menu, etc.

  3. Another question for you regarding table styles. How can I make it so that when a user clicks on the “First Column” in the predefined table format so that it doesn’t turn everything bold and it does indeed put a border on left? I have tried many things but can’t seem to figure out how to implement this. Thanks.

    1. It partly depends on the table style that is being applied and if “Header Row” is also checked. For example if the default table style is applied, First Column is checked and Header Row is checked, the applied CSS class is “ms-rteTableHeaderFirstCol-default”. If the table has ‘Table Style 7 – Accent 2’ applied and only First Column checked, then the “ms-rteTableFirstCol-5” class is applied. The easiest thing would be for you to use Firebug or a similar browser inspector tool to see what has been added to the code. As a side note I was not able to find an out-of-the-box table style that bolded the text, so there may be some other custom CSS added to your site that is affecting the table. A browser inspector tool can also help with finding that.

  4. Great article. I know the same can be done on List features in the ribbon (and the css hides work when the page is loaded), however if the user clicks on the list in a page, the list features in the ribbon are shown again – I think because they are re-shown by a script linked to the clicking of the table – any idea how to hide them permanently?

    1. I haven’t been able to duplicate this behavior yet. What have you hidden that is reappearing when you select something in the list?

      1. I was hiding the contents of the list and list item tabs that appear in the ribbon via the #Ribbon.List and #Ribbon.ListItem id’s. if I just did this by adding the CSS, whenever the different list CEWPs in the page were clicked they would show again. However in the end I resolved the issue by writing a script that removed the click events from the different list based CEWPs on the page and replaced them with a function that hid the #Ribbon.List and #Ribbon.ListItem id’s CSS display property (and then also the height of the ribbon etc.)

Leave a Reply

Your email address will not be published. Required fields are marked *