Visual Editor Toolbar

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.

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

Note to set first dark theme here:
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.