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' );