Contact

contact

Title

CSS: wp-login.php

description

How to customize the default wp-login form with a snippet

Published 2022-07-28

Modified 2023-02-20

content

				
					function wp_login_css() { ?>
<style type="text/css">
:root {
  --backgroundmain: #594998;
  --backgroundform: #594998;
  --textlabelcolor:#F8F7FA;
  --sitelogo: url('https://www.site.nl/wp-content/uploads/logo.svg');
}
body.login.js.wp-core-ui{background:var(--backgroundmain)}.login form{background:var(--backgroundform)!important;font-weight:400!important;border:none!important;box-shadow:none!important}a,label,p{color:var(--textlabelcolor)!important;}#login h1 a,.login h1 a{background-image:var(--sitelogo);height:34px;width:281px;background-size:contain;background-repeat:no-repeat;margin-top:54px}.login h1{position:relative}.login h1:after{content:"";display:block;position:absolute;top:0;left:0;right:0;bottom:0;z-index:2}.wp-core-ui .button-primary{background:#fff!important;border-color:#000!important;color:#000!important;border-radius:0!important}
    </style> <?php 
}
add_action( 'login_enqueue_scripts', 'wp_login_css' );

Sources & References