Change white background of TOOLBAR tinymce richtext editorto gray

kokwo.com · July 26, 2020, 1:17pm

0

I was able to change the background of textarea to gray using Javascript and external css but not the panel/toolbar area. The toolbar area still remain white and this is not good for what I need it for any help.

I had used a Javascript function with this

 editor.getBody().style.backgroundColor = "#F5f5f5";

And css selector with this

.mce-content-body {
background: #F5f5f5 ;
}

/* toolbar */
.mce-toolbar-grp {
    background-color: #F5f5f5 !important; /* uses !important or override .mce-panel background-color/image */
    background-image: none !important;
}

ErnieAlex · July 27, 2020, 12:00am

I found this example somewhere. Hope it helps…

/* toolbar */
.mce-toolbar-grp, .mce-toolbar {
    background-color: #F5F5F5 !important; /* uses !important or override .mce-panel background-color/image */
    background-image: none !important;
}

/* text color */
#tinymce {
   color: #dd9900;
}

/* button text color */
.mce-ico {
   color: #dd9900;
}

/* button background color */
.mce-btn button {
    background-color: #000000;
}

It is similar to yours. But, it really depends on which version you are using. These are for V4. The newer
V5 has a plugin for it to allow changes for toolbar colors. Which are you using?