Login Customizer doesn’t change the background of the register form

Question

I gave up on plugins awhile ago to customize the WordPress login. I now create a plugin that links custom CSS into my theme and edit everything myself giving me greater control over the login style. Back in the day most would add to the functions.php file in the current themes directory but now I prefer using a plugin as its just a matter of disabling the plugin if you cause any real damage to your site.

Create a plugin

First create the plugin by heading to wp-content/plugins/ and creating a directory called my-custom-login. Within this folder create a file named my-custom-login.php

Open the file and paste:

<?php
/**
 * Plugin Name: My Custom Login
 * Plugin URI: http://mycustom.login
 * Description: Login page CSS modifications.
 * Version: 1.0.0
 * Author: Joe Bloggs
 * Author URI: http://joe.bloggs
 * License: GPL2
 */

This is a comment section used by WordPress to gather details about the plugin that is shown in the Plugins ==> Installed Plugins section of the WordPress admin area.

Now we will insert our CSS file that we will create in the next section.

Below the plugin information comment add:

function my_custom_login() {
echo '<link rel="stylesheet" type="text/css" href="' . get_bloginfo('stylesheet_directory') . '/custom-login/custom-login.css" />';
}
add_action('login_head', 'my_custom_login');

Create the CSS

Now lets head over to our current themes directory located at wp-content/themes/your-theme-folder replacing your-theme-folder with your current themes name. Within your themes directory we will create a folder called custom-login.

Now within the custom-login folder create a file called custom-login.css

Now lets change everything 🙂

/* This changes the background color */
body.login {
  background-color: #191919;
 }
/* Additionally I added this because on the registration page the color only covers half the page */
body, html {
  background-color: #191919;
}

/* This changes the logo */
.login h1 a {
  background-image: url('login-logo.png');
}

/* This changes the login form box */
.login form {
  background-color: #000000;
}

/* This changes the message box above the login form */
.login .message {
  background-color: #000000;
  border-left: 4px solid #9548e2;
}

/* This changes the paragraph text color */
p {
  color: #FFFFFF;
}

/* This changes the label (i.e Username / Password text */
.login label {
  font-size: 12px;
  color: #FFFFFF;
}

/* This changes the username and password input boxes */
.login input[type="text"]{
  background-color: #ffffff;
  border-color:#dddddd;
  -webkit-border-radius: 4px;
}

.login input[type="password"]{
  background-color: #ffffff;
  border-color:#dddddd;
  -webkit-border-radius: 4px;
}

/* This changes the color of the login button */
.login .button-primary {
  width: 120px;
  float:right;
  background-color:#ad78e2 !important;
  background: -webkit-gradient(linear, left top, left bottom, from(#ad78e2), to(#9548e2));
  background: -webkit-linear-gradient(top, #ad78e2, #9548e2);
  background: -moz-linear-gradient(top, #ad78e2, #9548e2);
  background: -ms-linear-gradient(top, #ad78e2, #9548e2);
  background: -o-linear-gradient(top, #ad78e2, #9548e2);
  background-image: -ms-linear-gradient(top, #9548e2 0%, #ad78e2 100%);
  color: #ffffff;
  -webkit-border-radius: 4px;
  border: 1px solid #bd98e2;
}

.login .button-primary:hover {
  background-color:#ad78e2 !important;
  background: -webkit-gradient(linear, left top, left bottom, from(#ad78e2), to(#9548e2 ));
  background: -webkit-linear-gradient(top, #ad78e2, #9548e2 );
  background: -moz-linear-gradient(top, #ad78e2, #9548e2 );
  background: -ms-linear-gradient(top, #ad78e2, #9548e2 );
  background: -o-linear-gradient(top, #ad78e2, #9548e2 );
  background-image: -ms-linear-gradient(top, #ad78e2 0%, #9548e2 100%);
  color: #fff;
  -webkit-border-radius: 4px;
  border: 1px solid #bd98e2;
}

.login .button-primary:active {
  background-color:#ad78e2 !important;
  background: -webkit-gradient(linear, left top, left bottom, from(#9548e2), to(#ad78e2));
  background: -webkit-linear-gradient(top, #9548e2, #ad78e2);
  background: -moz-linear-gradient(top, #9548e2, #ad78e2);
  background: -ms-linear-gradient(top, #9548e2, #ad78e2);
  background: -o-linear-gradient(top, #9548e2, #ad78e2);
  background-image: -ms-linear-gradient(top, #9548e2 0%, #ad78e2 100%);
  color: #fff;
  -webkit-border-radius: 4px;
  border: 1px solid #bd98e2;
}

/* This changes links hover color */
.login #nav a:hover{
  color: #9548e2 !important;
}

/* This changes the back to blog link color */ 
.login #backtoblog a, .login #nav a, .login h1 a {
  color: #ad78e2 !important;
  text-decoration: none;
}

/* This changes the back to blog hover link color */
.login #backtoblog  a, .login #nav a, .login h1 a:hover {
  color: #9548e2 !important;
}

The /* comments */ will give you an idea of what is exactly changing and you can change the hex colors like for example #ad78e2 to anything you like.

If there is something else you want to change the best way to do it is to install the firebug add-on for Firefox. Once installed you can right-click and select Inspect element with Firebug which will bring up the HTML but if you look to the left side pane you can see the Style tab which shows the CSS. You can change the CSS colors for example in this pane temporarily so you can see what the changes would look like before implementing them.

Now go to Plugins ==> Installed Plugins in your WordPress admin area and activate your plugin.

I know you were asking about a specific WordPress plugin but sometimes learning to dive in to the CSS itself on your own will give you the control you need. And remember if you think you have broken something just simply disable the plugin you created. If you make a major error WordPress should disable the plugin on its own but if you find yourself with a broken site simply ftp or ssh to your wp-content/plugins/ directory and either rename or delete the plugin folder you created.

Create a plugin

Create the CSS

Related Posts: