Custom Login CSS for White Label CMS Plugin

The White Label CMS plugin is great for customising the user interface (UI) of the WordPress admin area and front end of your website. In this short tutorial we’re going to look at how to set up the basic custom login CSS for the WordPress Login page.

The Custom Login CSS

Below is the basic CSS snippet that I created:

body { background: #0579a2; }
#login { padding: 5% 0 0; }
html .login h1 a { background-position: center; background-size: contain !important; }
.login #backtoblog a, .login #nav a { color: #FFF; }

And here’s a screenshot of what the end result looks like:

Now let’s break down each line of the CSS, determine what it does, and what you can change or delete completely.

STEP 1: Set the background colour

body { background: #0579a2; }

This styling sets the background colour of the Login page. Change the HEX colour code to whatever you like, otherwise leave this line out to use the default light grey background colour.

STEP 2: Add padding above the form

#login { padding: 5% 0 0; }

This styling adjusts the amount of top padding above the login form’s container. Change the percentage number to increase or decrease the amount of top padding, otherwise leave this line out to use the default padding which usually tends to resize dynamically anyway. So really only use this line of CSS if you really need to.

STEP 3: Size up the logo image

html .login h1 a { background-position: center; background-size: contain !important; height: 150px; }

This styling resizes and positions the logo that sits above the login form itself. You shouldn’t need to change this line as it should resize and reposition whichever logo image you specify in White Label CMS’s settings within the logo section of the Login page.

STEP 4: Set the link colour

.login #backtoblog a, .login #nav a { color: #FFF; }

This styling sets the colour of the text links below the login form. Change the HEX colour code to whatever you’d like the text links to be, keeping in mind what colour you set the body background colour to. If the body background colour is dark, you may want to make the text links white; and visa versa if the body background is a light colour.

Bonus Step

If you’d rather use a cool background image instead of a plain background colour, you can change the CSS in Step 1 to something like this:

body { background: url(/image/file/path.jpg) center; background-size: cover; }

Now, where does this CSS need to go?

When you’re logged in to the WordPress admin area:

1. Navigate to “Settings > White Label CMS“.
2. Expand the “Branding” section and scroll down to the “Login” section within that.
3. If you haven’t already, set your “Custom Login Logo” by uploading your logo or browsing for it within the Media Library.
4. Now copy and paste the custom login CSS snippet, customise if accordingly, then click any of the “Save changes” buttons and you’re done!

Share your thoughts

Once you’ve seen the White Label CMS settings page, you’ll see that there’s a lot more features to the plugin. So if you’ve got any questions, share them in the comments section below. If you recommend any other plugins or ways of customising the WordPress login page, feel free to share them too.

Photo used in background of login page: Ciucaș Peak, Romania by David Marcu