Adding Styles to Ribbon in SharePoint 2010

Within the ribbon, developers can customise and add their own styles to the ribbon.  These can be these used within the Content Editor WebPart for a SharePoint Publishing Page.

Refer to this screenshot – of the default ribbon (SharePoint 2010)


In order to add some styles to the dropdown above, the basic steps are :

  • Create a CSS file with the specific styles
  • Use a prefix style ‘name’ that is expected by SharePoint
  • Include reference to style sheet from Master Page

Time to crack open SharePoint Designer – and include some CSS+HTML tags.

The days of hating SharePoint Designer are over – it’s changed & matured now – a much (MUCH) nicer product than SPD-2007.

I’ve certainly been making sure to “give it another go”. 


Create CSS file

  • Open the SharePoint Site using SPD
  • Switch to the Style Library
  • Right click and click New > CSS
  • Change the file name – and then click “Edit file

Include CSS tags (for the styles you want)

  • Include CSS tags with the necessary formatting.
  • Make sure the prefix is identical to that as expected by SharePoint – as below.    [ IMPORTANT ! ]
  • MUST BE  ms-rteStyle-XXX
  • For Example, I’ve added the following :

  -ms-name:"This is a New Title";
  -ms-name:"Another One To Choose";

  • Save the file – eg. webEditing.css

Include in Master Page

Now need to include a reference to the CSS file within the Master Page

  • Within SPD, expand the _catalogs folder
  • Choose the masterpage folder
  • Find the specific Master Page you’re using
  • Add a tag for the CSS

<link rel="stylesheet" type="text/css" href="/Style%20Library/webEditing.css" />

Try It Out

After you check-in the Master Page – and new CSS file, the new styles will be included along with the OOTB styles :



NB. For SharePoint 2007, the prefix tag to use was :


This has been changed for SharePoint 2010 – and is now :



Hope that helps ! 


13 thoughts on “Adding Styles to Ribbon in SharePoint 2010

  1. Alex October 6, 2010 / 10:49 pm

    I’ve did the exact steps described in the article but for some reason the Style ribbon it’s just inactive. Am I doing something wrong? How can i make it active? Any help would be much appreciated.


  2. Hannah Swain October 17, 2010 / 8:04 pm

    Whle testing, I noticed that you can also include the CSS in the Alternative CSS: the ribbon will pick up the new style. Not so useful for long term, but great for testing.


  3. trikks November 29, 2010 / 6:11 pm

    Great, thanks a lot!


  4. sunny June 3, 2011 / 10:34 pm

    Thanks for Sharing.

    But how can we replace OOB one with custom one.

    Suppose in Markup-Styles, I don’t want to show all OOB: Heading 1, Heading 2, Heading 3, Heading 4, Color Heading 1, …so on.

    I just want to show Heading 2, Heading 3, Horizontal Rule, Paragraph, Callout 1, Callout 2 in dropdown with my custom styles.

    One more thing, there a property called as “prefixstylesheet” for Rich-HTML Editor Publishing Control, but I want similar property for Content editor webpart, so I can use in Page Layout or somewhere else in stylesheet to hide the unwanted dropdown items.

    How can I hide only A-Styles button completely?


  5. Lio July 15, 2011 / 7:03 pm


    Not a solution but to restrict styles, why don’t you duplicate the mark up styles for heading 3 and 4 so they are the same.
    I am trying to find the same thing and am trying to find a way to only show 5 corporate colors in the ribbon rather than the whole spectrum of colours provided in core.css.

    good luck


  6. UK Plumbers April 3, 2012 / 9:49 am

    I have a similar problem, I’ve created a new stylesheet which I’ve linked to via the master page and when I change the colour of the #s4-ribbonrow because it’s styled in the corev4.css it ignores my changes in my new stylesheet and I know it’s not a good idea to edit the core stylesheet at all due to updates etc. Anyone know what I’m doing wrong?


  7. Manoj April 12, 2013 / 10:53 am

    thanks, this post helped me.


  8. dahey January 29, 2014 / 4:25 pm

    I have an odd problem…
    When I follow your directions everything works as expected in edit mode, when I save and close the changes don’t get applied. Looking at the rendered HTML code in edit mode I get a tag without an html element like this

    When I save and close I noticed that the text becames a text node with no P wrapper.



  9. football August 22, 2014 / 9:57 am

    That brings us to quite possibly the most intriguing
    match-up to that point of the season when Oregon comes
    to Rice-Eccles. The advent from the internet has dramatically changed the way in which bets are placed on football or soccer.

    In a very short time he built a very, very thorough roster that can beat you
    in a number of ways.


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s