How can I change background color of ‘#wp-auth-check’ in wordpress login modal

2 comments

1. Create this file: /wp-content/themes/[YOUR_THEME_NAME]/assets/css/admin-additions.css

   and add these lines:

   #wp-auth-check {
     max-height: 525px !important;
     width: 525px !important;
     top: 100px !important;
   }
   

   And add this to your functions.php

   /**
    * Admin styles
    */
   function so31743387_admin_enqueue_scripts(){
       wp_enqueue_style( 'adminAdditions', get_stylesheet_directory_uri() . '/assets/css/admin-additions.css', array() );
   }
   add_action( 'admin_enqueue_scripts', 'so31743387_admin_enqueue_scripts' );
   

2. Hard to know what you need to do without seeing/knowing the situation the code is in. However, at first glance, you could use Chrome developer tools to figure out the exact, unique selector but it’s not the best practice to use such overqualified selectors.

   I’ve done it in a pinch:

   1. Right click and inspect the element you need to change
   2. In the developer tools window, right click on the element you need to identify and open the copy menu. Select “Copy Selector”
   3. Paste the selector into your CSS

   Depending on where in your document the element is, this could result in a very long, extremely specific selector

Comments are closed.