Notifications
Clear all

wpForo 1.x.x [Closed] Text Editor background

19 Posts
7 Users
8 Reactions
5,113 Views
Posts: 9
Topic starter
(@codetyper)
Active Member
Joined: 7 years ago

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?

18 Replies
1 Reply
(@anonymous3542)
Joined: 7 years ago

Honorable Member
Posts: 393

@codetyper try this css (obviously, change for the actual colour you want)

body#tinymce {
background: red !important;
}
Posts: 393
(@anonymous3542)
Honorable Member
Joined: 7 years ago

Wait - odd. Whilst it works in preview (F12), it doesn't work when reloading the site despite clearing all caches.

Sofy
Posts: 4772
 Sofy
Admin
(@sofy)
Support Team
Joined: 7 years ago

Hi @anonymous3542@codetyper 

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.

 

1 Reply
(@anonymous3542)
Joined: 7 years ago

Honorable Member
Posts: 393

@sofy thanks. From my experience with TinyMCE this was the expected answer. 

Robert
Posts: 10587
Admin
(@robert)
Support Team
Joined: 9 years ago

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:

 

 

4 Replies
(@anonymous3542)
Joined: 7 years ago

Honorable Member
Posts: 393

@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

 An
(@an)
Joined: 5 years ago

New Member
Posts: 2
(@donnongt)
Joined: 4 years ago

Active Member
Posts: 11
Posted by: @robert

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?

 

Alvina
Moderator
(@alvina)
Joined: 5 years ago

Member
Posts: 1863

@donnongt,

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
Posts: 10587
Admin
(@robert)
Support Team
Joined: 9 years ago
Posted by: anonymous3542

@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.

1 Reply
(@anonymous3542)
Joined: 7 years ago

Honorable Member
Posts: 393

Thanks @robert but this doesn't seem to work. Even if I use !important; 😠

Page 1 / 3