SharePoint Customization Tip: Changing the Rich Text Editor Background

For those that have asked me how to do it via email/msn and to those that have been following the post on “SharePoint Gotchas” dealing with styling the Rich Text Editor, you will be pleased to know there is a solution, and a very easy one.

I first had this question via email and it later turned into several MSN conversations, none of which resulted in an answer, it was driving me crazy so I had to investigate it thoroughly. Huge thanks to my co-worker Lloyd Cotton for sitting down with me today to finally get to the bottom of this.

As with most things it turned out to be quite easy, but I’m not going to make it that easy on you! I had to suffer now it’s your turn! hehe – unless you want to skip to the end of course.

This post will guide you through the steps I went through to figure this out. While it’s not a very exciting read it can give you an idea of how to think from time to time when you are “really” stuck on how to customize something.

We know it’s getting classes from the theme, but it’s a pop-up window / control so getting to the source wasn’t so easy, there is no easy way to tell what class is being applied because there is no ‘easy’ way to see whats being rendered out. The only thing I knew from the beginning that for some reason it was inheriting the “BODY” properties.

After looking through the source that “opens” the Rich Text Editor however we find variables that we were able to track down (by skimming through all the .JS files) to CTP.JS which actually injects the theme into the Rich Text Editor window.

For anyone that has done any serious investigation of this customization you may realise that the functionality for the Rich Text Editor comes from the file HTMLEDIT.aspx. This is where the answer lies. Inside this file you can find exactly what class it’s using.

The DIV which surrounds the body where you type (in the rich text editor) has the class .ms-WPbody . Yes that is the answer to any RTE woes.

You can add things like background-color/image text-align:left etc etc to this class to affect the body of the document. There are a couple of other things that you need to take into account as well to properly customize the rich text editor.

.msWPbody p – This is a very important class which is applied each time you hit the enter key inside the RTE. You will want to make sure this has a “background-image/colour” that is the same as .ms-WPbody (unless you want to specify otherwise).

There is also .ms-WPbody H1, link etc etc.

So there you have it, the answer we’ve all been waiting for. (Or at least those that have been emailing me/leaving comments on this issue.)

You may also like...

2 Responses

  1. Isha says:

    Where should I change this class .. in Core.CSS?

    I am looking to change the RTE ‘s font color in blog Posts list. I am not sure where should I change this .ms-WPbody class.

    Please let me know the correct css name

    Thanks,

  2. Mark Kruger says:

    Glad you found your answer! :)

I would love to hear from you.

%d bloggers like this: