Editor's Note: The following is a guest post by SharePoint Server MVP Becky Bertram as part of the MVP Award Program Blog's "MVPs for SharePoint" series. Becky Bertram is a SharePoint consultant living in the St. Louis area. She has been building web content management solutions for clients since 1999. Becky recently authored several chapters in the book “SharePoint 2010 Six in One”, including a chapter on developing and using Publishing sites in SharePoint 2010. You can read Becky’s blog at http://blog.beckybertram.com, her RSS feed at http://feeds2.feedburner.com/BeckyBertramsBlog, or follow her on Twitter at http://twitter.com/beckybertram.
If you’ve ever created a new Publishing Page in a SharePoint 2010 Publishing site, you might have noticed that when you place your cursor inside an HTML Field control on the page, a number of options become available to you in the ribbon for editing font styles within the control. As you can see from the screenshot below, you can edit the font used, its size, and its color. You can decorate the text by making it bold, italicized, underlined, highlighted, etc. You also can assign pre-determined styles to sections of your text by using the Styles or Markup Styles menus available on the right side of the ribbon.
Often times, graphic designers would like to limit the ability for content authors to assign font styles that deviate from an overall graphic direction for the site. For instance, if the colors of a site are blue and green, it might be disruptive to the look and feel of the site for a content author to add red and yellow text to a page. Luckily, as a developer, it’s possible to modify the properties of an HTML Field control in a Page Layout in order to limit the options available to content authors in the ribbon. Additionally, it’s possible to add additional styles to the Styles and Markup Styles menus. This article will show you how.
The easiest way to see which properties are available to you for the HTML Field control is to open up a Page Layout using SharePoint Designer. Click on one of the RichHtmlField controls in Design View, and take a look at the Tag Properties task pane. (If the Tag Properties task pane is not visible, you can click on the View tab in the ribbon, and then select the Tag Properties pane from the Task Panes drop down menu.)
If you set the AllowFonts property to False, the entire Font section of the ribbon becomes disabled for content authors, like this:
In the same way, setting the AllowParagraphFormatting property to False disables the paragraph indentation and justification buttons in the Paragraph section of the ribbon; setting the AllowStyles property to False disables the Styles menu, and setting the AllowTextMarkup property to False disables the Markup Styles menu. If all of these properties were set to False, the ribbon would look like this:
It’s possible also to turn off just one button or set of buttons in the ribbon, without disabling an entire section of controls. For instance, you might not want content authors to be able to select a specific font and font size for their text because you would prefer for the style assigned to the control in the page’s cascading style sheet (CSS) to take effect instead. If that’s the case, you can disable the font drop down menu and font size menu by setting the AllowFontsMenu property to False. However, if you would like even more granular control, you can disable just the “theme” fonts or just the “standard” fonts available in the font drop down menu by setting the AllowThemeFonts or AllowStandardFonts properties to False. In this screen shot, the AllowStandardFonts property is set to False.
Although you might want the font styles in your HTML Field control to default to the style you specified in your CSS file, it’s nice to be able to provide content authors with a certain degree of freedom to assign various styles within the page, such as applying headings to sections of text, or highlighting particular paragraphs. The beauty of providing options in the Styles and Markup Styles menus is that you can provide content authors with these sorts of options, while still dictating their styling. For instance, you can give a content author the ability to add a heading to a page, but you can pre-define the heading style so that it uses 14 pixel high blue Arial.
Too add a new item to the Styles menu in the ribbon, simply add a new class to (either directly to the Page Layout or to a cascading style sheet that is being referenced by your Page Layout or Master Page), and prefix the class with .ms-rteStyle-. For instance, to add a new item to the Styles menu called BlueBackground, you would create a new style with a name of .ms-rteStyle-BlueBackground. Next, add an attribute to the class called -ms-name: followed by the name that you want to show up in the Styles menu. (In our example, this would be “Blue Background”.) Here’s an example of what this might look like:
.ms-rteStyle-BlueBackground
{
-ms-name:Blue Background;
background-color: blue;
color: white;
}
Adding this class to your style sheet would add an item to the Styles menu like this:
If a content author applied this style to their text, it would look like this:
You can do something similar to add a markup style to the Markup Styles menu. In this case, prefix your class name with .ms-rteElement- (instead of .ms-rteStyle-.) Secondly, keep in mind that you can add an HTML element to your class, and the text in the HTML Field control will use that HTML element. For instance, to add a style called Blue Heading 1 to your Markup Styles menu, you could add the following class to your style sheet:
H1.ms-rteElement-H1Blue{
-ms-name:Blue Heading 1;
color: blue;
}
This would add an item to the Markup Styles menu like this:
If a content author applied the style to their control, the new font would use the <H1/> HTML markup tag, and style it to be the color blue, like this:
If you want to modify the existing Styles and Markup Style menu options, you can simply override the existing .ms-rteStyle- and .ms-rteElement- classes, which have been defined in the default SharePoint CSS file called COREV4.CSS. (If SharePoint was installed in the default location on your server and your default language is English, COREV4.CSS can be found at C:\Program Files\Common Files\Microsoft Shared\Web Server Extensions\14\TEMPLATE\LAYOUTS\1033\STYLES\COREV4.CSS.)
I hope this article has provided a starting point for you to experiment with ways to modify the fonts and styles that content authors can use in the ribbon when editing Publishing Pages in your SharePoint Publishing site. For more information, visit the MSDN article How to: Customize the HTML Editor Field Control.