Change the background color of the CKEditor text area

[stenfrys]

I've searched the forum and found no usable results.

What i want to do is change the text area from the default white to, preferrably to transparent, but if that can't be done then blue, and the only thing i've managed to change so far is the color of the frame around the text area, but nothing else.
Any ideas?

/Stenfrys

[petera]

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

[stenfrys]

Thanks a lot, that worked!

/Stenfrys

[adiboy]

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

Code: Select all

.cke_contents{margin:5px;}

to

Code: Select all

.cke_contents{margin:5px;background-color:blue;}

i am editing
ckeditor\skins\kama\editor.css

Any idea on what i am doing wong?

[appleboy]

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

Code: Select all

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;
}

2. configure your config.js file in CKeditor directory

Code: Select all

CKEDITOR.editorConfig = function( config )
{
    // Define changes to default configuration here. For example:
    // config.language = 'fr';
    config.uiColor = '#AADC6E';
    config.contentsCss = '/path/ckeditor/mysitestyles.css';
};

you can use jQuery Adapter （http://docs.cksource.com/CKEditor_3.x/Developers_Guide/jQuery_Adapter）

put following code to header

Code: Select all

<script type="text/javascript" src="/ckeditor/ckeditor.js"></script>
<script type="text/javascript" src="/ckeditor/adapters/jquery.js"></script>

html

Code: Select all

<textarea id="test" name="test" style="width: 400px; height: 200px" /></textarea>

javascript

Code: Select all

$('#test').ckeditor({ contentCss: '/path/ckeditor/mysitestyles.css' });

reference:
http://blog.wu-boy.com/2010/03/30/2099/

[talya]

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.

[batman42ca]

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.

[talya]

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

Code: Select all

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:)

Code: Select all

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

but you could use any other method of styling too.

[batman42ca]

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?

[batman42ca]

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

Code: Select all

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.