Custom Sharepoint 2010 Ribbon Markup Styles

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 the following:

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

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:

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.

Note : 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.

Reference : Managing the Rich Text Editor CSS and the RTE Menus for the Wiki Pages of a SharePoint 2010 Team Site

Advertisements

Leave a Reply

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

WordPress.com Logo

You are commenting using your WordPress.com 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 )

Google+ photo

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

Connecting to %s