How to change the editor background color

[syberknight]

If you are like me, and haunted by having a dark page background with dark text on a light colored area (like a table cell or div), and SnippetMaster's editor only shows the dark text on the dark background if you've got your snippet area inside the light colored area...

...then here's the fix!

Simply add this line to the end of your main CSS file:

.mceContentBody { background-image: none; background-color: White; color: Black; } /*SnippetMaster editor bg color*/

Viola!

[syberknight]

Hopefully somebody will find this helpful...

I expanded my work-a-round via instructions from http://wiki.moxiecode.com/index.php/TinyMCE:Configuration/content_css

So from now on, I just include these 3 classes to my global site css file (with appropriate values of course):

.mceContentBody { background-image: none; background-color: #002a53; color: #ccc; } /*TinyMCE*/
.mceContentBody a:link, .mceContentBody a:visited   { color: #fff !important;    text-decoration: underline; } /* FF requires a important here */
.mceContentBody a:hover, .mceContentBody a:active   { color: #99d9e8 !important; text-decoration: none; } /* FF requires a important here */

It works great.

[admin]

Thanks!  I made this post a sticky so folks can easily find it. 

[bobroosth]

The background is problem for me as well, but putting this line into styles-originail.css and uploading that file does not change what I see. Am I changing the correct CSS?

[admin]

Try either one of these solutions:

1. Create a *new* CSS file called "background.css" and then put the css lines in the previous post into it.   Then add the css file to your webpage being edited.  Snippetmaster will "read" the CSS file automatically, and the styles will be applied to the editor.

2. You can manually edit the /snippetmaster/includes/tiny_mce/themes/advanced/css/editor_ui.css file and add the styles to it.

I think #1 is easier, and makes the most sense as it's basically just making another CSS file...

(Or if you prefer, you can add those styles to your own existing css file for the page that is already there.)

[bobroosth]

That works, but strangely. The original background color for the page is a medium dark blue. The text is a bit darker blue, but in a white table cell. When I set the mce background to white, the text turns white....

I take it the editor is trying to choose a contrasting color for the text.

[CarlSeiler]

I think this is exactly what I was looking for.  I have a non-repeating background image in my main.css sheet that works fine given my main page's margins and text, but for the Snippet I'm wanting users to edit, the text goes right across the image, making it almost impossible to read.  These mce classes hopefully will allow me to override and get rid of the image when editing.

Carl

[Jenkinhill]

I take it the editor is trying to choose a contrasting color for the text.

No, it can't do that! More likely is that you have specifiied color:#ffffff  for .mceContentBody 

In syberknight's second example above link text is white - you need to change the values to suit your own page/CSS