css 你如何风格的ACF(高级自定义域)WordPress插件的管理/后端?

sdnqo3pr  于 2023-03-20  发布在  WordPress
关注(0)|答案(4)|浏览(129)

当你有很多选项时,ACF后端/管理面板会变得非常混乱。我知道你可以在哪里改变宽度百分比,并向自定义字段添加你自己的类,但是你如何设置这些类的样式呢?仅仅将这些类名添加到style.css中是行不通的!

3b6akqbq

3b6akqbq1#

你必须把这些代码添加到你的functions.php文件中。

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

    /* css here */

    </style>
    <?php
}

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

下面是我使用的代码。它使ACF Admin看起来更漂亮:

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

8oomwypt2#

在补充杰西的回答,完美的工作,想分享我的CSS补充ACF Metabox,日历是风格太。
看起来是这样的

好好享受

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

juzqafwq3#

如果你想发疯(或者停止发疯),你可以这样做,根据需要添加尽可能多的“n”。

.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;
}
fivyi3re

fivyi3re4#

一个合适的WordPress方法是将你的脚本和样式排队。
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' );
    }

相关问题