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:
    color: #000;
    background-color: #fff;
    background-image: none;
    margin: 0px;
    text-align: left;

Published by

Tim Clark

Experienced Business Owner, Chief Information Officer, Vice President, Chief Software Architect, Application Architect, Project Manager, Software Developer, Senior Web Developer, Graphic Designer & 3D Modeler, University Instructor, University Program Chair, Academic Director. Specialties: Ruby, Ruby on Rails, JavaScript, JQuery, AJAX, Node.js, React.js, Angular.js, MySQL, PostgreSQL, MongoDB, SQL Server, Responsive Design, HTML5, XHTML, CSS3, C#,, Project Management, System Design/Architecture, Web Design, Web Development, Adobe CS6 (Photoshop, Illustrator)

7 thoughts on “Telerik: RadEditor Change Content Background Color

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


  2. Thanks! your code has helped me chang the editor background color to white.

    Thanks once again!


  3. 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!


  4. 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?


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



Leave a Reply

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

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

Facebook photo

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

Connecting to %s