SharePoint Config

Ari Bakker's thoughts on customising and configuring SharePoint

Customising the RichHtmlField Styles Menu

with 6 comments

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

Post to Twitter Post to Delicious Post to Digg Post to Reddit Post to StumbleUpon

Written by Ari Bakker

May 2nd, 2007 at 7:56 am

6 Responses to 'Customising the RichHtmlField Styles Menu'

Subscribe to comments with RSS or TrackBack to 'Customising the RichHtmlField Styles Menu'.

  1. 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.

    Trace

    27 Mar 08 at 6:54 pm

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

    Becker

    26 Mar 08 at 9:32 pm

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

    Robert

    15 Aug 07 at 12:23 pm

  4. This is not working. I have tried it and myStyle does not appear in Styles menu. Any help?…

    Jim

    25 Nov 08 at 4:29 pm

  5. Where we can modify this

    Could you please explain me with details

    Shaik

    21 Dec 10 at 9:52 pm

  6. @Shaik the properties on the RichHtmlField control need to be set inline in an aspx page and the CSS styles need to be either inline in the page or in an externally referenced css file that is registered on the page or in the masterpage

    Ari Bakker

    4 Aug 11 at 10:20 am

Leave a Reply

*