Style classic editor buttons

Question

I'm trying to style the buttons in the classic editor of wordpress, in particular to change color of the text inside or change the font-wright property.

Using the browser inspector tool I looked for the class name of the buttons, and then it was easy to change color, see image

So then I tried to make the change permanent by adding this css code to style.css file

.qt_content_center {
    color: red;
}

I refreshed the page and I verified that the edited file was loaded, but the button color was not changed.

I also tried

#qt_content_center {
    color: red;
}

but did not work.

This is how the buttons appear in the inspector tool

<div id="ed_toolbar" class="quicktags-toolbar" style="position: absolute; top: 87px; width: 702px;">
    <input type="button" id="qt_content_collpasible button" class="ed_button button button-small" value="BTN">
    <input type="button" id="qt_content_content" class="ed_button button button-small" value="CON">
    <input type="button" id="qt_content_center" class="ed_button button button-small" value="center">
<div>

Maybe to style the buttons the code have to be placed in the functions.php file, but there css code doesn’t work, does it?

Answer 1

You can add CSS to the admin area of WordPress using the [admin_head][1] hook

add_action('admin_head', 'my_custom_admin_styles');

function my_custom_admin_styles() {
  echo '<style>
    #qt_content_center {
         color: red;
    }
  </style>';
}

Note: Alternatively, you could add a stylesheet using the same function.

Edit: Adding custom stylesheet to WP Admin.

add_action( 'admin_enqueue_scripts', 'load_admin_styles' );

function load_admin_styles() {
    wp_enqueue_style( 'admin-styles', get_template_directory_uri() . '/admin-styles.css', false, '1.0.0' );
}