Changing Tiny MCE background

Permalink 1 user found helpful
What do you do when your theme is White text on black background.
Tiny has a white background so the white texts doesn't show.
Is there a way so the background edit in Tiny is a different color so one can see the white text.

I have looked though these forums and have not found an answer.
I may have found one at tiny mce , but either I don't understand or it just did not work.
Seem it should be easy. I sure hope so.


View Replies:
cannonf700 replied on at Permalink Reply
twoponies replied on at Permalink Reply

I had already done that and can't get it to work. That was why I posted.

Ill play around some more.

Thanks again.

mario replied on at Permalink Reply
I've found that Tiny MCE references your html/body tag background color as its color or uses your default browser values.

For example, I can set my background color to #FFF and the text color to #000 in my css file (or don't specify any settings at all) for the body tag. Then, I create an overall wrapper DIV, if I don't already have one, and put that around my entire HTML. Set that div id (let's call it #overallWrapper) to the actual background and text color you want.

In summary, I'm not setting my true overall background color in the html or body, I'm setting it in the overallWrapper div container. Tiny will ignore those settings.

sample html

<div id="overallWrapper">
  <div id="actualContent">

sample css

body { background-color:#FFF; color:#000;}
#overallWrapper { background-color:#F60; color:#FFF;}

EDIT: ignore the php tags and pay attention to the stuff inside them...
twoponies replied on at Permalink Reply
I will give it a try tomorrow(monday
) or the Next)

Kiesel replied on at Permalink Reply
You can open your typography.css and add the following:

/* TinyMCE specific rules */
body.mceContentBody {
background: #000;
color: #fff;
.mceContentBody a {
text-decoration: none !important; /* FF requires a important here */
color: #f7b527 !important; /* FF requires a important here */

Now your tinymce editor has a black background, white font color and links are yellow. At the same time you can have other rules for the body and link for your webpage by adding normal css styles:

body {
color: #000;

Now my body has a black font color even if it's white in the tinymce editor. Just change that to your needs.

If this doesn't seem to work then it's the cache's fault.

If you develop with firefox then just download the webdeveloper toolbar and tick "Disable->Disable Cache". Makes your life a lot easier
PassionForCreative replied on at Permalink Reply
JasonStone solved my problem with his solution above. Kudos man
cursal replied on at Permalink Reply
That is some great info to know. Thank you.
scorpa54 replied on at Permalink Reply
Just pointed me in the right direction for getting rid of the background image that appears in Tinymce when the body has a background image attached to it. Thanks, that was a bear to read any text I was editing.