This blog has moved to www.sharepointconfig.com

May2

Customising the RichHtmlField Styles Menu

Categories: Customisation, Web Content Management, MOSS
This post shows how you can customise the list of styles that are available inside a RichHtmlField control in SharePoint 2007.
 
As I mentioned in an earlier post the RichHtmlField has several properties that you can set to restrict users from entering certain types of markup (images, tables, styles etc). You also have the ability to define the styles that are allowed. For example if you wanted the following styles...
  • Title
  • Sub-Title
  • Caption
  • Emphasis
  • Quote
...there are a couple of things you need to do.

1. Set the PrefixStyleSheet attribute to some custom name that we will prefix our styles with. For example I might use
<PublishingWebControls:RichHtmlField
    FieldName="PublishingPageContent"
    PrefixStyleSheet="myStyles"
    runat="server"/>
 
2. Add entries in one of the CSS style sheets that start with myStylesCustom- (note the word 'Custom' has been appended) that contain the style definition. For example:
 
.myStylesCustom-Title
{
 font-weight: bold;
 font-family: Georgia;
 font-size: 14pt;
 color: #aa0000;
}
.myStylesCustom-Sub-Title
{
    font-family: Arial;
    font-size: 10pt;
    color: #999999;
}
.myStylesCustom-Caption
...

Now we have a custom list of styles as follows:
 
Customised Rich Html Field
 
MSDN also has a good article on this. See How to: Customize the HTML Editor Field Control
 
 

Comments

On 16 Aug 2007 12:23, Robert said:

Is it possible to disable the styles menu? If so, how do i do that?

On 27 Mar 2008 10:32, Becker said:

I tried to do his example he did not function, you would be able to say where goes the css.

On 28 Mar 2008 07:54, Trace said:

I did not find what I was looking for here but I do know the answers to the above 2 questions; - yes it's possible to disable the styles menu altogether. There is an attribute called "DisableCustomStyles" you can set to true or false. - The css classes can be either inline in a page, in a master page or in an external css file. You must however link to the style sheet and not use the import method. Hope that helps someone.

On 15 Oct 2009 05:34, Ari said:

This blog has been moved to SharePoint Config. To view or comment on this article please head over to Customising the RichHtmlField Styles Menu.

Comments for this article are now closed.