This is a migrated thread and some comments may be shown as answers.

background image problem

22 Answers 332 Views
Editor
This is a migrated thread and some comments may be shown as answers.
kevin
Top achievements
Rank 1
kevin asked on 02 Oct 2007, 11:03 PM
I have a content page and there is a background image set in the css (body tag). This background image also seems to be replicated in the content area of the editor.  Is there any way to stop the editor from picking up the background image from the css?

22 Answers, 1 is accepted

Sort by
0
Rumen
Telerik team
answered on 03 Oct 2007, 06:51 AM
Hi Kevin,

Please, review the following help article that could be helpful to fix the problem: Setting Editor Background And Color.

If you still experience any problem after that, please open a support ticket and send a sample working project that demonstrates the problem. I will examine it and try to provide a solution.


Kind regards,
Rumen
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center
0
Paul
Top achievements
Rank 2
answered on 20 Nov 2007, 03:47 PM
That solution works fine for the standard editor, but prometheus editor's css files are all stored on the dlls, meaning the end user cant edit them
whats more, I used firebug to drill down to the iframe that contains the content, usually the body tag inside the iframe has a css class set, so you could edit that class in your current skin, but in the prometheus editor doesn't have a class set, so i cant work out how to override my page's body background
0
Rumen
Telerik team
answered on 20 Nov 2007, 04:41 PM
Hi Paul,

Please, excuse me for my omission. Indeed, the provided solution was for the classic RadEditor.

In the new RadEditor "Prometheus" we have provided a new ContentAreaCSSFile property, which you should point to an external css file. In that file you should set a global body style and set the background-color property in it to the desired color.

I will add a help article soon with more information how this property work.

Please let me know if I can assist you any further with this service request.


Kind regards,
Rumen
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center
0
Paul
Top achievements
Rank 2
answered on 20 Nov 2007, 04:57 PM
Perfect, thanks for that, worked a charm

Worth noteing however, RadEditor renders the ContentAreaCssFile <link /> tag first before all other css files, meaning that your css file that was initialy setting the background of the editor still does so.
To get around this you need to add
!important to your background style in ContentAreaCssFile to ensure it is not overwritten.
0
rdochert
Top achievements
Rank 1
answered on 13 Jan 2008, 04:33 AM
I implemented this solution also, only to find that now the borders arent showing when editing tables (which makes them pretty much impossible to use). it turns out the border styles were part of the default css for radeditor and using the above property overrides this.
is there a solution for this?
thanks,
rob
0
Rumen
Telerik team
answered on 14 Jan 2008, 10:28 AM
Hi Rob,

Indeed, the border styles that apply to the inserted tables in the editor's content area are part of the default css for RadEditor. Nevertheless, all you need to show the borders when you set the ContentAreaCssFile property to point to an external file is to put the following three classes in the external file:

table
{
    BORDER-RIGHT: #999999 1px dashed;
    BORDER-BOTTOM: #999999 1px dashed;
}
table td
{
    PADDING: 1px;
    BORDER-TOP: #999999 1px dashed;
    BORDER-LEFT: #999999 1px dashed;
}
table th
{
    PADDING: 1px;
    BORDER-TOP: #000000 1px dashed;
    BORDER-LEFT: #000000 1px dashed;
}

and save the file. After that restart your browser and open a new page with the editor.

Best regards,
Rumen
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center
0
rdochert
Top achievements
Rank 1
answered on 14 Jan 2008, 06:24 PM
thanks for that - worked perfectly.
are there any other settings that should be carried across to a customised content css file?
thanks,
rob
0
Tervel
Telerik team
answered on 15 Jan 2008, 08:08 AM
Hello rdochert,

You can add as many [global] style definitions and they all will be applied to elements in the content area.
FYI, the ContentAreaCssFile is used by RadEditor for the following purposes:
  • provide tables with borders
  • highlite wrong words when doing AJAX spellchecking
  • highlite elements when hovering their tag name in the DOM Inspector module
  • provide default styling/formatting for the editor content area (e.g. white background, scrollers)
Sincerely yours,
Tervel
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center
0
Paul
Top achievements
Rank 2
answered on 05 Feb 2008, 12:16 PM
Setting the ContentAreaCssFile works fine but I just noticed that when I click the preview button the background reverts to the actual site background, this happens in both ie and firefox

any ideas?
0
Rumen
Telerik team
answered on 05 Feb 2008, 02:13 PM
Hi Paul,

The css classes loaded through the ContentAreaCssFile property is not applied to Preview mode, because in that mode the editor displays how the content will look when it is displayed outside of the editor (without the borders that RadEditor sets in Design mode around the FORM, TABLE, etc elements).

If you want to not apply the page styles to Design and Preview modes of RadEditor then load the desired set of classes through the CssFiles property, e.g.

    <telerik:RadEditor  ID="RadEditor1" runat="server" >
        <CssFiles>
            <telerik:EditorCssFile Value="~/Editor.css" />
        </CssFiles>
    </telerik:RadEditor>

Editor.css

body
{
       background-image: none !important;
}

All the best,
Rumen
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center
0
Paul
Top achievements
Rank 2
answered on 05 Feb 2008, 03:16 PM
Thanks, worked a charm
0
Jason Lee
Top achievements
Rank 1
answered on 20 Apr 2008, 01:29 PM
Dear Sir,

I am trying to solve the problem.  However, I don't where is wrong...oops..

I am using RadControl For asp.net ajax 2008 Q1 version..
I try to change editor's background color...( I don't want it uses my page's background css..)

