Title: Visual Editor Toolbar
Last modified: October 21, 2019

---

# Visual Editor Toolbar

 *  Resolved [Chuckie](https://wordpress.org/support/users/ajtruckle/)
 * (@ajtruckle)
 * [6 years, 7 months ago](https://wordpress.org/support/topic/visual-editor-toolbar/)
 * Is there a github / forum area where I can raise issues with the toolbar and 
   it’s functionality / styling?
 * I assume it is thirdparty …

Viewing 5 replies - 1 through 5 (of 5 total)

 *  [tapiohuuhaa](https://wordpress.org/support/users/tapiohuuhaa/)
 * (@tapiohuuhaa)
 * [6 years, 7 months ago](https://wordpress.org/support/topic/visual-editor-toolbar/#post-12051521)
 * Visual editor is TINYMCE. You can’t effect all CSS and there are problems with
   CSS:
    1. Editor itself is an embedded object and you can’t affect to that with you own
       CSS
    2. The editor load before its own stylesheets. It is quite complicated to override
       that CSS with your own CSS.
 *  Thread Starter [Chuckie](https://wordpress.org/support/users/ajtruckle/)
 * (@ajtruckle)
 * [6 years, 7 months ago](https://wordpress.org/support/topic/visual-editor-toolbar/#post-12051689)
 * I have managed to do it. Related question here:
 * [https://stackoverflow.com/questions/58493680/how-to-change-background-of-toolbar-button-when-it-is-on-like-the-redo-undo](https://stackoverflow.com/questions/58493680/how-to-change-background-of-toolbar-button-when-it-is-on-like-the-redo-undo)
 * Just missing one aspect of styling.
 *  Thread Starter [Chuckie](https://wordpress.org/support/users/ajtruckle/)
 * (@ajtruckle)
 * [6 years, 7 months ago](https://wordpress.org/support/topic/visual-editor-toolbar/#post-12053264)
 * Sorted it. I basically needed the toolbar and button with the same colours so
   that the rectangle displayed.
 *  [tapiohuuhaa](https://wordpress.org/support/users/tapiohuuhaa/)
 * (@tapiohuuhaa)
 * [6 years, 7 months ago](https://wordpress.org/support/topic/visual-editor-toolbar/#post-12054309)
 * I tried to set backgrounds, but succeeded just partial.
 * I made also dark theme for which I could set textarea colors because the editor
   is inside an iframe.
 * see
    [https://www.sanaristikkofoorumi.net/wordpress/forums/forum/sanaristikot/suomen-kuvalehti/](https://www.sanaristikkofoorumi.net/wordpress/forums/forum/sanaristikot/suomen-kuvalehti/)
 * but first you need to change the color theme:
    [https://www.sanaristikkofoorumi.net/wordpress/?varit=3](https://www.sanaristikkofoorumi.net/wordpress/?varit=3)
   Tumma = dark.
 *  [tapiohuuhaa](https://wordpress.org/support/users/tapiohuuhaa/)
 * (@tapiohuuhaa)
 * [6 years, 7 months ago](https://wordpress.org/support/topic/visual-editor-toolbar/#post-12057298)
 * I didn’t get the layout of the editor exactly, which I wanted.
 *     ```
       div.wp-editor-container div.quicktags-toolbar, .wp-switch-editor {
           background-color: rgb(60, 60, 60)!important;
       }
       .wp-editor-tabs	button.wp-switch-editor  {
           border-color:  rgba(255,  255,  255,  0.2)!important;
           color: #fff!important;
       }
       body.bbpress #bbpress-forums .bbp-topic-title span.bbr-resolution-not-support-sticker::after {
           color: #fff!important;
           border-width: 0!important;
       }
       .mce-widget.mce-btn button, .mce-widget.mce-btn button .mce-ico, .mce-dragh  .mce-close, button .mce-ico, #wp-link-update .button-primary, div.wp-editor-tools div.wp-editor-container div.quicktags-toolbar input.ed-button.button.button-small, button mce-ico.mce-ico-remove {
           background-color: rgba(67, 69, 81, 1.0)!important;
           color: #fff!important;
           border-width: 0!important;
           outline-width: 0!important;
           text-shadow: none!important;
           opacity: 1.0!important;
       }
       button .mce-ico:focus {
           border-width: 0!important;
           outline-width: 0!important;
       }
   
       div.wp-editor-container div.quicktags-toolbar input.ed-button.button-small {
           margin-right: 2px!important;
       }
       .mce-widget.mce-btn button, .mce-close, #wp-link-update .button-primary, div.mce-dragh button.mce-close, div.wp-editor-tools div.wp-editor-container div.quicktags-toolbar input.ed-button.button-small {
           box-shadow: 2px 2px 2px #000!important;
       }
       .mce-widget.mce-btn button:hover, .mce-toolbar button .mce-ico:hover, .mce-reset button mce-ico.mce-ico-remove {
           background-color: #121212!important;
           border-width: 0!important;
           color: #fff!important;
       }
       form#wp-link, form#wp-link .query-results, form#wp-link .query-results *, form#wp-link input, form#wp-link select, form#wp-link option input, .mce-container-body, .mce-container, .mce-textbox, form#wp-link .submitbox {
           background-color: #333!important;
           color: #fff!important;
       }
       form#wp-link #link-modal-title, .mce-window-head button.mce-close .mce-ico:hover, div.mce-window-head  button.mce-close:hover, #wp-link button#wp-link-close:hover, .submitbox #wp-link-cancel button.button:hover, .submitbox #wp-link-update .button-primary:hover, .mce-window-head .mce-title {
           background-color: #121212!important;
           color: #fff!important;
           outline: 0!important;
           border-width: 0!important;
       }
       ```
   
 * What is missing/wrong:
    1. No hover for all buttons in link and image dialog boxes
    2. Some buttons have light blue border
    3. Visual editor buttons have borders when hovering
    4. An image dialog button has gray color and when hovering blue color
    5. Text editor buttons have borders
    6. Text editor buttons don’t have shadows.
 * Related page:
    [https://www.sanaristikkofoorumi.net/test/forums/topic/visual-problems/#post-15967](https://www.sanaristikkofoorumi.net/test/forums/topic/visual-problems/#post-15967)
 * Note to set first dark theme here:
    [https://www.sanaristikkofoorumi.net/test/asetukset/?varit=](https://www.sanaristikkofoorumi.net/test/asetukset/?varit=)?(
   reload page after visit)
 * Any help to get these issues fixed would be nice.
    -  This reply was modified 6 years, 7 months ago by [tapiohuuhaa](https://wordpress.org/support/users/tapiohuuhaa/).

Viewing 5 replies - 1 through 5 (of 5 total)

The topic ‘Visual Editor Toolbar’ is closed to new replies.

 * ![](https://ps.w.org/bbp-style-pack/assets/icon-256x256.jpg?rev=2706563)
 * [bbp style pack](https://wordpress.org/plugins/bbp-style-pack/)
 * [Support Threads](https://wordpress.org/support/plugin/bbp-style-pack/)
 * [Active Topics](https://wordpress.org/support/plugin/bbp-style-pack/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/bbp-style-pack/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/bbp-style-pack/reviews/)

 * 5 replies
 * 2 participants
 * Last reply from: [tapiohuuhaa](https://wordpress.org/support/users/tapiohuuhaa/)
 * Last activity: [6 years, 7 months ago](https://wordpress.org/support/topic/visual-editor-toolbar/#post-12057298)
 * Status: resolved