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...
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...
you can change it in your theme's typography.css, never make changes to the core,
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
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
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?
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:
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...
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...
So weird. This isn't working for me, and I tried clearing cache, hard refresh, re-installing theme...
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.
/* 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.
I actually had to clear Chrome's browser files as well.
Thanks!
Now I only have to find a way to decrease the properties window...
Best
Mathias
Now I only have to find a way to decrease the properties window...
Best
Mathias
Great help Raymond
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.
Just an FYI for anyone running this version.
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