我想增加WP customizer中扩展侧栏的宽度。
相关自定义程序标记：
<div class="wp-full-overlay expanded preview-desktop">
<form id="customize-controls" class="wrap wp-full-overlay-sidebar">
<div id="customize-preview" class="wp-full-overlay-main">
CSS：
.wp-full-overlay.expanded {
margin-left: 300px;
}
.wp-full-overlay-sidebar {
width: 300px;
}
.wp-full-overlay-main {
right: auto;
width: 100%;
我尝试了我的childtheme风格的CSS。css
.wp-full-overlay.expanded {
margin-left: 500px !important;
}
#customize-controls.wp-full-overlay-sidebar {
width: 500px !important;
}
这些JS行在一个排队的脚本中。js公司
jQuery(document).ready(function( $ ) {
$(".wp-full-overlay.expanded").css("marginLeft", "500px");
$(".wp-full-overlay-sidebar").css("width", "500px");
});
但它不起作用。
最合适的回答,由SO网友:CodeMascot 整理而成
将样式表排入管理员或仪表板admin_enqueue_scripts 钩状物如下-
add_action( \'admin_enqueue_scripts\', \'the_dramatist_admin_styles\' );
function the_dramatist_admin_styles() {
wp_enqueue_style( \'admin-css-override\', get_template_directory_uri() . \'/your-admin-css-file.css\', false );
}
把你的管理员
css 代码在那里。您的代码位于
your-admin-css-file.css 看起来有点像-
.wp-full-overlay.expanded {
margin-left: 500px !important;
}
#customize-controls.wp-full-overlay-sidebar {
width: 500px !important;
}
它会起作用的。
SO网友:jerclarke
让自定义侧边栏在屏幕上占据更高的百分比，CodeMascot的答案是可行的，但我想我也应该提交一个基于百分比的答案，因为从我所能看出，当前系统主要是通过屏幕的百分比来实现的，这似乎是一种优雅的方式，这样，如果使用较小的屏幕，就不太可能出现问题。
/*Wider customizer sidebar based on percentage*/
/*It will fall back to min-width: 300px*/
.wp-full-overlay-sidebar {
width: 22%;
}
/*Wider margin on preview to make space for sidebar (match theme)*/
.wp-full-overlay.expanded {
margin-left: 22%;
}
/*Below a certain size we revert to 300px because it\'s the min-width*/
/*Calculate this number as 300/% i.e. 300/.22=1363*/
@media (max-width: 1363px) {
.wp-full-overlay.expanded {
margin-left: 300px;
}
}
对我来说，这解决了我的问题，因为我调整了百分比，以反映我正在使用的网站在屏幕上所占的最大尺寸。对于编辑CSS，如果我在一个最大宽度较小的网站上工作，我会把它做得更高。
如果CSS文件位于插件中而不是主题中，那么可以将其排队（如果您的主题中有CSS文件，请参见上面CodeMascot的回答），以获得额外的积分：
function jer_admin_styles() {
wp_enqueue_style( \'admin-css-override\', plugins_url( "jer-admin.css", __FILE__ ) , false );
}
add_action( \'admin_enqueue_scripts\', \'jer_admin_styles\' );
