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!

Averill

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

Averill

What about Options page? – Loidaloin

Answer 2

In complement of Jesse answer that worked perfectly, Wanna share my CSS complement for ACF Metabox, Calendar is styled too.

This is what it looks like

Enjoy

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;
        }
        .acf_postbox {
            background-color: #0473AA;
            border-radius: 5px;
        }
        .acf_postbox input[type=text],
        .acf_postbox input[type=search],
        .acf_postbox input[type=radio],
        .acf_postbox input[type=tel],
        .acf_postbox input[type=time],
        .acf_postbox input[type=url],
        .acf_postbox input[type=week],
        .acf_postbox input[type=password],
        .acf_postbox input[type=checkbox],
        .acf_postbox input[type=color],
        .acf_postbox input[type=date],
        .acf_postbox input[type=datetime],
        .acf_postbox input[type=datetime-local],
        .acf_postbox input[type=email],
        .acf_postbox input[type=month],
        .acf_postbox input[type=number],
        .acf_postbox select,
        .acf_postbox textarea {
            border-radius: 5px;
        }

        .acf_postbox p.label {
            text-shadow: none;
        }

        .acf_postbox h2.hndle,
        .acf_postbox p.label label,
        .acf_postbox p.label,
        .acf_postbox .toggle-indicator {
            color: #ffffff;
        }

        /*---- Date Picker Style ----*/

        .ui-acf .ui-datepicker select.ui-datepicker-month,
        .ui-acf .ui-datepicker select.ui-datepicker-year {
            border-radius: 5px;
        }

        .ui-acf .ui-state-default{
            border: 1px solid #ffffff!important;
            background: none!important;
        }

        .ui-acf .ui-datepicker .ui-state-active, .ui-acf .ui-state-default:hover {
            background: #2EA2CC!important;
            color: #ffffff;
        }

        .ui-acf .ui-widget-header {
           background: #3e3e3e;
        }

        .ui-acf .ui-datepicker .ui-datepicker-buttonpane {
            background: #0473AA;
            border-top: none;
        }

        .ui-acf .ui-datepicker .ui-datepicker-buttonpane button {
            text-shadow: none;
            color: #ffffff;
            text-decoration: underline;
            border: none!important;
        }
    </style>
    <?php
    }

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

Brent

What about Options page? – Loidaloin

Answer 3

A proper WordPress way is to enqueue your scripts and styles.

Example from documentation:

add_action('acf/input/admin_enqueue_scripts', 'my_acf_admin_enqueue_scripts');

function my_acf_admin_enqueue_scripts() {
        wp_enqueue_style( 'my-acf-input-css', get_stylesheet_directory_uri() . '/css/my-acf-input.css', false, '1.0.0' );
        wp_enqueue_script( 'my-acf-input-js', get_stylesheet_directory_uri() . '/js/my-acf-input.js', false, '1.0.0' );
    }

Hanway

Answer 4

If you want to go nuts (or stop from going), you can do something like this and add as many 'n's as needed.

.acf-repeater.-row > table > tbody > tr:nth-child(2n) > td,
.acf-repeater.-block > table > tbody > tr:nth-child(2n) > td,
.acf-repeater.-row > table > tbody > tr:nth-child(2n) > td tr > td,
.acf-repeater.-block > table > tbody > tr:nth-child(2n) > td tr > td {
    border-top: 2px solid #46474A;
    background: #ebebed;
}

.acf-repeater.-row > table > tbody > tr:nth-child(2n) .acf-row-handle span,
.acf-repeater.-block > table > tbody > tr:nth-child(2n) .acf-row-handle span,
.acf-repeater.-row > table > tbody > tr:nth-child(2n) > td .acf-row-handle span,
.acf-repeater.-block > table > tbody > tr:nth-child(2n) > td .acf-row-handle span{
    color: #46474A;
}   

Wilscam

What about Options page? – Loidaloin