Custom styling Insert Media window

You shouldn’t change core files this is bad practice and your changes will be overridden every time you update WordPress to the latest version.

You can rather use the admin head hook (http://codex.wordpress.org/Plugin_API/Action_Reference/admin_head) in your themes functions file and override the styles.

So it would look something like this…

// Hook into the admin head
add_action('admin_head', 'override_css');

// Add our custom CSS to the admin pages
function override_css() { ?>

<style>
/* This is a new property and doesnt require overwriting an existing property value */
.media-frame-title { color: red;}

/* Higher Specificity */
body .media-frame-menu {
    width: 50px;
}

/*Important Rule */
.media-modal-content {
    background: pink !important;
}

</style>

<?php } ?>

Find the selectors for whatever styles in the Insert Media Window you want to change and add your updated styles in between the opening and closing tags.

You may need to remember your specificity so if a property already exists, make it more specific as i have done using body before . media-frame-menu or you can use the !important rule as well.

Also please note you have to break out of PHP to render the CSS so you you must make sure you close it off again or else you will get a white screen after saving.

Hope this helps 🙂

Related Posts: