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 !