[solved] WYSIWYG - Custom CSS (CSS Style?)

[lucid]

So I was going to post the question:

How do I customized the WYSIWYG editor to have a different style when editing content but not the actual website style?
e.g. changing the background of the editor to white (when your website may have a black bg-color). I had a look around the advance settings in the extension file and though that "CSS Styles" may help but I couldn't work out how that all worked.

After poking around for a while I found something that did the trick on the TinyMCE wiki that allows one to customize particular css elements to be displayed in the WYSIWYG. Just add this to your css stylesheet.


                EXAMPLE
------------ - - --  ------------ - - --  ------------ - - --
body {
  background: #000;
}

/* TinyMCE specific rule */
body.mceContentBody {
  background: #FFF;
}
------------ - - --  ------------ - - --  ------------ - - --


Hope this helps someone else and saves you a bit of time.

[lucid]

actually, I'm not sure if the code I posted before will work in that example (it did when I did a 1/2 test) but this was what I actually used:


-- EXAMPLE ---

table, td {border-collapse:collapse;}
.mceContentBody table, td {border-collapse:separate; }

-- EXAMPLE ---

[nurzki]

Or you can put your CSS under TAB: Extensions/TinyMCE WYSIWYG/Advance

then paste your CSS under "Additions to stylesheet"


this works for me...