Contact

Contact

Title

PHP > CSS for wp-login

description

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

Published 2022-07-28

Modified 2022-08-19

content

				
					<?php
function wp_login_css() { ?>
    <style type="text/css">
        /* css here */
    </style>
<?php }
add_action( 'login_enqueue_scripts', 'wp_login_css' );
?>
				
			
				
					#login h1 a, .login h1 a {
    background-image: url('https://www.site.com/files/img.svg');
	height:200px;
	width:200px;
	background-size: contain;
	background-repeat: no-repeat;
    padding-bottom: 30px;
}

.login h1 {
	position:relative;
}

.login h1:after {
	content: "";
	display: block;
	position: absolute;
	top: 0;
    left: 0;
	right: 0;
	bottom: 0;
    z-index: 2;
}

.login form {
    font-weight: 400!important;
    background: #FF9090!important;
    border: none!important;
    box-shadow: none!important;
}

.wp-core-ui .button-primary {
    background: white!important;
    border-color: black!important;
    color: black!important;
  	border-radius:0px!important;
}
	  
body.login.js.wp-core-ui {
	background:#FF9090;
    background-image: url('https://www.site.com/files/background.svg');
  	background-repeat: no-repeat;
  	background-position:bottom center;
  	background-size:cover;
}

Sources & References