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

 Sort Search Results by:

Filter by custom fields

Topic prefix

AI Assistant
Notifications
Clear all

How to change the color of the TinyMCE editor?

34 Posts
6 Users
6 Reactions
5,388 Views
Posts: 22
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
(@systemcrack)
Eminent Member
Joined: 4 years ago

Rereading Tutrix's advice... in case the previous references didn't work, you could try this too

wpc--darklup-element

 

 Immagine

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

@systemcrack  @tutrix I tried but none of them work. 😟


Reply
Posts: 22
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
(@systemcrack)
Eminent Member
Joined: 4 years ago

Sorry @guts, I tried for more than an hour, after installing darklup on my forum. I can't fix this. 

I give up for now...
I wonder if it wouldn't be better to assign a color that goes well with both the dark and light versions... it would save time. Or you can contact the darklup staff via email and wait for them to respond.


Reply
7 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

@systemcrack Yes, WP dark mode is better but I have a paid version of their plugin.
A lot of bugs, I should have bought WP Dark Mode...

However, I have now more than 400 lines of custom CSS, spent days on this dark style. ^^


Reply
Sofy
 Sofy
Admin
(@sofy)
Joined: 8 years ago

Support Team
Posts: 5774
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

Please use the solution provided here: https://wpforo.com/community/postid/46394/

It should resolve the issue for you.


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

@sofy Amazing, it works! Thank you!


Reply
(@cotner)
Joined: 4 years ago

Estimable Member
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

@sofy Now I need to figure out how to use this code ONLY when WPDark Mode is activated.


Reply
 guts
(@guts)
Joined: 2 years ago

Trusted Member
Posts: 51
Sofy
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 Same. ^^


Reply
Sofy
 Sofy
Admin
(@sofy)
Joined: 8 years ago

Support Team
Posts: 5774
Sofy
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 

The solution I've provided won't work in this case, since it requires theme-dependent JS code. You need to locate the button responsible for toggling the style from light to dark, add the event function, and adjust the color accordingly.

tinyMCE.activeEditor.dom.addStyle('body{background-color: #000000 !important; color: #FFFFFF !important;}');
tinyMCE.activeEditor.editorContainer.querySelector('.mce-statusbar').style.backgroundColor = '#000000';
tinyMCE.activeEditor.editorContainer.querySelector('.mce-statusbar').style.color = '#ffffff';

 


Reply
 guts
(@guts)
Joined: 2 years ago

Trusted Member
Posts: 51
Sofy
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

@sofy

Thank you, but could you please provide more details?

I'm unsure which file I need to edit, and I didn't fully grasp the point you were making.

 


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

@guts 

try

background-color: transparent;

instead of

background-color: #ced9e6;

and use this css code

#wpforo #wpforo-wrap .wpf-field .wpf-field-wrap .mce-tinymce.mce-container.mce-panel {
  border: 1px solid #dddddd !important;
}
div.mce-panel {
  background:transparent !important;
}
 dark mode editor

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

Thank you, Tetrix, I appreciate your assistance. The functionality is working well.

However, my current concern pertains to the color when typing in the editor, as it appears black on the dark theme.

This issue doesn't occur on the light


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

@guts 

use

color: #99999;

that is readable in dark and light 😉 


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

I've attempted modifications on all the classes mentioned above and even in the template functions.php, but the changes are not taking effect.

Could you please provide me with the specific class that needs to be?


Reply
Tutrix
(@tutrix)
Joined: 6 years ago

Noble Member
Posts: 1519
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 

add to body script

body {background-color: transparent; color: #999999;}

or !important


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

@tutrix It works, thank you very much Tutrix.


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 getting more confused.... 🤣 🤣 🤣 

For WP Dark Mode we do what? And Where?


Reply
Page 3 / 3
Share: