Remove TinyMCE skin from wordpress

1 Views

I have been searching for a way to completely remove the TinyMCE skin that is applied to the TinyMCE editor in WordPress. I am using a custom plugin to style up the backend.

Currently I am using !important tagged on to the css in order to force my styling to come through – eg .mce-window-head {background: blue !important;} which isn’t ideal.

Read More

I have tried adjusting the priority when using the add_action hook which didn’t helped either.

Any guidance would be appreciated.

Post Views: 1

Related posts

1 comment

  1. You need to deregister the editor-buttons stylesheet like so:

    add_action( 'admin_enqueue_scripts', 'so_32482665_remove_editor_buttons_css' );

function so_32482665_remove_editor_buttons_css() {
    wp_deregister_style( 'editor-buttons' );
}

    Dequeuing won’t work because WordPress doesn’t enqueue the stylesheet in the normal way, it prints it out directly with wp_print_styles().

    This still leaves you with the default TinyMCE skin though, which looks like it’s added in JavaScript so there doesn’t appear to be a way to remove it with an action or filter. Whilst it’s not considered best practice, outputting the link to your stylesheet with the admin_footer hook means it’ll get loaded after the default skin and will override the styles without having to use !important:

    add_action( 'admin_footer', 'so_32482665_output_custom_editor_css' );

function so_32482665_output_custom_editor_css() {
?>
<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/custom-editor.css" type="text/css" />
<?php
}

    I’d probably use both these approaches, just so you’re not fighting with specificity issues from multiple stylesheets.

Comments are closed.