Background color in CKEditor 3.1 normal/fullscreen

[Jani Ollikainen]

There is new contents.css which tells it to be white. Changing it doesn't help when using v2 style, because it has editor.css:

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

Changing that to transparent fixes the problem.

But then when Maximized to fullscreen transparent shows underlaying page and there isn't any way (that I know of) chancing the background and maybe other styles according to are we in normal or fullscreen. There should be some class to use differentiate the mode.

[Jani Ollikainen]

Oh C'mon please fix this. This is a big show stopper for us. So I changed milestone to 3.5 if something would happen to this.

[Frederico Caldeira Knabben]

Maybe you can provide us a patch for this one?

[Jani Ollikainen]

If I would know how to make it and would be familiar enough and would know enough js then maybe. But ok, why there is then contents.css which says:

	/* Remove the background color to make it transparent */
	background-color: #fff;

If removing that doesn't make it transparent? As those skins says that it's white.

But ok, after ​http://dev.ckeditor.com/changeset/3611/CKEditor/trunk now there are maximized which can be used:

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

This makes thing much nicer and there is a way to change background color accordingly are we in fullscreen or not. As to original problem, there's still that contents.css text that isn't true.

Now my problem is how could I define that .cke_maximized color in some other css file which I could generate, as it would be nice if the background color would in fullscreen case be the "user configured background color", which I cannot declare statically in editor.css. Didn't manage to override those editor.css settings in contentCss file. But one could think that as a different problem.

[Jakub Ś]

Changing the background-color works. One must not forget about refreshing the cache afterwards.

As for transparent - it also works but there is a catch. Each skin has its specific rules. If you make body transparent "it will take" the color of it's parent in DOM tree. In case of v2 skin, parent element which also has color is element with class .cke_contents

v2:
cke_skin_v2 .cke_contents #fff
body with #fff

As for kama skin there are two parent elements which have color.

kama: 
cke_wrapper with #D9D9D9
cke_skin_kama .cke_contents iframe with #fff
body with #fff

Agreed that this may be confusing but IMO it has more to do with not agreeing on skin design than with buggy behavior.

Closing the ticket.

[Jani Ollikainen]

Yes, there's a catch!

Like I said after that changeset 3611 it can be at least fixed by just editing .css files, so yes the bug I originally reported is fixed in changeset 3611.

But I still think that there's problem with the Skin(s) but that kind of another issue.

As if the contents.css says something thats not true. As if issue is not to agree with skin design, why contents.css even has that line if it doesn't change anything and it's decided by your skin design?

I see couple of ways to solve this, make that line in contents.css work as advertised or remove it. But that's not so big issue for me that I want to create ticket out of it. Of course I would like that I would just need to remove that line from contents.css to get my editor transparent (and in fullscreen white or something else, as then it can't be transparent). Before that I just need to remember to patch v2 skins .css file.

[Jakub Ś]

I have made a mistake writing in may last post

"it will take" - notice the " marks it has more to do with not agreeing on skin design

Let's say it's true but it gave a false impression you have described below:

As if the contents.css says something thats not true.

if it doesn't change anything and it's decided by your skin design?

It does say true.* It changes the editor's body color to transparent but the problem is that other elements that are placed behind this body are not transparent.

E.g. Window glass is transparent but if you put red board behind it, it will no longer look transparent but red. This is what is happening here.

I see couple of ways to solve this, make that line in contents.css work as advertised or remove it.

We can't use one rule on elements it was not assigned to. Once again this works and will not be changed - perhaps adding few comment lines warning about elements behind editor's body would solve the issue here.