ashsaraga
3/2/2018 - 10:23 PM

Custom WordPress Login

Customize the WordPress login screen background, inputs and logo.

/*
 * Styles for Custom Login page 
 */

body.login {
  background-image: url('background.jpg');
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: center;
}

.login form {
	padding-bottom: 30px;
}

.login h1 a {
  background-image: url('logo.png');
  background-size: 200px;
  height: 85px;
  width: 200px;
}

.login label {
  font-size: 12px;
  color: #555555;
}

.login input[type="text"]{
  background-color: #ffffff;
  border-color:#dddddd;
}

.login input[type="password"]{
  background-color: #ffffff;
  border-color:#dddddd;
}

.login .button-primary {
	background-image: linear-gradient(to right, #f5452e, #ef3379, #c052b0, #746dc7, #0179bb);
  border: 0;
  border-radius: 0;
  box-shadow: none;
  color: #fff;
  display: inline-block;
  font-weight: 700;
  height: auto !important;
  letter-spacing: 1px;
  opacity: .8;
  padding: 7px 50px !important;
  text-shadow: none;
  text-transform: uppercase;
  /*width: 120px;*/
}

.login .button-primary:hover,
.login .button-primary:focus,
.login .button-primary:active {
	background-image: linear-gradient(to right, #f5452e, #ef3379, #c052b0, #746dc7, #0179bb);
	border: 0;
	box-shadow: none;
  color: #fff;
  opacity: 1;
  text-shadow: none;
}

.login #nav a {
	color: #FFF;
	opacity: .5;
}

.login #nav a:hover,
.login #nav a:focus,
.login #nav a:active {
	color: #FFF;
	opacity: .8;
}

p#backtoblog { display: none; }
<?php
/**
 * Customize the WordPress login screen
 */

function custom_login() {
echo '<link rel="stylesheet" type="text/css" href="' . get_bloginfo('stylesheet_directory') . '/libra-login-styles.css" />';
}
add_action('login_head', 'custom_login');

function custom_loginlogo_url($url) {
    return 'https://realjusticepac.org/';
}
add_filter( 'login_headerurl', 'custom_loginlogo_url' );