Notifications
Clear all

wpForo 1.x.x [Solved] Changing Background Color of TinyMCE Editor

9 Posts
4 Users
6 Reactions
4,680 Views
Posts: 11
Topic starter
(@donnongt)
Active Member
Joined: 4 years ago

Hello. I am trying to change the background color of the text input fields on my wpForo forum. I was able to change most of the text input fields with some added css, but the TinyMCE editors have proven more difficult.

I added the code below to the footer of my site and it changes the color of the editor background when you click into a specific forum and then click the 'Add Topic' button. If you click on the 'Add Topic' button on a forum index page and then choose the destination forum you want, the textarea of the editor that appears is the new color for an instant and then it changes back to white. The color change also does not work in the editor when you are editing a post.

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

Any ideas on how to change the background color of all the TinyMCE editors? I appreciate the help.

8 Replies
Posts: 11
Topic starter
(@donnongt)
Active Member
Joined: 4 years ago

Any ideas?

1 Reply
Alvina
Moderator
(@alvina)
Joined: 5 years ago

Member
Posts: 1863

@donnongt,

Sorry for the late response.

I've just asked our developers about it and currently, I'm waiting for the response from them. I'll update the topic once I get some response from them.

BlackRaz
Posts: 404
Admin
(@blackraz)
Contributor
Joined: 8 years ago

Hi @donnongt

Please remove the code you've added in footer, then install and activate the Code Snippets plugin. After this, insert the code below using the plugin. The plugin can be found here:  https://wordpress.org/plugins/code-snippets/ Another way, you can put the same code in the active theme functions.php file.

add_filter('wpforo_editor_settings', function($s){
$s['tinymce']['content_style'] .= "body{background-color:#ccffcc; color:#000000;}";
return $s;
});

 

1 Reply
(@donnongt)
Joined: 4 years ago

Active Member
Posts: 11
Posted by: @blackraz

Hi @donnongt

Please remove the code you've added in footer, then install and activate the Code Snippets plugin. After this, insert the code below using the plugin. The plugin can be found here:  https://wordpress.org/plugins/code-snippets/ Another way, you can put the same code in the active theme functions.php file.

 

add_filter('wpforo_editor_settings', function($s){
$s['tinymce']['content_style'] .= "body{background-color:#ccffcc; color:#000000;}";
return $s;
});

 

 

Hello. I appreciate the heads-up on the Code Snippets plugin.

I entered the code you wrote above in the Code Snippets plugin and unfortunately, it did not work. It looked like this in the plugin:

<?php

add_action( 'wp_head', function () { ?>

<script type="text/javascript">
add_filter('wpforo_editor_settings', function($s){
$s['tinymce']['content_style'] .= "body{background-color:#ccffcc; color:#000000;}";
return $s;
});
</script>

<?php } );

 

When I entered the original code I was using into Code Snippets it worked, but with the same problem as before. It does not work when you edit a post or when you click on an 'Add Topic' button in a Threaded Category, on a forum index page. It does work for just a moment and then something overrides it and changes the textarea back to white. The original code looks like this, in the Code Snippets plugin:

 

<?php

add_action( 'wp_head', function () { ?>

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

<?php } )

 

I'm not sure where to look next. Something interferes with attempts to change in the textarea background color in those two TinyMCE editor forms and I'm not sure what it is. Any ideas.

Thanks again for the advice.

 

dimalifragis
Posts: 2611
(@dimalifragis)
Famed Member
Joined: 5 years ago

The Code Snippets plugin make all sites SLOW. Not sure why, maybe because all code in stored in the database.

The best way is to create  a pseudo plugin that contain all custom code. There is plenty of information about it on the net.

 

3 Replies
(@donnongt)
Joined: 4 years ago

Active Member
Posts: 11
Posted by: @dimalifragis

The Code Snippets plugin make all sites SLOW. Not sure why, maybe because all code in stored in the database.

The best way is to create  a pseudo plugin that contain all custom code. There is plenty of information about it on the net.

 

Thanks for the info. I'll look into doing that. Cheers.

 

Alvina
Moderator
(@alvina)
Joined: 5 years ago

Member
Posts: 1863

@donnongt,

Have you tried to add the code in the active theme functions.php file? If not please add the code provided by Blackraz in the above post, delete all caches, and check again.

(@donnongt)
Joined: 4 years ago

Active Member
Posts: 11
Posted by: @alvina

@donnongt,

Have you tried to add the code in the active theme functions.php file? If not please add the code provided by Blackraz in the above post, delete all caches, and check again.

OK, adding it to the functions.php file did the trick. That will mean possibly having to place the code back into the functions file whenever the theme is upgraded, but that is a small price to pay.

I really appreciate your help with this. It was a small issue, but it was frustrating. Eric