I am using dark style with my own custom changes.
But I can't change editor's background.
White color looks terrible.
How can I change this background?
@codetyper try this css (obviously, change for the actual colour you want)
body#tinymce {
background: red !important;
}
Wait - odd. Whilst it works in preview (F12), it doesn't work when reloading the site despite clearing all caches.
I'm sorry, but this can't be solved using CSS code, it also requires an additional js code. Were are peppering to add such feature in future realizes.
I'll update this topic once I got some news for you.
@sofy thanks. From my experience with TinyMCE this was the expected answer.
Sofy is right, there is no way to affect the editor style using CSS code. Try to use JS code in footer.php file of your WordPress active theme. Find the footer.php file and put this code after <?php wp_footer() ?> function. The black bold codes are color codes (#000000 is the background, #dddddd is the font color), you can change those before using:
<script type="text/javascript">
jQuery(window).load(function() {
tinyMCE.activeEditor.dom.addStyle('body{background-color:#000000 !important; color:#dddddd !important;}');
});
</script>
It should look like this:
@robert @sofy this works great - is there an additional command that can be used to set the default font family in the editor ? Doesn't match the rest of my site 🙁
Thanks
Sofy is right, there is no way to affect the editor style using CSS code. Try to use JS code in footer.php file of your WordPress active theme. Find the footer.php file and put this code after <?php wp_footer() ?> function. The black bold codes are color codes (#000000 is the background, #dddddd is the font color), you can change those before using:
<script type="text/javascript">
jQuery(window).load(function() {
tinyMCE.activeEditor.dom.addStyle('body{background-color:#000000 !important; color:#dddddd !important;}');
});
</script>It should look like this:
Unfortunately, this change only works on some of the editor backgrounds. It does not work on the post edit editor, as well as a couple of others. Any ideas about those?
Please don't duplicate the questions.
Just follow this support topic: https://wpforo.com/community/how-to-and-troubleshooting-2/changing-background-color-of-tinymce-editor/#post-46384
@robert @sofy this works great - is there an additional command that can be used to set the default font family in the editor ? Doesn't match the rest of my site 🙁
Thanks
The editor font-family should not match to your website. This is an editor area. It always has own font-family. I've already provided a code to insert CSS code in Editor. You can insert any code you want. If you're familiar with CSS and you know the font-family you can put it beside to the color and background.
Thanks @robert but this doesn't seem to work. Even if I use !important; 😠