how to edit files through FTP<\/a> that might be useful.<\/p>\n\n\n\nYou can't add files using the inbuilt WordPress Theme Editor, so you'll have to add them using one of those methods.<\/p>\n\n\n\n
You can create or add the admin stylesheet as a blank file and then edit it in the WordPress Theme Editor if you prefer. The advantage of doing it that way is the Theme Editor won't let you save a file that will break your site.<\/p>\n\n\n\n
I've called the file \"admin-style.css\" for ease of use. You can call it whatever you like and put it in a subfolder if it makes sense to your theme. Just remember what you called it and where you put it for the next step.<\/p>\n\n\n\n
In the file, I've added this CSS:<\/p>\n\n\n\n
\/* Admin Styles *\/\n#hforce_content_access_restriction {\n height: 250px;\n}<\/code><\/pre>\n\n\n\nThe default style that sets the height of the \"select multiple\" metaboxes in the Gutenberg editor is .wp-core-ui select[multiple]<\/em> but I had an ID that I could hook into just for this one.<\/p>\n\n\n\nYou don't need to add a special set of tags to this stylesheet like you do with style.css<\/em>. You can just get straight into the CSS like you might write in the Advanced CSS module in the Theme Customizer.<\/p>\n\n\n\nCreate a function to enqueue the stylesheet<\/h2>\n\n\n\n In functions.php<\/em> of you child theme, we're going to enqueue the admin stylesheet in a similar way to how you enqueued style.css<\/em> for the child theme.<\/p>\n\n\n\nDon't use the same function to do this, because we only want the admin styles outputting to the admin area, not all the frontend styles that you have in style.css<\/em>.<\/p>\n\n\n\nBecause we're doing this in a child theme, the code is:<\/p>\n\n\n\n
function my_admin_style() {\n wp_enqueue_style( 'admin-style', get_stylesheet_directory_uri() . '\/admin-style.css' );\n}<\/code><\/pre>\n\n\n\nIf you were developing your own theme, the code you'd use would be:<\/p>\n\n\n\n
function my_admin_style() {\n wp_enqueue_style( 'admin-style', get_template_directory_uri() . '\/admin-style.css' );\n}<\/code><\/pre>\n\n\n\nMake sure you replace '\/admin-style.css'<\/em> with the name and location of your stylesheet, if you did something different.<\/p>\n\n\n\nConnect the function to the hook<\/h2>\n\n\n\n The final step is to add an action to trigger the function.<\/p>\n\n\n\n
Add this code to your functions.php<\/em> file:<\/p>\n\n\n\nadd_action( 'admin_enqueue_scripts', 'my_admin_style');<\/code><\/pre>\n\n\n\nSave that and you should see your admin style reflected in the admin area.<\/p>\n\n\n\n
Now the metabox on the Gutenberg editor is a more useable height.<\/p>\n\n\n\n
<\/figure><\/div>\n\n\n\n<\/p>\n","protected":false},"excerpt":{"rendered":"
Sometimes it’s nice to add a bit of custom styling to the WordPress admin area to make things stand out a bit better. Today I needed to resize a meta box in the sidebar of the Gutenberg editor. We had lots of options for membership levels, but it was annoying to have to scroll through<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5],"tags":[],"yoast_head":"\n
How To Add Custom CSS To WordPress Admin Area<\/title>\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n\t \n\t \n\t \n