Custom Sharepoint 2010 Ribbon Markup Styles

26 August 2010

If you're doing any sort of custom theming for Sharepoint 2010, and have been wondering how to modify the out-of-the-box styles provided by the "Markup Styles" button in the ribbon, take a look at this really useful blog post I came across today:

http://mosshowto.blogspot.com/2009/12/sharepoint-2010-wiki-styles.html

If you Firebug / View Source HTML'd the content, you would probably have worked out how it kind of worked - basically, you just need to overwrite a few css classes to replace the existing ones and add new css classes in the following format:

H1.ms-rteElement-H1B
{
-ms-name:'Colored Heading 1';
/* [ReplaceColor(themeColor:'Accent1')] */ color:#0072bc;
font-size:2em;
font-weight:normal;
}

Note the proprietary -ms-name property, and the use of the ReplaceColor goodness to integrate SP2010 themes into the stylesheet.

Unfortunately though, it looks like the only way to get rid of the out-of-the-box options is to remove the v4.css import (<SharePoint:CssLink runat="server" Version="4" >) from the master page, and make a custom copy that excludes the styles.

EDIT: As pointed out to me by someone else, an alternative to replacing the v4.css if you're only interested in modifying one or two of your Publishing HTML controls, you can specify the PrefixStyleSheet property which will replace the default set with the css style sheet you specify.

People interested can read a little more about it on MSDN), but in some cases it might be more efficient / easier to customize the v4.css instead of modifying every single Publishing HTML control field.

Tags: SharePoint 2010

Add a Comment

No Comments