WordPress Help Articles

How to Use

Download > Install > Activate. Use your favorite IDE or the WordPress plugin editor > styles-login.css to change the colors and logo. Variables have been set to make the process simpler but you can mix it up and make it your own. I’ve include a small image but you can also use a fully qualified domain to point to another image or just swap it out.

Example

Once activated, your default WordPress login would be similar to this.

Source

This code consist of multiple files and can not be pasted into the functions.php as is. It’s recommended you download and install the plugin for simple code activation and edit from there but the code is provided for reference.

function viawebs_plugins_login_stylesheet() {
	wp_enqueue_style( 'viawebs-custom-login', plugins_url( 'styles-login.css' , __FILE__ ) );
  }
add_action( 'login_enqueue_scripts', 'viawebs_plugins_login_stylesheet' );

:root {
	--color-one: #202332;
    --color-two: #f8fbfe;
    --color-thr: #202332;
    --color-fou: #f8fbfe;
}

body {
    background: var(--color-one) !important;
}

form#loginform {
    background: var(--color-two) !important;
}

.login h1 a {
	background: url(viawebs-plugins-logo-icon.png) !important;
    width: 100% !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
}

.login label {
    color: var(--color-one) !important;
}

.login #nav a, .login #backtoblog a, .login a.privacy-policy-link {
   color: var(--color-two) !important;
}

.login input#wp-submit {
    background: var(--color-fou) !important;
    color: var(--color-thr) !important;
    border-color: var(--color-thr) !important;
}

.login input#wp-submit:hover {
    background: var(--color-thr) !important;
    color: var(--color-fou) !important;
    border-color: var(--color-thr) !important;
}

input[type=checkbox]:focus,
input[type=color]:focus,
input[type=date]:focus,
input[type=datetime-local]:focus,
input[type=datetime]:focus,
input[type=email]:focus,
input[type=month]:focus,
input[type=number]:focus,
input[type=password]:focus,
input[type=radio]:focus,
input[type=search]:focus,
input[type=tel]:focus,
input[type=text]:focus,
input[type=time]:focus,
input[type=url]:focus,
input[type=week]:focus,
select:focus,
textarea:focus {
    border-color: var(--color-thr) !important;
    -webkit-box-shadow: 0 0 0 1px var(--color-thr) !important;
    box-shadow: 0 0 0 1px var(--color-thr) !important;
    outline: 1px solid transparent !important;
}

.login #backtoblog a:hover,
.login #nav a:hover,
.login h1 a:hover {
    color: var(--color-fou) !important;
}

.login .button.wp-hide-pw:focus {
    border-color: var(--color-thr) !important;
}

.login .dashicons-visibility:before {
    color: var(--color-thr) !important;
}

.login .dashicons-hidden:before {
    color: var(--color-thr) !important;
}