DAC of Design Action
3/4/2017 - 12:18 AM

Login Page with nice backgrounds: File 1. linear gradient File 2. svg background

Login Page with nice backgrounds: File 1. linear gradient File 2. svg background

/* ------------- Add logo to login page ---------------- */
function my_login_logo() { 

	$top_background_color = "#FF5900";
	$bottom_background_color = "#FFF";
	$button_color = "#333";
	$logo_file_name = "logo";

	?>
    <style type="text/css">
    	body {
    		background-image: url('<?php echo get_template_directory_uri(); ?>/images/UESF_logo_img.svg') !important;
            background-size: cover !important;
            background-position: center !important;
            background-repeat: no-repeat !important;
    	}
    	#login form {
    	     background: rgba(0,0,0,.5) !important;
    	     -webkit-box-shadow: none !important;
    	     box-shadow: none !important;
    	}
        .login label {
            font-smoothing: antialiased;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
            color:  white !important;
        }
        body.login div#login h1 a {
            background-image: initial !important;
        	background-position: center center !important;
        	background-size: 347px;
        	height: 100px;
        	margin: 0 auto;
        	outline: 0 none;
        	overflow: hidden;
        	width: 352px;
        	margin-left: -15px;
        }
        .login form {
			margin-top: -10px;
        }
        input[type=text]:focus, input[type=search]:focus, input[type=radio]:focus, input[type=tel]:focus, input[type=time]:focus, input[type=url]:focus, input[type=week]:focus, input[type=password]:focus, input[type=checkbox]:focus, input[type=color]:focus, input[type=date]:focus, input[type=datetime]:focus, input[type=datetime-local]:focus, input[type=email]:focus, input[type=month]:focus, input[type=number]:focus, select:focus, textarea:focus {
            border-color: <?php echo $top_background_color; ?> !important;
            -webkit-box-shadow: 0 0 2px rgba(#000,.8);
            box-shadow: 0 0 2px rgba(#000,.8);
        }
        .wp-core-ui .button-primary {
            font-smoothing: antialiased;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
		    background: <?php echo $button_color; ?> !important;
		    border-color: <?php echo $button_color; ?> !important;
		    -webkit-box-shadow: 0 0 0 #888 !important;
		    box-shadow: 0 0 0 #888 !important;
		    color: #fff;
		    text-decoration: none !important;
		    text-shadow: initial !important;
		}	
		.wp-core-ui .button-primary.focus, .wp-core-ui .button-primary.hover, .wp-core-ui .button-primary:focus, .wp-core-ui .button-primary:hover {
		    background: #333;
		    border-color: #333;
		    color: #fff;
		}
		.wp-core-ui .button-primary.active, .wp-core-ui .button-primary.active:focus, .wp-core-ui .button-primary.active:hover, .wp-core-ui .button-primary:active {
		    background: #555;
		    border-color: #555;
		    -webkit-box-shadow: inset 0 2px 0 #333;
		    box-shadow: inset 0 2px 0 #333;
		    vertical-align: top;
		}

    </style>
<?php }

add_action( 'login_enqueue_scripts', 'my_login_logo' );

Purpose

Makes a nicely styled login page.

Installation

Replace this code with the corresponding code in functions.php

Use

Customize as needed. At the minimum, match the hex value of the $top_background_color variable to the theme's primary color.

/* ------------- Add logo to login page ---------------- */
function my_login_logo() { 

	$top_background_color = "#E5722A";
	$bottom_background_color = "#FFF";
	$button_color = "#333";
	$logo_file_name = "logo";

	?>
    <style type="text/css">
    	body {
    		background: linear-gradient( <?php echo $top_background_color; ?>, <?php echo $bottom_background_color; ?>) !important;
    	}
    	#login form {
    	     background: none !important;; 
    	     -webkit-box-shadow: none !important;; 
    	     box-shadow: none !important;; 
    	}
        body.login div#login h1 a {
            background-image: url(<?php echo bloginfo('stylesheet_directory'); ?>/images/<?php echo $logo_file_name; ?>.png) !important;
        	background-position: center center !important;
        	background-size: 347px;
        	height: 168px;
        	margin: 0 auto;
        	outline: 0 none;
        	overflow: hidden;
        	width: 352px;
        	margin-left: -15px;
        }
        .login form {
			margin-top: -10px;
        }
        input[type=text]:focus, input[type=search]:focus, input[type=radio]:focus, input[type=tel]:focus, input[type=time]:focus, input[type=url]:focus, input[type=week]:focus, input[type=password]:focus, input[type=checkbox]:focus, input[type=color]:focus, input[type=date]:focus, input[type=datetime]:focus, input[type=datetime-local]:focus, input[type=email]:focus, input[type=month]:focus, input[type=number]:focus, select:focus, textarea:focus {
            border-color: <?php echo $top_background_color; ?> !important;
            -webkit-box-shadow: 0 0 2px rgba(#000,.8);
            box-shadow: 0 0 2px rgba(#000,.8);
        }
        .wp-core-ui .button-primary {
		    background: <?php echo $button_color; ?> !important;
		    border-color: <?php echo $button_color; ?> !important;
		    -webkit-box-shadow: 0 0 0 #888 !important;
		    box-shadow: 0 0 0 #888 !important;
		    color: #fff;
		    text-decoration: none !important;
		    text-shadow: initial !important;
		}	
		.wp-core-ui .button-primary.focus, .wp-core-ui .button-primary.hover, .wp-core-ui .button-primary:focus, .wp-core-ui .button-primary:hover {
		    background: #333;
		    border-color: #333;
		    color: #fff;
		}
		.wp-core-ui .button-primary.active, .wp-core-ui .button-primary.active:focus, .wp-core-ui .button-primary.active:hover, .wp-core-ui .button-primary:active {
		    background: #555;
		    border-color: #555;
		    -webkit-box-shadow: inset 0 2px 0 #333;
		    box-shadow: inset 0 2px 0 #333;
		    vertical-align: top;
		}

    </style>
<?php }

add_action( 'login_enqueue_scripts', 'my_login_logo' );