Changing TinyMCE background (Content Block)

Permalink 3 users found helpful
How do I change the background-color of the TinyMCE editor?
I've got a very dark theme with a white color, so I can't see the text because of white font-color on white background-color...

1 Attachment

 
harrisG replied on at Permalink Reply
Found a way:

Open content.css under
"concrete/js/tiny_mce/themes/concrete/skins/default"

Here change the "background" of "body" to #000 for a black background for example
Mnkras replied on at Permalink Reply
Mnkras
you can change it in your theme's typography.css, never make changes to the core,
Raymond replied on at Permalink Reply
Forgive me, I'm still learning CSS coding. How would you go about changing this in typography.css? Is there some way to overwrite the core value? Also, I'm not using the default theme. I've written my owned based off of it.

And in all honesty I would really prefer to change the color of the text in the editor, but have it parse the text in the color I've chosen in typography.css
Saxafrass replied on at Permalink Reply
This is not working for me. My typography.css file still overwrites everything. My site has a white font for all of the text and you can't see anything in TinyMCE. Has anyone successfully forced the text to be black in TinyMCE?
Raymond replied on at Permalink Reply
I dug a little deeper and was able to change mine with little hassle.

In my Typography.css I used the following code to make a blue background and white text:

/* TinyMCE specific rules */
body.mceContentBody {
background: #234865;
color: #e7eff6;
}


Then I had to clear the Site Cache and do a hard-refresh (CTRL + F5).

Now my editor looks like this:
http://icarustech.com/personal/tinymce.png...
Deladroid replied on at Permalink Reply
Deladroid
So weird. This isn't working for me, and I tried clearing cache, hard refresh, re-installing theme...
reachdigital replied on at Permalink Reply
reachdigital
I added this to my typography.css and worked fine

/* TinyMCE specific rules */
body.mceContentBody {
background: #ffffff;
color: #000000;
}

I have also used this on an other site and worked also:

/* TinyMCE specific rules */
body.mceContentBody {
background: #ffffff;
color: #000000;
}

body.mceContentBody a {
color: #000000;
}

body.mceContentBody hr {
background-color: #000000;
border: 0 none;
color: #000000;
height: 1px;
}

Hope it helps.
Deladroid replied on at Permalink Reply
Deladroid
I actually had to clear Chrome's browser files as well.
MathiasB replied on at Permalink Reply
MathiasB
Thanks!
Now I only have to find a way to decrease the properties window...

Best
Mathias
reachdigital replied on at Permalink Reply
reachdigital
Great help Raymond
globalnerds replied on at Permalink Reply
globalnerds
I am running 5.6.0 and the only thing that worked was editing my typography.css.

Just an FYI for anyone running this version.