Adding a Custom login page to your WordPress site with a plugin

Do you have a blog or a site on WordPress? Have you worked hard to give that ultimate aesthetically pleasing site? Finally, did you find that your site's login page is not reflecting all the beauty of the site? Don't you want that dull and drab WordPress standard login page?

So, why not change it to reflect your site's theme and philosophy?

Here comes the Custom Login Css plugin to your aid. Though there are other plugins which have similar functionality, this one is a simple and effective plugin.

Installation

Installation of the plugin is as usual. Login into your WordPress site as admin. From the dashboard, click on Plugins> Add New. Type custom login css in the search box and from the results click on Install Now next to the Custom Login Css plugin.

Settings

Click on Settings-> Custom Login Css from the WordPress admin dashboard and you get a simple screen with a text area to input your custom css for the login page.

There is some default css here. Let it be and click on Update Options button. Visit your site's login page. You will find a shocking yellow header added to the login page with "Custom Login Css" written over it. Don't worry, you can change this!

Add a background image

Head back to the Custom Login Css Settings screen. You can add a background image to spruce things up a little. Choose you favourite image and upload it. Ensure that the size of the image is big enough as it will occupy the entire screen.

Remove the existing css and add this bit. Make sure you change the url of the image. Click on Update Options.

<style type="text/css">    
body.login {
  background-image: url('<span style="color: #ff0000;">wp-content/uploads/2016/01/city.jpg</span>');
  background-repeat: no-repeat;
  background-position: center;
}
</style>

Now, visit your site and take a look. Now, that is better, what do you think?

Change the logo

Now, why not change the logo from the WordPress logo to your site's logo?

Add this bit of code to the css. Again ensure that the url is that of your logo. Click on Update Options.

.login h1 a {
  background-image: url('<span style="color: #ff0000;">wp-content/uploads/2016/01/logoR.png</span>');
}

Customize the text

Do you want to further customize the text to suit your site's color scheme. Here is a simple css code that changes the login form's colours to align with that of the logo. Use it and customize it to your needs. Add this code to the css.

.login label {
  color: #C30606;
}
.login input[type="text"]{
  border-color:#C30606;
}
.login input[type="password"]{
  border-color:#C30606;
}
.login .button-primary {
  background-color:#C30606;
}
.login .button-primary:hover {
  background-color:#970505;
}
.login #nav a{
  background-color:#C30606;
}
.login #backtoblog a{
  background-color:#C30606;
}

Add a header

Why not include the header that came by default? Just change the colour and also the text. Add this bit for that final touch. Click on Update Options.

body:after {
    height: 60px;
    content:"";
    position: absolute;
    text-align: center;
    top: 0; left: 0; bottom: 0; right: 0;
    background-color:#C30606;
}

The Custom login page

Visit your site's login page and take a look.

How colourful!

Now that you know what is possible, you can definitely do better by playing around with the colours and backgrounds.

Go ahead and have a blast of a login page.