How do you style the admin/backend of the ACF (Advanced Custom Fields) Wordpress plugin?

Question

The ACF backend/admin panel can get very confusing when you have a lot of options. I see where you can change the width percentage and add your own class to the custom fields, but how do you style those classes? Just adding those class names to style.css doesn't work!

Answer 1

You have to add this code to your functions.php file. Here are some docs.

function my_acf_admin_head() {
    ?>
    <style type="text/css">

    /* css here */

    </style>
    <?php
}

add_action('acf/input/admin_head', 'my_acf_admin_head');

Here's the very code that I used. It makes the ACF Admin look a lot nicer:

function my_acf_admin_head() {
?>
<style type="text/css">

    .acf-flexible-content .layout .acf-fc-layout-handle {
        /*background-color: #00B8E4;*/
        background-color: #202428;
        color: #eee;
    }

    .acf-repeater.-row > table > tbody > tr > td,
    .acf-repeater.-block > table > tbody > tr > td {
        border-top: 2px solid #202428;
    }

    .acf-repeater .acf-row-handle {
        vertical-align: top !important;
        padding-top: 16px;
    }

    .acf-repeater .acf-row-handle span {
        font-size: 20px;
        font-weight: bold;
        color: #202428;
    }

    .imageUpload img {
        width: 75px;
    }

    .acf-repeater .acf-row-handle .acf-icon.-minus {
        top: 30px;
    }

</style>
<?php
}

add_action('acf/input/admin_head', 'my_acf_admin_head');