How to give the customer a customized login screen.

The finished results looks like this:
(I believe the image was purchased some time ago through Medialoot.com)

A custom Login screen

Inside the Functions.php

The following are code snippets that can be added to the child theme functions.php file.
Or in a custom-functions plugin. Or as an external file included into the functions.php file.

<?php

/* Custom login code - Modified from: https://premium.wpmudev.org/blog/customize-login-page/ */

// URL link of logo.
function my_login_logo_url() {
return get_bloginfo( 'url' );
}
add_filter( 'login_headerurl', 'my_login_logo_url' );

// Name of site alt text.
function my_login_logo_url_title() {
return 'Your Site Name and Info';
}
add_filter( 'login_headertitle', 'my_login_logo_url_title' );

// Remove error message
function login_error_override()
{
 return 'Incorrect login details.';
}
add_filter('login_errors', 'login_error_override');


// Remember Me is checked
function login_checked_remember_me() {
add_filter( 'login_footer', 'rememberme_checked' );
}
add_action( 'init', 'login_checked_remember_me' );

function rememberme_checked() {
echo "<script>document.getElementById('rememberme').checked = true;</script>";
}

The CSS

Add the following to your stylesheet. (Normally style.css.)

/* Add your own background image */
body.login {
 background: #fbc44e url('../images/Blue-bubbles.jpg') no-repeat center center fixed;
 -webkit-background-size: cover;
 -moz-background-size: cover;
 -o-background-size: cover;
 background-size: cover;
 background-color: #EEE;
 padding-top: 0;
}
 
#login {
 margin: 0 auto;
 padding: 30px;
}

#login h1 { 
 padding-top: 20px;
}
 
 /* Add your logo here */ 
#login h1 a { 
 /* width: 294px;
 height: 132px;
 background: url('../images/easy-web-design-tutorials-logo.png') no-repeat left top; */
 }
 
 
#login form { 
 box-shadow:0 2px 3px #444 !important;
 border-radius: 7px;
 background: #eeecec;
 font-size: 18px;
}

.login label {
 font-size: 14px;
}
 
/* Lost your password? and back to site text. */ 
.login #nav {
 margin: 15px 0 0 40px;
 
}
 
 /* Lost your password? link */
.login #nav a, .login #backtoblog a {
 color: #0085ba; 
 font-size: 18px;
 padding: 5px 15px 5px 15px;
 
 background: #eeecec;
 border-radius: 3px; 
}

.login .message, .press-this #message {
 background-color: #fff;
 border-left: 4px solid #7ad03a;
 
 box-shadow: 0 4px 18px #1D2736;
 border-radius: 5px;
}

/* Hides back to site arrow and text */
p#backtoblog {
 display: none;
}


/* Timed out pop up dialog box */
#wp-auth-check-wrap #wp-auth-check {
 position: fixed;
 left: 50%;
 overflow: hidden;
 top: 40px;
 bottom: 20px;
 max-height: 415px;
 width: 500px; /* changed */
 margin: 0 0 0 -190px;
 padding: 30px 0 0;
 background-color: #eee;
 z-index: 1000011;
 -webkit-box-shadow: 0 3px 6px rgba(0,0,0,.3);
 box-shadow: 0 3px 6px rgba(0,0,0,.3);
}

Adding code into an external php file

Lets say you got lots of code snippets you want to add to your functions.php file.
One way is to add them into external php files including the following code in your functions file:

include_once( get_stylesheet_directory() . '/lib/custom-login.php' );

You can add multiple php files this way.

To add an external CSS stylesheet

// Add a custom CSS stylesheet. 
add_action( 'wp_enqueue_scripts', 'load_custom_style_sheet' );
function load_custom_style_sheet() {
wp_enqueue_style( 'custom-stylesheet', get_stylesheet_directory() . '/custom-login.css' , array(), 1.0);
}

Resources:

My main resource is: https://premium.wpmudev.org/blog/customize-login-page/

https://github.com/JiveDig/baseline/blob/master/functions.php
http://wpsnipp.com/index.php/functions-php/login-with-username-or-email-address
http://www.yourbusybee.com/easily-modify-wordpress-login-page-code-snippets/

http://wpsnipp.com/index.php/functions-php/login-with-username-or-email-address/

WordPress login plugins:
https://wordpress.org/plugins/custom-login/
http://www.hongkiat.com/blog/wordpress-plugins-customize-login-page/