The following is my code

                <telerik:RadEditor ID="radEditor" Runat="server"
                    Height="600px" Skin="Vista" ContentAreaCssFile="editor1.css">
                    <Content>
</Content>
                </telerik:RadEditor>

I have put css into the same folder as page

body
{
  background-color: red;
  background-image: url(image_path);
  color: black;
}

It doesn't work...where is mistake?
0
Rumen
Telerik team
answered on 20 Apr 2008, 07:41 PM
Hi Jason Lee,

You should set !important after the values of the css properties, e.g.

body
{
  background-color: red !
important;
  background-image: none !
important ;
  color: black !
important;
}

Another way is to set the editor's CssFiles property to point to your own css file. Therefore the editor will not pick up the styles from the page.

Greetings,
Rumen
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center
0
Jason Lee
Top achievements
Rank 1
answered on 21 Apr 2008, 01:44 AM
Dear Sir,

Thank you for your reply.
Yes, it works....

Therefore, where is the problem?
I was looking for document as following yesterday...

======

Set the RadEditor background and font color by using one of the following methods:

Via CSS

The rich text content area of RadEditor is an editable IFRAME element. This IFRAME is a separate document that has its own CSS styles that originate from the RadEditor skin. The default font appearance in the content area can be overridden by setting the editor's ContentAreaCssFile property to point to your own CSS file, for example:

[ASP.NET] Copy Code
<telerik:RadEditor  
      
ID="RadEditor1"
      
ContentAreaCssFile="~/EditorContentAreaStyles.css"
      
runat="server">
</
telerik:RadEditor>  

The CSS file should contain the following class:

[CSS] EditorContentAreaStyles.css Copy Code
body
{
  
background-color: red;
  
background-image: url(image_path);
  
color: black;
}  

0
Rumen
Telerik team
answered on 21 Apr 2008, 07:19 PM
Hi Jason,

Thank you for your feedback. The !important info is available in the RadControls for ASP.NET AJAX documentation.  However , I will update the description of the live example too.


Best regards,
Rumen
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center
0
Dave
Top achievements
Rank 1
answered on 12 May 2008, 08:33 PM
Placing "!important" on the content area css file merely overrides any other body tags loaded, it does not change it for just the content area. This means if I just want a white background in the editor, it will get rid of my background on my entire page.

There must be a better solution.


0
Rumen
Telerik team
answered on 13 May 2008, 08:24 AM
Hi Dave,

The !important css rules in the body class located in the css file loaded via the CssFile property should not override the body class of the parent page. I made a test and I was not able to reproduce the reported problem, because the styles loaded via the CssFiles property are applied only to the editor's content area. You can see my test in the attached video as well as test my sample running project. Am I missing something?

Could you please, provide more information how to reproduce the problem?

Best regards,
Rumen
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center
0
Michael Campbell
Top achievements
Rank 1
answered on 05 Jun 2008, 03:59 AM
Is there a way to set the content area background color using javascript for the AJAX version? In the old editor I used the following based on the documentation which worked fine:

editor.GetContentArea().style.backgroundColor = x;

The documentation at http://www.telerik.com/help/aspnet-ajax/settingeditorbackgroundandcolor.html states that it should work in the AJAX version by changing 'GetContentArea()' to 'get_contentArea()'. I tried it and it doesnt throw a javascript error however it seems to do nothing.

Regards,
Michael
0
Rumen
Telerik team
answered on 05 Jun 2008, 07:24 AM
Hi Michael,

The code below provided in the help article works as expected:

 <telerik:RadEditor
   ID="RadEditor1"
   OnClientLoad="OnClientLoad"
   runat="server">
</telerik:RadEditor>
<script type="text/javascript">
   function OnClientLoad(editor, args)
   {
      var style = editor.get_contentArea().style;
      style.backgroundColor = "black";
      style.color= "red";
      style.fontFamily= "Arial";
      style.fontSize= 15 + "px";
   }
</script>

You can see my test in the attached video as well as test the included project. Let me know if you still experience any problems.


Best regards,
Rumen
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center
0
Michael Campbell
Top achievements
Rank 1
answered on 06 Jun 2008, 12:18 AM
Hi Ruman,

I discovered what the problem was, it occurs if you have an image background in the stylesheet. I reproduced the problem in the project you attached by adding a stylesheet and defining the background-image style in the body tag and attaching the stylesheet to the editor using this.RadEditor1.CssFiles.Add("~/Stylesheet1.css"); on the server side. After doing this the stylesheet background image was coming through to the editor.

I solved it by adding an extra line to the OnClientLoad(editor, args) javascript method:
style.backgroundImage = "none";
For whatever reason this was not necessary in the old version but is in the AJAX version. You may want to add it to the documentation.

Regards,
Michael
0
Rumen
Telerik team
answered on 10 Jun 2008, 07:51 AM
Hi Michael,

I am glad that you found the reason for the problem and fixed it. I will add this information in the editor documentation as it is indeed helpful.

I updated your Telerik points for sharing the solution with our community too.

Kind regards,
Rumen
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center
0
rh
Top achievements
Rank 1
answered on 18 Dec 2008, 05:45 PM
Hi Michael, thanks for posting your javascript solution. That works very nice compared to the external css method.
Tags
Editor
Asked by
kevin
Top achievements
Rank 1
Answers by
Rumen
Telerik team
Paul
Top achievements
Rank 2
rdochert
Top achievements
Rank 1
Tervel
Telerik team
Jason Lee
Top achievements
Rank 1
Dave
Top achievements
Rank 1
Michael Campbell
Top achievements
Rank 1
rh
Top achievements
Rank 1
Share this question
or