AI Search
Classic Search
 Search Phrase:
 Search Type:
Advanced search options
 Search in Forums:
 Search in date period:

 Sort Search Results by:

AI Assistant
Notifications
Clear all

How to change the color of the TinyMCE editor?

34 Posts
6 Users
6 Reactions
5,460 Views
Posts: 51
 guts
Topic starter
Translate
English
Spanish
French
German
Italian
Portuguese
Russian
Chinese
Japanese
Korean
Arabic
Hindi
Dutch
Polish
Turkish
Vietnamese
Thai
Swedish
Danish
Finnish
Norwegian
Czech
Hungarian
Romanian
Greek
Hebrew
Indonesian
Malay
Ukrainian
Bulgarian
Croatian
Slovak
Slovenian
Serbian
Lithuanian
Latvian
Estonian
(@guts)
Trusted Member
Joined: 2 years ago
[#51122]

How to change the background color of the TinyMCE editor?

https://imgur.com/wTch5kN


33 Replies
Tutrix
Posts: 1519
Translate
English
Spanish
French
German
Italian
Portuguese
Russian
Chinese
Japanese
Korean
Arabic
Hindi
Dutch
Polish
Turkish
Vietnamese
Thai
Swedish
Danish
Finnish
Norwegian
Czech
Hungarian
Romanian
Greek
Hebrew
Indonesian
Malay
Ukrainian
Bulgarian
Croatian
Slovak
Slovenian
Serbian
Lithuanian
Latvian
Estonian
(@tutrix)
Noble Member
Joined: 6 years ago

@guts 

tinymce.dom.DOMUtils

Example

<script type="text/javascript">
    jQuery(window).load(function() {
        tinyMCE.activeEditor.dom.addStyle('body{background-color:#000000 !important; color:#dddddd !important;}');
    });
</script>

Reply
3 Replies
 guts
(@guts)
Joined: 2 years ago

Trusted Member
Posts: 51
Translate
English
Spanish
French
German
Italian
Portuguese
Russian
Chinese
Japanese
Korean
Arabic
Hindi
Dutch
Polish
Turkish
Vietnamese
Thai
Swedish
Danish
Finnish
Norwegian
Czech
Hungarian
Romanian
Greek
Hebrew
Indonesian
Malay
Ukrainian
Bulgarian
Croatian
Slovak
Slovenian
Serbian
Lithuanian
Latvian
Estonian

@tutrix Thanks for your reply but where do I add this code?


Reply
BlackRaz
Admin
(@blackraz)
Joined: 9 years ago

Contributor
Posts: 396
Tutrix
Translate
English
Spanish
French
German
Italian
Portuguese
Russian
Chinese
Japanese
Korean
Arabic
Hindi
Dutch
Polish
Turkish
Vietnamese
Thai
Swedish
Danish
Finnish
Norwegian
Czech
Hungarian
Romanian
Greek
Hebrew
Indonesian
Malay
Ukrainian
Bulgarian
Croatian
Slovak
Slovenian
Serbian
Lithuanian
Latvian
Estonian

@guts 
You can try this plugin:
https://wordpress.org/plugins/code-snippets/


Reply
 guts
(@guts)
Joined: 2 years ago

Trusted Member
Posts: 51
Tutrix
Translate
English
Spanish
French
German
Italian
Portuguese
Russian
Chinese
Japanese
Korean
Arabic
Hindi
Dutch
Polish
Turkish
Vietnamese
Thai
Swedish
Danish
Finnish
Norwegian
Czech
Hungarian
Romanian
Greek
Hebrew
Indonesian
Malay
Ukrainian
Bulgarian
Croatian
Slovak
Slovenian
Serbian
Lithuanian
Latvian
Estonian

@blackraz Thank you, I downloaded another free version.

However, I only wish to modify the background-color on the dark version of the forum.
Is it feasible to make this change using CSS?


Reply
Posts: 51
 guts
Topic starter
Translate
English
Spanish
French
German
Italian
Portuguese
Russian
Chinese
Japanese
Korean
Arabic
Hindi
Dutch
Polish
Turkish
Vietnamese
Thai
Swedish
Danish
Finnish
Norwegian
Czech
Hungarian
Romanian
Greek
Hebrew
Indonesian
Malay
Ukrainian
Bulgarian
Croatian
Slovak
Slovenian
Serbian
Lithuanian
Latvian
Estonian
(@guts)
Trusted Member
Joined: 2 years ago

Additionally, I only wish to modify the background-color on the dark version of the forum.
Is it feasible to make this change using CSS?


Reply
Posts: 144
Translate
English
Spanish
French
German
Italian
Portuguese
Russian
Chinese
Japanese
Korean
Arabic
Hindi
Dutch
Polish
Turkish
Vietnamese
Thai
Swedish
Danish
Finnish
Norwegian
Czech
Hungarian
Romanian
Greek
Hebrew
Indonesian
Malay
Ukrainian
Bulgarian
Croatian
Slovak
Slovenian
Serbian
Lithuanian
Latvian
Estonian
(@cotner)
Estimable Member
Joined: 4 years ago

I am interested in the same modification. Being able to change the background color based on light or dark mode.


Reply
Tutrix
Posts: 1519
Translate
English
Spanish
French
German
Italian
Portuguese
Russian
Chinese
Japanese
Korean
Arabic
Hindi
Dutch
Polish
Turkish
Vietnamese
Thai
Swedish
Danish
Finnish
Norwegian
Czech
Hungarian
Romanian
Greek
Hebrew
Indonesian
Malay
Ukrainian
Bulgarian
Croatian
Slovak
Slovenian
Serbian
Lithuanian
Latvian
Estonian
(@tutrix)
Noble Member
Joined: 6 years ago

Posted by: @guts

Is it feasible to make this change using CSS?

If you use WP Dark Mode, you have new CSS classes.
e.g. wp-dark-mode, wp-dark-mode-ignore, --wp-dark-mode-inline, etc.

you can check with the browser developer tools, which will then be used for the editor.

I don't use the dark mode plugin, so I can't help you.

just as an example, probably not working

<script type="text/javascript">
    jQuery(window).load(function() {
        tinyMCE.activeEditor.dom.addStyle('.wp-dark-mode body{background-color:#000000 !important; color:#dddddd !important;}');
    });
</script>

Reply
1 Reply
 guts
(@guts)
Joined: 2 years ago

Trusted Member
Posts: 51
Translate
English
Spanish
French
German
Italian
Portuguese
Russian
Chinese
Japanese
Korean
Arabic
Hindi
Dutch
Polish
Turkish
Vietnamese
Thai
Swedish
Danish
Finnish
Norwegian
Czech
Hungarian
Romanian
Greek
Hebrew
Indonesian
Malay
Ukrainian
Bulgarian
Croatian
Slovak
Slovenian
Serbian
Lithuanian
Latvian
Estonian

@tutrix I don't find the class. 😐 

I added my forum on my signature if you can help?

I tried with this code but it doesn't work: 

<script type="text/javascript">
    jQuery(window).load(function() {
        tinyMCE.activeEditor.dom.addStyle('.darklup-dark-mode-enabled #wpforo #wpforo-wrap .wpf-field .wpf-field-wrap .mce-tinymce.mce-container.mce-panel{background-color:#15202b !important; color:#ced9e6 !important;}');
    });
</script>

 


Reply
Page 1 / 3
Share: