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

[belgirl]

For some reason, this isn't working for me.  On my website, I have a dark background with dark text in a white table.   I have tried it both ways: putting it in my css file and snippetmaster's css file.  But I still have that dark text showing up on the dark background.  Any ideas?

[kaotob]

The problem I am having is that the body background is showing through and none of these additions to either the main css file or the /snippetmaster/includes/tiny_mce/themes/advanced/css/editor_ui.css file have solved the problem. Any other suggestions?

thanks

[roguetiger]

Yup - I'm having the same problem. I've edited the css in the "snippets" folder, edited my site's css folder and added a new css file to the site. None of the changes have affected my Snippets Admin section.

Any further ideas?

[roguetiger]

Update/Correction:

             It works in IE7, and just takes a little time to update in Firefox. Wooooo!

[jean]

I have a similar problem.
I have a dark background image in the left border of the web page. 
The actual page has a lighter background with darker text.
When editing a snippet that is not the whole page, the editor opened with this image in the background with the content on top of the image instead of inside the margin of the page.
All I need to do is to eliminate the background image from the editor area.
Initially, I thought I had solved the problem by simply adding

.mceContentBody { background-image: none; }

to my own css file.

However, this only solved the problem for the first snippet on the page.  Second and subsequent still snippets had the image in the background.

Thanks to the above suggestion, when I edited the /snippetmaster/includes/tiny_mce/themes/advanced/css/editor_ui.css file and added:
.mceContentBody { background-image: none; }
to this file, the problem was solved.

I note that at the top of the file:
/snippetmaster/includes/tiny_mce/themes/advanced/css/editor_content.css it says:

/* This file contains the CSS data for the editable area(iframe) of TinyMCE */
/* You can extend this CSS by adding your own CSS file with the the content_css option*/

So perhaps there is another solution that does not involve modifying the actual product files.  If there is, I would prefer it.  I don't know what the 'content_css' option refers to.

When I look at the souce code of a file that is being edited, I notice a line:

content_css : "http://mydomain.com/. . . /mycssfilename.css,http://mydomain.com/  . . ./snippetmaster/includes/cssshowstyles.inc.php?style=0"

Clearly this is written into the file by snippetmaster.  So perhaps this can be set in a configuration file somewhere?  I would prefer this to editing the tiny_mce css file itself.

Modified to add
You have to clear the cache before this change will work.  The fix works in firefox as well as ie, as would be expected, providing you clear the cache first.

[admin]

This is very interesting that it did not display the bg image on the first editor instance, but it did for the remaining ones.  I will try to fix that for the next release.

The problem here is that the CSS style used by the editor is taken from your page..  so if we don't "feed" the css file to the editor, then none of the styles of your page will work in the editor.  (ie: It's not possible to stop just the body image style only.)

One possible solution might be to use an @import css style command to import a CSS style into your page, and then only have it contain the body image css.  At the moment, the editor will not read in an imported stylesheet, so this will be ignored.. and then the editor won't know about the body bg.

I hope that makes sense?

[jean]

Thank you, your suggestion worked.

I removed the page background image from my main style sheet and then created an additional style sheet containing only the page background image.
Then, in my page, I added the background image using an import rule:
<style type="text/css">
@import url(css/bg_image.css);
</style>
Now the real page has the background image but snippmaster's page does not. 

I am using the free version.  In the pro version, there is a preview capability.  I would imagine that the background image would also not appear in the preview.  This work-around would likely be OK until a new version makes including  .mceContentBody { background-image: none; } in my css work for multiple snippets.

I am just evaluating snippetmaster for a client.  I have a few other questions that I will pose separately.