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-rteStyle-MyNewTitle
{
  -ms-name:"This is a New Title";
color:red;
padding-left:30px;
}
.ms-rteStyle-MoreStuff
{
  -ms-name:"Another One To Choose";
color:yellow;
padding-left:130px;
}

• 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 :

ms-rteCustom

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

ms-rteStyle

===========================================================

Hope that helps !