Via the Webs

Default WordPress Login CSS

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. By default, the existing colors are for this website’s login page. I’ve include a small image but you can also use a fully qualified domain or swap out the image.

Once activated, your default WordPress login should look like this.
Default WordPress Login CSS

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.

PHP file

Plugin Name: Lightweight Plugins - Default WordPress Login CSS 
Plugin URI:
Description: Adds CSS to the default WordPress login page.
Version: 1.5
Author: WP Maintenance Experts
Author URI:
License: GPLv2 or later

function lightweight_plugins_login_stylesheet() {
	wp_enqueue_style( 'lightweight-custom-login', plugins_url( 'styles-login.css' , __FILE__ ) );
  add_action( 'login_enqueue_scripts', 'lightweight_plugins_login_stylesheet' );

CSS file

/* For simplicity, global variables are set. */
: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 {
    /* This is the URL of the logo on the login page. Will also accept fully qualified URL within your domain */
    background: url(lightweight-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;

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;

Plugins Articles

Disable XML-RPC

Disabling XML-RPC in WordPress can be beneficial for several reasons: Security Concerns: XML-RPC has been targeted by attackers in various types of malicious activities: Brute Force Attacks: Attackers can use XML-RPC to amplify their brute force attacks. Instead of...

read more

MS Clarity Exclude Logged In Users

How to Use Download > Install > Activate. Use your favorite IDE or just edit within the WordPress plugin editor. Change "xxxxxxxxxx" to be your Clarity ID. Not associated with Microsoft® Clarity® Example This prevented me from recording all my logged in back-end...

read more

Add to Console Log

How to Use Download > Install > Activate. Use your favorite IDE or just edit within the WordPress plugin editor. Change the message to suit your needs. Example A fun project plugin. Thought of this after discovering a software company had a message about their open...

read more

Most Recent Articles