Wie stylen Sie das Admin/Backend des ACF (Advanced Custom Fields) Wordpress Plugins?

Question

Das ACF-Backend/Admin-Panel kann sehr verwirrend sein, wenn Sie viele Optionen haben. Ich sehe, wo Sie den Prozentsatz der Breite ändern können und fügen Sie Ihren benutzerdefinierten Feldern Ihre eigene Klasse hinzu, aber wie stylen Sie diese Klassen? Das Hinzufügen dieser Klassennamen zu style.css funktioniert nicht!

Answer 1

Sie müssen diesen Code zu Ihrer Datei functions.php hinzufügen. Hier sind einige docs.

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

    /* css here */ 

    </style> 
    <?php 
} 

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

Hier ist der Code, den ich verwendet habe. Es lässt den ACF Admin viel schöner aussehen:

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