jcadima
10/15/2018 - 7:22 PM

Custom WP Admin Login


https://premium.wpmudev.org/blog/customize-login-page/

1) create a "login/custom-login-styles.css" in child theme root directory

2) enter and modify the following in custom-login-styles.css:

<style>
body.login {
  /* background-image: url('home-bg.jpg'); */
  background: #2D4768;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: center;
}

.login h1 a {
  background-image: url('/wp-content/uploads/2018/10/powell_logo_stacked.png');
}

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

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

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

.login .button-primary {
  width: 120px;
  float:right;
  background: #2d4768 !important;
  color: #ffffff;
}

.login .button-primary:hover {
  background-color:#17a8e3 !important;
  background: #2d4768 !important;
  background: -webkit-gradient(linear, left top, left bottom, from(#17a8e3), to(#0d9ed9 ));
  background: -webkit-linear-gradient(top, #17a8e3, #0d9ed9 );
  background: -moz-linear-gradient(top, #17a8e3, #0d9ed9 );
  background: -ms-linear-gradient(top, #17a8e3, #0d9ed9 );
  background: -o-linear-gradient(top, #17a8e3, #0d9ed9 );
  background-image: -ms-linear-gradient(top, #0b436e 0%, #0d9ed9 100%);
  color: #fff;
  -webkit-border-radius: 4px;
  border: 1px solid #0d9ed9;
}

.login .button-primary:active {
  background-color:#17a8e3 !important;
  background: -webkit-gradient(linear, left top, left bottom, from(#0d9ed9), to(#17a8e3));
  background: -webkit-linear-gradient(top, #0d9ed9, #17a8e3);
  background: -moz-linear-gradient(top, #0d9ed9, #17a8e3);
  background: -ms-linear-gradient(top, #0d9ed9, #17a8e3);
  background: -o-linear-gradient(top, #0d9ed9, #17a8e3);
  background-image: -ms-linear-gradient(top, #0d9ed9 0%, #17a8e3 100%);
  color: #fff;
  -webkit-border-radius: 4px;
  border: 1px solid #0d9ed9;
}

/* hide lost password link  */
p#nav {
  display: none;
}

/*  Hide back to blog link  */

p#backtoblog {
  display: none;
}
</style>



<?php  // In functions.php of child theme:
// Custom login Styles
function powell_custom_login() {
	echo '<link rel="stylesheet" type="text/css" href="' . get_bloginfo('stylesheet_directory') . '/login/custom-login-styles.css" />';
}
add_action('login_head', 'powell_custom_login');

// return current site url
function my_login_logo_url() {
	return get_bloginfo( 'url' );
}
add_filter( 'login_headerurl', 'my_login_logo_url' );
	
// change default WP title
function my_login_logo_url_title() {
	return 'Powell Transport Solutions';
}
add_filter( 'login_headertitle', 'my_login_logo_url_title' );