How to change the customizer´s sidebar width?

by

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.

2 Answers
2

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.

Leave a Comment