Change the background color of the CKEditor text area

Hi,
The background color of the editor area is defined in the css file of the skin that you're using.

.cke_contents{border:solid 1px #696969;background-color:white;}

I changed the background-color:white with background-color:blue and it worked fine. Since it is a standard css-file you could of course use any valid colour definition (#ffffff , rgb(255,255,255) or whatever suits you).

So, if you just open the css file of your skin, located in "ckeditor/skins/[your skin name]/editor.css
and search for the element ".cke_contents", and change the colour value your should get it to work.
Let me know if you have any problems, and I'll try to guide you.

Regards

/Peter

hi it sounds so simple to change the background and i spent or 3 hours trying to do it but no luck.


i am trying to edit the backgound on the kama ski.
i changed

.cke_contents{margin:5px;}

There are two way to solve this problem. You can use jQuery Adapter or edit config.js file.

1. Add new file mysitestyles.css in your CKeditor directory

body
{
  /* Font */
  font-family: Arial, Verdana, sans-serif;
  font-size: 12px;

  /* Text color */
  color: #f0f0f0;

  /* Remove the background color to make it transparent */
  background-color: #353c42;
}

html
{
  /* #3658: [IE6] Editor document has horizontal scrollbar on long lines
  To prevent this misbehavior, we show the scrollbar always */
  _overflow-y: scroll
}

img:-moz-broken
{
  -moz-force-broken-image-icon : 1;
  width : 24px;
  height : 24px;
}
img, input, textarea
{
  cursor: default;
}

It is really very simple.

If you are using a special skin, change the background color as suggested above.

If you have not done anything to change your skin, then just look in the ckeditor folder for the 'contents.css' file and change the body background color there.

If you change the background of the text area to blue, how can you now change the color of links in the text area since they are blue by default and styling them with the CSS file won't work since CKEditor temporarily changes the links into something else?

I posted this question here:

styling links within CkEditor window

but haven't had a response yet. I thought it would also be relevant here.

I have just used the 'contents.css' style sheet to change the appearance of links in the editor:

a {
   color: #ffcc33;
   font-weight: bold;
   text-decoration: none;
}

and that works - all the links show up in the editor in that colour, even if they are not that colour on my site. (I am using the latest version of ckeditor - don't know if that makes any difference.)

Then on my website I also have a style that changes the colour of links (using a class, like this:)

.class1  a {
            color: #ffcc33;
            font-weight: bold;
            text-decoration: none;
}

but you could use any other method of styling too.

I tried a few things and have had no success so far.

I downloaded a fresh copy of CKEditor and modified the replacebycode.html from the samples directory. I wanted to remove any possibility that my own application or any custom code was in any way responsible.

I modified the contents.css file as suggested. I was able to change the font-family and the font-size of links for example but any attempt to change the color or text-decoration is being ignored.

I had the same result when I included my own custom stylesheet via the contentsCss option when I called CKEDITOR_replace().

But when I use Firebug to examine the CSS being applied to the link, it says that the color and text-decoration I set in my stylesheet have been applied to the link, yet my eyes tell me otherwise. The links remain blue and underlined.

@talya : What method did you use to insert the editor? Did you simply use a style class to replace the textarea or did you replace the textarea by calling CKEDITOR.replace() as I did?

I just discovered a solution. I need to do this in my stylesheet:

a {
  color : #f00 !important;
  text-decoration : none !important;
}

I need to use the "!important" declaration otherwise these things are being ignored or over written somehow when links are displayed in the CKEditor content area.

Another way to do this is in the JS code that follows the editor instance call.

<script language="Javascript">
CKEDITOR.replace('instancename',
    {
       contentsCss : 'body{background:url(/path/to/image.gif);}",
    }
 );
</script>

You can also throw in other bits into the "body" call, as normal; background color, font definitions.

I'm doing it this way because my clients can edit (elsewhere) the font/bg settings of the area where the content they're editing (using CKE) resides. I can't just change the CSS file of the skin, because that is universal; I needed a way to customize things with every load.

I changed the "color" to white in the contents.css and indeed I see it well on the editor. however, when I look at the created HTML, when the user uses the default color (white) it isn't shown in the HTML, which makes the text be without style, which means it's black...

is there a way to make the color of the text appear explicitly in the HTML?

Changing the background-color  or adding image as background works. One must not forget about refreshing the cache afterwards.
All you have to do is use contents.css file for iframe editor or your application css file for inline editor.
There you specify background-color/image for body (iframed editor) or background-color/image for element (inline editor).

As for transparent - it also works but there is a catch. Each skin has its specific structure plus there is simple HTML rule.
If you make body transparent "it will take" the color of it's parent in DOM tree.

CKE 3.x
In case of v2 skin, parent element which also has color is element with class .cke_contents

v2 skin:
cke_skin_v2 .cke_contents #fff

As for kama skin there are two parent elements which have color.
kama skin:
cke_wrapper with #D9D9D9
cke_skin_kama .cke_contents iframe with #fff

 

CKE 4.x
In CKEditor 4.x you need to set :
Transparent for body element in contents.css
Transparent for Iframe with class .cke_wysiwyg_frame, .cke_wysiwyg_div background-color: #FFFFFF;
Transparent for Div with .cke_inner class - background: none repeat scroll 0 0 #FFFFFF;

 

I’m not specifying any files because it depends whether you use trunk, git or packed release code but you can and even should check these elements and classes with Firebug and then change appropriate files.

---

@kalisky - when submit button is pressed then only HTML is sent. Styles are kept in external CSS file which isn’t submitted.
What one should do is having same styles applied for contents.css as for target page – where submitted HTML will be displayed.