Custom Styles for SharePoint 2010 Rich Html Field

October 27 2010 67 comments

A typical requirement from a client is to be able to incorporate their own custom styles for the Rich Html Field. Allowing their public relations department to apply nice text formating for paragraphs with some Comic Sans Hotness might not be the best practice in here, so let’s be careful out there. The best scenario is only to allow custom formatting for headings, paragraphs and maybe a few different table styles but let’s go!

First, open up the page layout containing the HTML editor and add PrefixStyleSheet property for the RichHtmlField:

<PublishingWebControls:RichHtmlField
    id="Content"
    FieldName="PublishingPageContent"
    PrefixStyleSheet="my-rte"
    runat="server"
/>

Now, the default value for the property is ms-rte. We are going to redefine this to my-rte. Do not use any uppercase characters in the property value as apparently those wont work. Deploy the page and open it in edit mode to see the desired effect. The styles collections are now empty in the Ribbon.

We now have to define our own styles prefixed with the string my-rte. I’d suggest that you put these style declarations in a separate stylesheet to avoid javascript errors caused by complicated and hard-to-parse stylesheets. Let’s name our new stylesheet rte.css and add a few declarations there.

The Markup Collection

Let’s say I want to have an option to add a level 1 heading or an H1 tag for the given page via the Markup Styles dropdown list:

Step 1 – introduce the tag:

H1.my-rteElement-H1
{
  -ms-name:"my level 1 heading";
}

Step 2 – add the styles to the tag:

.my-rteElement-H1
{
    font-size: 150%;
}

Save the rte.css and make a reference for it in your master page, page layout or even use an alernative css. If you want your clients to be able to edit the styles themself, you could upload the rte.css in the Style Library and reference it there.

I have saved the file directly in the 14-hive /_layouts/my/ -folder and use a quick reference in the master page:

<SharePoint:CssRegistration
    ID="CssRegistration1"
    runat="server"
    Name="/_layouts/my/rte.css"
/>

Deploy and reload the page, fire up the edit mode and navigate to the ribbon where you can see your new style in action.

Your first custom style


Adding new elements is easy once you get to know the logic. Here’s an example of a parapgraph with nice rounded corners and superb font on modern browsers (note that I have combined the introduction and style values in one declaration):

P.my-rteElement-P
{
    -ms-name:"My CSS Rounded Paragraph";
    background: #808;
    color: #fff;
    border: 3px solid #f0f;
    text-transform: uppercase;
    text-align: center;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    box-shadow: 0 0 20px #000;
    -moz-box-shadow: 0 0 20px #000;  
    -webkit-box-shadow: 0 0 20px #000;
    padding: 10px;
    font: bold 2em Comic Sans MS;
}

Even Grammatical Errors Wont Silence the Comic of Sans

The Styles Collection

The Styles collection can be populated with the same way by changing the Element-suffix into Style ie.:

.my-rteStyle-MePinky
{
  -ms-name:"I am pink";
  color: #f0f;
}

This (P)arapgraph is Pink

Other Items

I’d suggest that you check out the default HTML editor styles in /Style Library/en-us/Themable/Core Styles/htmleditorstyles for quick reference how to style the other elements, including table styles on the Ribbon.

Popularity: 10% [?]

67 comments to “Custom Styles for SharePoint 2010 Rich Html Field”

  1. Alana says:

    Excellent weƅlog right here! Additionally your աebvsite so much up very fast!
    What host are yօu the use of? Can I get youг аssociate link for your host?
    I wish my site loaded up as ԛuicklƴ as yours lοl

  2. At this time I am ready to do my breakfast, when having my breakfast coming yet again to read more news.

  3. Magnificent goods from you, man. I’ve understand your stuff previous to
    and you’re just too excellent. I actually like what
    you have acquired here, certainly like what you are saying and the
    way in which you say it. You make it enjoyable and
    you still take care of to keep it wise. I can’t wait to read much more from
    you. This is really a great website.

  4. websites says:

    Admiring the time and effort you put into your blog and detailed information you offer.
    It’s awesome to come across a blog every once in a
    while that isn’t the same outdated rehashed material.

    Fantastic read! I’ve saved your site and I’m adding your RSS feeds to
    my Google account.

  5. Thanks for one’s marvelous posting! I truly enjoyed reading it, you are a great author.I will be
    sure to bookmark your blog and will eventually come back someday.
    I want to encourage you to ultimately continue your great work,
    have a nice morning!

  6. Benny says:

    That is a great tip especially to those new to
    the blogosphere. Short but very precise info… Appreciate your sharing this one.
    A must read post!

  7. Anja says:

    In order to send SMS messages from your corporate system by
    using SMPP connection you need some kind of SMS gateway software (for example Ozeki NG SMS Gateway).
    If you are a character lover, don’t miss the various Character Meet
    & Greet opportunities. Web Accession: Surfriding the is one of the smartphones writer favourite abilities.

  8. Adrian says:

    I really like looking through an article that can make people think.
    Also, thank you for permitting me to comment!

  9. BGM says:

    Where is the location of the page layout I need to edit? I want this to be a global fix.

  10. Yet again, you can do all this from the control panel.
    As people are looking at your work or after they make a purchase,
    ask their permission to be recorded for a website and ask if they would be kind enough to give you a testimonial.
    There are some spy cams on the market that are as small as
    a battery, while other cameras cam be hidden inside a pen.

  11. thank you! very useful article!

  12. Manuel SEO says:

    Hay una técnica reconocida, apoyada y soportada por Google y otros buscadores web
    para hacer que los spiders puedan indexar las imágenes que
    se cargan de forma asíncrona (AJAX).

  13. Bryan says:

    This situation fits tightly in to the geometry from the phone.
    The phone’s video recording capability iss via QVGA and at 15 frames pper second (fps).

    It enhances your decision-making competency and opens thhe line of communication making it irresistible for childrfen and
    the kids-at-heart.

  14. But since the early 2000s, Morningwood has been equated with awesome
    rock music and an even more awesome live showcase of energy and chaotic revelry.
    However, you can be sure that many look forward to the day that one
    is released. One of the main complaints longtime Sony fans have had with the Play –
    Station 4 is its lack of backwards compatibility.

  15. Subscription iis an economic web usage approach for obtaining the desired stuff
    from web. Instead of taking onne look at something annd defining iit as good or bad in the first five minutes, take somje time to process whatt the content is about.
    As of 2000, the franchise’sannual revvenue had cimbed to 10 million dollars.

  16. porn movie says:

    Hi there, yeah this post is actually nice and I
    have learned lot of things from it on the topic of blogging.
    thanks.

Leave a Reply