Adding Custom Styles to Ribbon’s Styles dropdown

Cool part about SP2010 is that as soon as it sees styles in the custom CSS file, it will add it to the Style dropdown, I made a quick documentation for a colleague so I thought would blog it as well.

You see the “Styles” in the Ribbon that is where I want to add my custom styles

This is a 2 step process:

1. All the custom styles in the custom css file should has the prefix .ms-rtestyle- and the value specified in the –ms-name: attribute will be displayed in the above dropdown



.ms-rteStyle-header {

-ms-name:"My Custom Header";

font-family: Calibri;

font-size: 19pt;

font-weight: normal;

color: #ef383f;

}



2. There are 2 ways to attach you Custom CSS file to the masterpage

Option 1 : Either specify the custom CSS file as an alternateCSS file by gong to CA\Site Settings\ Look and Feel\ Master Page ( you will have to activate the publishing feature for this option to be available)

OR

Option 2 : Just add a Link to the CSS file in the master page