Telerik: RadEditor Change Content Background Color

When it comes to the Telerik RadEditor and the background color of the content within it you may run into some issues if your website’s layout and design incorporates a black background.
This is because the RadEditor, by default, takes the background color of the actual web page (body) as the color it uses for its content area. In order to override the content area of the RadEditor so that you have a clean white background and a black font you must add a Style element to the RadEditor’s markup which points to a Cascading Style Sheet (.CSS) file with the Body selector overridden to contain the colors you want.
Here is how you add the style to your RadEditor instance:
   

Here is what the content of the CSS file looks like to get a white background with black text:
body
{
    color: #000;
    background-color: #fff;
    padding:3px;
    background-image: none;
    margin: 0px;
    text-align: left;
}

7 thoughts on “Telerik: RadEditor Change Content Background Color

  • Hi,

    My home page site loads …/EditorOverride.css and the image disappears. that doesn't happens in other pages. Any idea of why DNN loads this css style in the home page and how to fix this?

    best regards

    Like

  • Hello,

    I am having an issue with the background color of this site – it is supposed to be black but it turned white when I was using a pluggin to change post background – I went to the style sheet to see if i could change it from there but I dont want to me with it.
    Thank you for your help!

    Like

  • I don't think this is a good solution as like this your background on your body is gone. But I have a background-image, is there no way you can disable the inheritance?

    Like

  • Thanks! I think that this is a usability defect. I could not find easily teh documentation indicating how to fix this problem until I read this port.

    Cheers!

    Like

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s