1

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

enter image description here

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?

2

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' );
}
  • thank you im gonna try it asap, what do you mean with "you could add a stylesheet using the same function" ? – sound wave Sep 20 at 13:50
  • 1
    something like wp_enqueue_style('my-admin-style', get_template_directory_uri() . '/path/to/admin/style.css') ? – sound wave Sep 20 at 13:57
  • 1
    @soundwave - yes I will add to my answer. – Matthew Woodard Sep 20 at 17:06

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.