1

I want to increase the width of the expanded sidebar in the WP customizer.

The relevant customizer markup:

<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">

The CSS:

.wp-full-overlay.expanded {
    margin-left: 300px;
}

.wp-full-overlay-sidebar {
    width: 300px;
}
.wp-full-overlay-main {
    right: auto;
    width: 100%;

I tried it with this CSS in my childtheme´s style.css

.wp-full-overlay.expanded {
    margin-left: 500px !important;
}
#customize-controls.wp-full-overlay-sidebar {
    width: 500px !important;
}

and these lines of JS in an enqueued scripts.js

jQuery(document).ready(function( $ ) {
$(".wp-full-overlay.expanded").css("marginLeft", "500px");
$(".wp-full-overlay-sidebar").css("width", "500px");
});

but it does not work.

1

Enqueue a style sheet to your admin or dashboard with admin_enqueue_scripts hook like below-

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

And put your admin css code there. As your code above the inside of your-admin-css-file.css will look kinda like-

.wp-full-overlay.expanded {
    margin-left: 500px !important;
}
#customize-controls.wp-full-overlay-sidebar {
    width: 500px !important;
}

And it'll work.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.