JCE Editor - page background makes editor screen unreadable

[cybervigilante]

when I try to edit with the jce editor, the page background, which is dark and makes the text unreadable, shows in the editor, even though the article background is white. How do I get rid of that?

[pxforti]

Hi,

Go to Components > JCE > Configuration

Under the Formatting section, in the Editor Content Class, select "Hi Contrast" This will remove your background color so you can see the text.

See attached screen shot

[masamedia]

pxforti, this hint is awesome. Thank you.

Question though. On a different website I found this fix:

Code: Select all

body.mceContentBody {
background-color: #FFFFFF !important;
background-image: none;
}

It did work for one site, it didn't work for another. Is there a reliable .css based fix?

[pxforti]

I haven't used that css code, but it might not work if you use a different editor than the one for which it was built.

Since I always use the JCE editor, the high contrast works for me. Please post if you find a good css solution.

Also, I remember reading on the JCE forum that you can create a custom css style sheet for the editor, but that creates the problem of having a separate stylesheet for editor; if you make changes to the regular stylesheet, then you have to make changes to the editor style sheet.

[Kahuna]

when I try to edit with the jce editor, the page background, which is dark and makes the text unreadable, shows in the editor, even though the article background is white. How do I get rid of that?

I've never had JCE Joomla! 1.5 give me anything in the article's default editing window but a white background with black text (High Contrast as default). It has happened in Joomla! 1.0 now and again. My solution basically works the same in both.

When the white editor window's background is an issue because the site's content background is colored or even a graphic file this is what I do -

Create a NEW JCE Editor css file - change the window background and text color as default as not to alter other attributes of the article(s) in editing desired (but I suppose you could make default what ever styles the class will allow)/

* Set up a new css file and call it "editor.css"
* Create a "body" class and set the style to what matches the front front end content area's style.
* Place the css file in the template's css folder.

In JCE Configuration Admin set :
* Editor Content Class = Custom
* Use Template CSS = No
* Use Custom CSS file (the path) = templates/"the template's name"/"template's css folder"/"the file's name".css - For example, " templates/ja_purity/css/editor.css "

If there were a simple "editor window" background color and/or image set up section in the editor's config, that would be radically nice concept.

[pxforti]

The problem with creating the editor style sheet is that if you make changes to your real style sheet, you have to update the editor style sheet to reflect. Like you said, a nice option would be a setting in the editor config to turn off the background.

[Kahuna]

The problem with creating the editor style sheet is that if you make changes to your real style sheet, you have to update the editor style sheet to reflect. Like you said, a nice option would be a setting in the editor config to turn off the background.

One has only to make the effort.

[Juddster]

or you could use the @import in your main style sheet, like so:

@import url("editor_content.css");

:-)

[pxforti]

Regarding the code below; I figured out it works on Joomla 1.0 to get rid of background color in the jce editor.

body.mceContentBody {
background-color: #FFFFFF !important;
background-image: none;
}

I found out it works for Joomla 1.0. Probably doesn't work for 1.5

[Kahuna]

Regarding the code below; I figured out it works on Joomla 1.0 to get rid of background color in the jce editor.

body.mceContentBody {
background-color: #FFFFFF !important;
background-image: none;
}

I found out it works for Joomla 1.0. Probably doesn't work for 1.5

I've not had "body.mceContentBody" work (yet) within a template's css file in 1.5 (using JCE),
but it does work with 1.5 in an "editor.css" file when JCE is set to do so.
I usually use a separate "editor.css" file

[sawalsh07]

The CSS suffix '.mceContentBody' may only work for certain versions of certain editors, which would explain why it works on some sites not others.

Thanks for tip on the 'High Contrast' setting. That seems the easiest to change. That was hugely helpful. My editor's text was unreadable!

[wilmy]

There's a really simple fix to this problem... go to Go to Components > JCE > Configuration and then all you need to do is to set "Use Template CSS" to No.

[artcop]

I won't admit to how long I screwed around trying to find a CSS style to fix this problem... so thank all you guys for being here in this thread

[adxdopefish]

This worked, and I thank you, but I ended up running with this solution instead.

http://forum.joomla.org/viewtopic.php?f=474&t=497597

Thank you all for your help.

[LAMF]

pxforti: Thanx for the excellent solution!

[neo314]

Both solutions work. I think the advantage of using body.mceContentBody and using the template css is that you get the css values for the rest of your template in the editor.

[MOraelin]

Go to Components > JCE > Configuration

Under the Formatting section, in the Editor Content Class, select "Hi Contrast" This will remove your background color so you can see the text.

