当你有很多选项时,ACF后端/管理面板会变得非常混乱。我知道你可以在哪里改变宽度百分比,并向自定义字段添加你自己的类,但是你如何设置这些类的样式呢?仅仅将这些类名添加到style.css中是行不通的!
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');
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');
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; }
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' ); }
4条答案
按热度按时间3b6akqbq1#
你必须把这些代码添加到你的functions.php文件中。
下面是我使用的代码。它使ACF Admin看起来更漂亮:
8oomwypt2#
在补充杰西的回答,完美的工作,想分享我的CSS补充ACF Metabox,日历是风格太。
看起来是这样的
好好享受
juzqafwq3#
如果你想发疯(或者停止发疯),你可以这样做,根据需要添加尽可能多的“n”。
fivyi3re4#
一个合适的WordPress方法是将你的脚本和样式排队。
documentation示例: