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
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
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:
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
-ms-name:Blue Heading 1;
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
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.
This article mentions screenshots, but no screenshots are visible. On my browser, I show "Error on page" meaning that all items were not able to be loaded to this page. Please fix the page so that it makes sense to those of us referencing it.
Hi Rosalie, Thank you for sending me this feedback. Before publishing these articles we make sure they are displaying correctly in 3 different browsers - IE, Google Chrome, and Firefox. I have checked each browser and the article is displaying the screenshots. Can you tell me which browser you are using?
The problem with the images is that they are hosted on public.bay.livefilestore.com which is considered a malware site and doesn't make it through enterprise class web filters--thus they are blank for many users. Maybe you could find another site to host them...
yep - same problem here .. no pictures
thats great, is there also a way of changing the values in the font-size dropdown to force editors to use a pre-defined set of font sizes i.e. 1em, 1.2em, 1,3em etc instead of pixels? I am trying to implement changes that make my site more accessible.
Why does Microsoft give us such a short list of fonts, and boring at that? Is there an easier way to increase this list besides changing the CSS?