Thanks this saved me a lot of time and hassle.

[sog2012]

Hi,

Go to Components > JCE > Configuration

Under the Formatting section, in the Editor Content Class, select "Hi Contrast" This will remove your background color so you can see the text.

See attached screen shot

Your recommendation don't work for me! Because when I click on click on JCE Configuration or JCE Group Manager, it gives error:

You are not authorised to view this resource.

What's going on? I am logged in as Super Administrator and JCE tells me I am not authorized to view this resource!! This is nuts!!

Any solution to removing black background? I only want white background with black text!

[sog2012]

There's a really simple fix to this problem... go to Go to Components > JCE > Configuration and then all you need to do is to set "Use Template CSS" to No.

Yes very simple IF I could get into the Configuration. Keeps telling me I am not allowed! This is crazy, cause I am a superuser admin and JCE telling me I cannot go into Configuration.

BTW, I have the latest version, JCE 1577.

I even created a new user with super admin privileges, but JCE editor is still giving the error message:

You are not authorised to view this resource.

What a joke eh? LOL

Oh well, back to Tiny editor OR I could switch templates everytime I want to edit something. Even though my current template is WHITE, for some weird reason JCE Editor is gray text on black background, but when I switch templates to rhuk_milkyway, then JCE had black text on white background.

I wish I could get into the JCE Configuration

[camshaft007]

just wanted to thank pxforti for his post !!

worked for me as my JCE was showing my background image and I couldn't see my test correctly

Hi,

Go to Components > JCE > Configuration

Under the Formatting section, in the Editor Content Class, select "Hi Contrast" This will remove your background color so you can see the text.

See attached screen shot

[fenderaxplayr]

Hi,

Go to Components > JCE > Configuration

Under the Formatting section, in the Editor Content Class, select "Hi Contrast" This will remove your background color so you can see the text.

See attached screen shot

Thank you for this fix. Was driving me crazy.

[STIN]

There's a really simple fix to this problem... go to Go to Components > JCE > Configuration and then all you need to do is to set "Use Template CSS" to No.

wilmy is right. PACHOW!

[STIN]

Yes very simple IF I could get into the Configuration. Keeps telling me I am not allowed! This is crazy, cause I am a superuser admin and JCE telling me I cannot go into Configuration.

BTW, I have the latest version, JCE 1577.

I even created a new user with super admin privileges, but JCE editor is still giving the error message:

You are not authorised to view this resource.

What a joke eh? LOL

I wish I could get into the JCE Configuration

Try uninstalling & reinstalling JCE (if you are superadmin, in-fact).

[GRIFOS]

In my JCE editor i needed to do that:

Components-->JCE Administration-->Global Configuration-->Editor Style Reset=Yes

By default Editor Style Reset=No, so you just need to set it Yes in order to have a white backround in JCE editor and not your front end backround in it.

Cheers!

[Schubborniel]

Thanks everyone. The High Contrast work for me

[atriumWeb]

In my JCE editor i needed to do that:

Components-->JCE Administration-->Global Configuration-->Editor Style Reset=Yes

By default Editor Style Reset=No, so you just need to set it Yes in order to have a white backround in JCE editor and not your front end backround in it.

Cheers!

This works perfekt in 1.7

[bagou01]

it's all nice but is it possible to set a neutral grey?
i mean, my body background is very dark, almost black, but it is NOT the background displayed behind my text (my text background is grey) so i write in two color: white and very dark....
so if i use "style reset", i get a white background, and then i cant read my white text...
and if i dont use style reset, i get a black background, and then i can't read my dark text...
so i would like to set, as a background, the same color that is displayed on my side... is there a way to do that?
i understand some of you will tell me to use alternate css file, but then i have to put every css modification in double: once in the modified css, so it displays in the editor, and one in the original template.css so it displays on the frontend...

[SonarEclipse]

Hi,

For anyone using JCE in 1.7 looking for the editor content class, please see my other post at http://forum.joomla.org/viewtopic.php?f=628&t=680526.

jce config.JPG

[Ozoliem]

The solution is: Find under Components - CE Administration / Editor Global Configuration/Formatting & Display/Editor Style Reset and choose Yes and you will have white bacground in JCE editor!

Enjoy

[jjspelman]

In my JCE editor i needed to do that:

Components-->JCE Administration-->Global Configuration-->Editor Style Reset=Yes

By default Editor Style Reset=No, so you just need to set it Yes in order to have a white backround in JCE editor and not your front end backround in it.

Cheers!

That's it!! Worked in 1.7 as mentioned above. Thanks!!!