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?

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?

• css
• wp-editor

1 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' );
}