Cannot change colour of Editor content area background

[Paul Robertson]

Hi there

I cannot work out how to change the background colour of my radEditor content area. I know about how I need to use a separate EditorCssFile in the markup for the editor, but I consistently find that the styles defined in that css file, although they are applied, are then overridden by the styles saved in WebResource.axd. I thought it was supposed to be the other way round? This is how things look when I check out the problem in Firefox with Firebug:

.reContentCell, .reContentCell iframe {

background-color:white;

}

in WebResource.axd
overrides

.reContentCell, .reContentCell iframe {

background-color:#006699;

}

in my custom css file
as specified in the <CSSFiles> <telerik: EditorCssFile> property.

Does anybody know why this could be happening, I've had to spend hours on this already, trying no end of work arounds!

Regards

[Rumen]

Hi Paul,

You can do the following: put a global body class with the following property in your custom css file:

body
{  
    background-color:white !important;

}

See this article for more information: Setting Editor Background And Color.

Sincerely yours,
Rumen
the Telerik team

[Paul Robertson]

Hi

Yes I saw that already, but it also affects the colour of the background on the master page too, so it doesn't seem like this fudge will work. The problem is at a more fundamental level than that - I don't understand how the precedence of the CSS is working - I thought it was supposed to be the other way round, with the content area custom CSS styles applied last. Is this a bug?

Thanks

[Rumen]

Hi Paul Robertson,

The content area of RadEditor is an IFRAME element which is another document different from the current masterpage page. The CSS file loaded through the CssFiles property will apply the body class and background-color value only to the content area of RadEditor, but not to the content area of the masterpage.

You can also customize the content area through the ContentAreaCssFile property as shown in this live demo: http://demos.telerik.com/aspnet-ajax/editor/examples/settingcontentareadefaults/defaultcs.aspx.

Please, note that the above solution will not work if the ContentAreaMode property of RadEditor is set to DIV element, then the content area will be rendered as a DIV element, but not an IFRAME. The DIV element is part of the current master page and the styles will affect the master page too. If you want to customize the content area appearance of the RadEditor in Div mode you need to register the CSS selectors manually on the page with the appropriate cascading.

Please note that setting global selectors to the page will affect the whole page appearance not only the RadEditor. That is why the CssFile collection is not registered by RadEditor when ContentAreaMode is set to Div.

For your concenience I have attached a sample page demonstrating how to decorate the content area.

All the best,
Rumen
the Telerik team

[Paul Robertson]

Hi there

Thanks for attempting to help. Unfortunately, I couldn't really see how the example can address the problem, perhaps I don't understand enough about the Editor's use of CSS yet. Instead, I think I might have found a rather more simplistic solution - here are the styles I had to use get the background to work in Firefox:

1. In the CSS file for the editor in general, to format the background of the IFrame:

td.reContentCell iframe
{
    background-color: #006699;
}

2. In the CSS file for the content area, to format the text in the IFrame:

div.editorcontentdiv1
{
    margin: 0 0 0 20px;
}

p.editorcontent1
{
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 18px;
    color: #FFFFF;
    /* miscellaneous other formating for the text */
}

where the markup for the RadEditor content is as follows:

            <Content>
            <div class="editorcontentdiv1">
                <p class="editorcontent1">Please enter your comment here ... </p>
            </div>
            </Content>

This generates the correct HTML, and looks fine in Firefox. The only trouble is, IE8 ignores the {background-color: #006699;} styling on the IFrame, even though the HTML is correct. I gather that this is some issue to do with the transparency attribute of the IFrame, but I can't make any client side changes to the IFrame attributes stick, eg, any changes using a Javascript function running from the Editor's OnClientLoad= property, in order to:

      iframe.allowTransparency = 'true';

do not survive by the time the page is rendered. Presumably this is due to the control's own client side processing. Is there any known workaround to this problem with IE? Is this the right approach, and if so, at what stage in the client side processing of the Editor and IFrame should this change be incorporated to avoid it being lost?   

Thanks very much

[Rumen]

Hello Paul,

Since this thread is getting long, could you please isolate the initial problem in a sample working project and send it via the support ticketing system for examination? Please, include two screenshots of the problem and of the desired appearance. I will fix the problem and send you the updated project back.


Best regards,
Rumen
the Telerik team

[Paul Robertson]

Hi there

I had to give up trying to change the IFrame background with CSS, it was too time-consuming, with IE refusing to cooperate. Instead, I had to use the Editor's client-side API, from a function configured on the OnClientLoad attribute of the RadEditor. This method explicitly sets the background color, but does at least work for both Firefox and IE - here is a simplified example, in case anybody else gets stuck with this.

ASP.NET:
<trk:RadEditor ID="radEditor1" runat="server"
        ....
        OnClientLoad="modifyEditor" >
</trk:RadEditor>

Javascript function:
function modifyEditor(editor){    
        var style = editor.get_contentArea().style;
        style.backgroundColor="#006699";
}

Thereby making this CSS style redundant:
td.reContentCell iframe
{
    background-color: #006699;
}

If anybody can come up with a CSS based solution I would be interested to hear about it.

Thanks very much.

 

[Paul Robertson]

Hello again

Just for the record, I realised it was possible to attach a style in the above Javascript function rather than explicitly setting the color, so, so this solution is probably the best, similar to the above but using a css class in the JS function:

Using a class in the content area css file, eg:
.mybackground
{
    background-color: #006699;   
}

and modifying the load function to:

function modifyEditor(editor){    
        var edcontentarea = editor.get_contentArea();
        edcontentarea.className = 'mybackground';
}

which also works in both IE and Firefox.

Cheers