Custom Login Branding Without Using a Plugin
30 May 2008
No Comment
This is a continuation of yesterday's post about Custom Admin Branding.
As you'll recall, I was trying to find a way to brand the Login screen without using the Custom Admin Branding plugin and I promised I would share the method with you when I figured it out.
You can see the final result at my login page for Metro-East.com.
In order to create your own custom branded login page you need to get a copy of your login.css file. This file resides in the /wp-admin/css/ directory of your Wordpress installation. (Go to the root directory of your installation and then open the wp-admin folder and then open the css folder. Copy this file to your computer so that you can modify it.)
Open the login.css file using a text editor. I use good ole' Notepad. (Do not use a word processor, only use a text editor.)
SAVE A COPY
Just in case something goes wrong, save a copy of your login.css file so that you can easily restore Wordpress to its original configuration.
Once you have the file open, locate any CSS code that is marked #login. This is the CSS "id" tag used by Wordpress for your Login form. Delete all of the #login CSS styling- we are about to replace it. Likewise, delete the #nav CSS styling. This is the styling for the links on your Login form.
Now copy and paste the following code into your login.css file:
-
/* Change these values to alter the color of the button on the login screen*/
-
#login form .submit input {
-
background-color: #cee1ef !important;
-
border-color:#80b5d0;
-
color:#246;}
-
-
#login form .submit input:hover {
-
border-color:#000;
-
color:#fff;}
-
-
/* This is where you insert your custom branding image*/
-
#login form {
-
background:url(/images/custom_login.jpg) center top no-repeat;
-
padding-top:100px;
-
}
-
-
/* This tells Wordpress not to display the old Wordpress logo*/
-
#login h1 {
-
display:none;}
-
-
#login { width: 292px; margin: 7em auto; }
-
-
#login_error, .message {
-
margin: 0 0 16px 8px;
-
border-width: 1px;
-
border-style: solid;
-
padding: 12px;
-
}
-
-
/* Change the color of the links to suit your needs*/
-
-
#nav a {
-
margin-top: 16px;
-
padding-left:10px;
-
font-size:12px;
-
color: #FFFFFF;
-
}
-
-
#nav {
-
margin-top: 16px;
-
padding-left:10px;
-
font-size:12px;
-
color: #FFFFFF;
-
}
Thanks to Pressing Pixels for this code, which I pulled from their plugin and then figured out how to use.
Make sure you save the newly edited file as login.css and upload back to the wp-admin/css folder.
The only thing left to do then is to upload the image you want to use. If you're like me and you're not great with Adobe Photoshop then you might seriously want to consider downloading the Custom Admin Branding plugin from the Pressing Pixels link above because they were kind enough to supply a template that you can use to create your image.
Either way, what you need to create is an image 284 pixels wide and 291 pixels high and save it as custom_login.jpg.
Here is the image being used at Metro-East.com:
You can customize it further by changing your image around or by changing the CSS code for #login and #nav. Experiment with things and see what works for you- you won't be able to break anything. (Make sure you have your backup file, just in case.)
Bonus:
How to use a custom background on your Login page that is different from the background on your other pages.
There are, as always with Wordpress, other ways to do this. Here is the method that I am using, though:
- Download and open your wp-login.php file from your root directory using a text editor.
- Find the line that looks similar to this:
HTML:
-
<body class="login" style="background-image:url(/images/metroeastcollage.gif);height:400px;">
-
- Place the background image you want to use in the spot where I have metroeastcollage.gif.
- Save and upload your file.
You can see this in action at the Metro-East.com login page.
Leave your response!