Custom Styles for SharePoint 2010 Rich Html Field

October 27 2010 100 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:


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:
  -ms-name:"my level 1 heading";

Step 2 – add the styles to the tag:

    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:


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):
    -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.:

  -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: 14% [?]

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

  17. I’m trying for the DirecTV App.

  18. So it recommends downloading the AppBugs app , which will detect the
    apps on your device that can be simply hacked.

  19. Melba says:

    Thanks , I’ve recently been searching for info about this subject for ages and yours is
    the best I’ve found out so far. But, what concerning the bottom line?
    Are you certain concerning the supply?

  20. webcam porno says:

    Remember to only allow applications that you trust, and just because it sounds good,
    don’t mean it’s the best application out there. Others say that in general people are lazy and don’t want the work
    involved in video communication as you have to pay attention to the person you are talking to especially when they are talking.
    Regardless of your perspective on this, I suggest you look for a Liseum near you, sometime
    in the very near future.

  21. Milo says:

    These dresses are consequently nicely suited to Muslim women in Malaysia.

  22. Joyce says:

    Physical stamina.

  23. Leif says:

    There may be one unconventional (at least in my kitchen) ingredient on this sauce, which you’ll absolutely be happy to skip,
    and that’s the liquid smoke.

  24. Melisa says:

    Extremely beneficial in price, service & honesty.

  25. A flower arrangement from Bonnie Brae Flowers, Inc.

  26. So there are not any low-cost motels in England, as there are within the U.S.
    They do have Holiday Inns and Travelodges, however
    their prices are outrageous.

  27. Feed pets inside or remove their food after having a meal.
    This will simply have more bees in your attention. So
    how to proceed if faced with a pest control problem.

  28. Wow, you are a very spiffy person. What do you do for an encore?

  29. hey says:

    Hi my friend! I want to say that this article is amazing, nice written and come with approximately all vital infos. I would like to look extra posts like this .|

  30. read more says:

    I’d like to find out more? I’d love to find out some additional information.|

  31. Christena Garrett says:

    Nice post , Speaking of which if people are looking for a NYC RPIE-2010 Instruction , my friend saw a fillable version here 2010 rpie form.

  32. Hurrah! At last I got a blog from where I be able to truly take useful data concerning my study and knowledge.|

  33. Excellent Webpage, Keep up the wonderful job. Appreciate it.|

  34. N/A says:

    Thank you for the awesome article! Very engaging indeed. I’ve been trying to lose weight for the past few years and couldn’t lose a single pound, then one day, I saw this site on yahoo, I was quite shaky at the start but decided to joined the program. Just recently, I’ve lost around 10 kg from it and I feel much happier than before. If anyone is trying to lose fat or in the same position like me before, I suggest using HealthDietKing.

  35. Thanks a ton for sharing this neat web site

  36. Greetings, great internet site you’ve got right now

  37. Large-scare program of plastic extruders can reduce creation fees.
    The decision to purchase products from this company is a bold decision that will bring to you many advantages.
    The plastic extruder consists from the extrusion device,
    the extrusion and pressing system, the transmission system and the heating and cooling

  38. 洗濯機の設置される場所というのは、家の中でも一番湿気のこもる場所であることが多く、それにまた、洗濯機からの排水溝から水漏れが起こると大変ですから、換気や、水漏れの対策はなるべくちゃんと行っておいた方が良いです。



  39. learn more says:

    We’re a bunch of volunteers and starting a brand new scheme in our community.
    Your website offered us with valuable information
    to work on. You have performed an impressive process and our whole neighborhood can be thankful to you.

  40. I got here from twitter well done on an excellent social media

  41. Stars says:

    With havin so much content do you ever run into any problems of plagorism or
    copyright infringement? My site has a lot of completely unique
    content I’ve either authored myself or outsourced but it looks like a lot of it is popping
    it up all over the web without my authorization.
    Do you know any solutions to help protect against content
    from being ripped off? I’d genuinely appreciate it.

  42. Grace Jones says:

    brilliant use of vocabulary inside the writing, it actually did help when i was reading

  43. At the least it’s more informative than one of these reality
    TV stars, kim who? Joey what?

  44. Harper Evans says:

    I dislike reading extensive articles, simply as i’ve got some dislexia, but i really loved
    this article

  45. love spell says:

    Hi there,I check your new stuff named “Custom Styles for SharePoint 2010 Rich Html Field | SharePoint Blues” regularly.Your story-telling style is awesome, keep doing what you’re doing! And you can look our website about love spell.

  46. minecraft says:

    Hello, I want to subscribe for this web site to obtain most up-to-date updates,
    so where can i do it please assist.

  47. I personally like your post, you have shared good article. It will help me in great deal.

  48. It’s truly a nice and helpful piece of info.
    I am satisfied that you shared this useful info with
    us. Please stay us informed like this. Thank you for sharing.

  49. If you are going for finest contents like me, only go to see
    this web site everyday as it offers feature contents, thanks

Leave a Reply