Design - Written by Kerry on Monday, March 31, 2008 2:10 - 138 Comments
‘Branded Login Screen’ Plugin
UPDATE: JAN 24, 2010 – NEW VERSION 2.0:
Branded Login Screen 2.0
UPDATE: JAN 10, 2009 – NEW VERSION 1.1:
Branded Login Screen 1.1
UPDATE OF ‘BRANDED LOGIN SCREEN’ TO VERSION 1.0
After a few tests from the trusty WordPress community I have released a bug fix version of the ‘Branded Login Screen’ plugin. Thanks to everyone who has downloaded the plugin thus far. I appreciate the comments and support. I present version 1.0.
Looking for the ‘Branded Admin’ Plugin >>>
CHANGE LOG
1) Fixed the version checker to understand 2.5.x version numbers (minor 3rd number version caused issues with version check)
2) Cleaned up code
3) Cleaned up download statistics to remove my i.p.
Download Link
Download Latest Version 1.0
zip, 509k – 7762 downloads
I Love Binary Moon’s bm-custom-login Plugin
Inspiration comes in many ways. I have been using the bm-custom-login plugin for many months now (with several of my own modifications – I’ll mention below). It provides a great way to create custom graphics for the login screen to get that last finishing touch to a blog.
Below is a screen shot of the standard WordPress 2.5 login screen and my branded login screen (click either image to see a full size version). Or visit my Branded Login Screen in action.
What is Binary Moon’s bm-custom-login?
The main use for the plugin is to eliminate the threat of overwriting your login screen graphics during an upgrade. It is very simple to create the two images required for the login screen (login-bkg-tile.gif, login-bkg-bottom.gif), copy them into the ‘wp-admin\images’ folder and enjoy the new login screen you just created. The problem is forgetting about them during an upgrade. The upgrade will overwrite the files you created requiring a copy of the files after the fact or heaven forbid you have to recreate because you forgot to save them. The plugin allows for the login graphics to be kept in the images folder of the plugin so they will remain untouched after any WordPress updates/upgrades. I would definitely recommend this plugin if you are using WordPress 2.3.3 or older.
Not Compatible with WordPress 2.5
It seems the plugin is currenlty not compatable with WordPress 2.5. Here is where I come in. I have updated the css and created a plugin that incorporates a few changes I felt were missing from the original. On the WordPress login screen if you hover over the WordPress logo you find that if clicked you will be taken to WordPress.org. This has always seemed a bit odd to me. So I created two filters to change this behavior:
1) Have the logo area link back to the main page of the current blog.
2) Change the ‘Powered by’ title to mention the current blog title.
The Results
Mission accomplished. Because the css is so different between WordPress 2.5 and legacy versions I do a version check in the plugin and load the appropriate style sheet. This means if you want to make changes to the css be sure to edit the appropriate style sheet. The legacy verision is ‘branded_login_legacy.css’. The WordPress 2.5 version is ‘branded_login_screen.css’. At some point I will drop support for legacy but I will wait for a little wider acceptance of WordPress 2.5+ first. ‘Branded Login Screen’ is compatable with any graphics created for bm-custom-login.
Download Link
Download Latest Version 1.0
zip, 509k – 7762 downloads
138 Comments
Excellent!! thanks! I was afraid I was going to have to write my own plugin. Good work!
Thanks for the Branded Login. Great help. I was getting ready to change the WP Originals (well, I did but not too much). Thanks again for sharing!
Ed
Hello,
Just wanted to let you know that I have developed a similar plugin that in addition to re-branding the login screen, lets you re-brand the admin header and footer as well.
You can see it here: http://pressingpixels.com/wordpress-custom-admin-branding/
Hey Kerry…
Thanks for that amazing plugin. I’m using WP 2.5, I was amazed by the bm-custom-login. Now I can use a personalized login in my project.
Love the plugin. I just pasted an image from my comic over your “W” for now, but I’ll get my artist on it soon
Thanks!
@Everyone Above (I know not to personal)…
…but THANKS FOR THE FEEDBACK. Hope this helps and possibly saves you some time with customization.
I wrote about how to do this manually by editing the CSS over at my blog here:
http://justcreativedesign.com/2008/04/03/how-to-customise-your-wordpress-log-in-screen/
I also linked back to here
OMG – So dope. 5 minutes with PhotoShop, no dicking around, and had it on another Web site in minutes! I guess you can see it by visiting http://www.60bloggers.com/wp-admin – very cool. Thanks!
Oops. I really have to do something about that gravatar. Please don’t be frightened…
I’d like to give you credit for the modification to make it 2.5 compatible, it is awesome. It works nicely and was easy to edit to my liking. Good luck on your Admin Branding (sounds painful, lol) plugin, I can’t wait to see it. Keep up the good work.
-Mike
I’m in the process of upgrading / redesigning now that WP 2.5 is out and this plugin works beautifully AND fixes my two main gripes about bm-custom-login as well!
Thanks for the great plugin!
-Steven
Thanks for the comment. I hope it saves you some development time. Send back some examples of how you used the plugin when you get a chance. I would love to see your work. Nice site by the way. Great job with the ‘hand-coded’ theme. I am starting a theme myself that I will be giving to the WordPress community very soon: Dirty Girl. It’s not what you think!!! Based on the ‘SandBox theme’ and ‘Blueprint css’. Take a look if you have some time.
Wow. One step further. Thanks for the tutorial on your site. This definitely helps with the overall branding without changing the location of things in the admin section. I think Matt – at WordCamp Dallas 2008 – said they have resisted creating a theming mechanism for the admin section because of support. If you theme the admin and have an issue, things are not necessarily in the same place and it makes it harder for the support person to determine the issue. The admin theme may move elements around. Thus 2.5 has a color changing mechanism instead.
This is a happy medium.
You went down the exact same path I did by hand editing the css. This was just the next logical step (creating a plugin) for those that maybe didn’t know css.
Nice implementation at ‘60bloggers.com’. I hoped the photoshop files would help. Nice blue gradient.
I can’t wait to see the ‘Branded Admin’ complete either.
It may not be to involved at first release. The ability to add a header and footer graphic and then include a style sheet. A tutorial on what all the css designations are would probably be a must with this plugin. COMING SOON.
Hope your upgrade goes well. Mine did. I believe bm-custom-login is now 2.5 compatible as well.
Looks great. By the way, “Is having sex with your clone masturbation or incest?” FUNNY. FUNNY. FUNNY. Check out his site to see what this means.
Thanks for the plugin..it’s great! I am having one problem tho…I can’t seem to find where I would apply a general background color to the login page, as well as the images I created for the login itself. Right now, I have the edges of the login area using #282828, and would like to apply that color to the entire background so it’s seamless. I’m thinking this might be in the wp-admin.css, but I hate to change that and then have it overwritten with an update. Is this the file I need to change? Or is there an option in one of the CSS files from your plugin that I can manipulate? Thanks again.
Works great in IE but moves left-right in Firefox when clicking between Login and Register
Kerry, my friend, i am searching for it from psd but can you share how can i create a rounded rectangle like you, or can you refer any tutorial(i found some but yours is really different and cool) Also, you use gradient and it look likes the main bmp (default wp login background) How can you do this? Because i try but cant make the exactly gradient like main(try multiple from layer , bacground is default wp login but it becames a normal gradient not like yours)
These are long questions i know, if you want you can reply and i am really be happy.
Good work.
If you notice in Firefox, when a page is shorter than the viewable area there is no sliderbar on the right side of the browser. When the page extends below the viewable area a sliderbar appears. Firefox has a behavior that will shift content over the width of the slider bar in this configuration. So the login page in ‘login’ mode is short enough to not have the sliderbar to the right but the login page in ‘register’ mode has it shifting content to the left.
Internet Explorer does not have this behavior.
Add a class to the branded-login-screen.css:
.login {
background-color: #000;
}
Of course, set the background-color to your preferred color (example uses black #000).
http://matthom.com/archive/2004/09/10/fast-rounded-corners-in-photoshop
Above is a tutorial on creating rounded corners.
(Assuming you are using Photoshop)
To create the gradient like I did in the .psd, select the gradient tool and change the gradient type to ‘radial gradient’ (defaults to ‘linear gradient’). Also, change the gradient mode to ‘Hard Light’. Then practice, practice, practice.
This plugin is awesome. You are a genius. Would you like to marry my daughter?
Sorry to say I have met the love of my life. But if she ever gets tired of me messing with my blog too much I will let you know.
Can anyone tell me how to change the style of the ’submit’ button? Mine is still the wordpress blue default. Also, have a look at my form. Something is cutting off the bottom right of the box. Any help would be appreciated! Thanks,
space
@Space – I cannot comment on the ‘BM Custom Login’ plugin. However, if you install my ‘Branded Login Screen’ it will show the submit button with a red gradient background by default. You can change this background image to one of your own design. Your install of ‘BM Custom Login’ does not contain the submit button CSS mentioned below:
/* This will allow background image for the submit button. By removing the login form entries you will get the default login form button css which I believe is light-blue with gray text.
*/
#login form .submit input, .submit input:hover {
background: url( images/fade-button.png );
color:#fff;
border:1px solid #999;
margin-right: 11px;
}
/* Hover attributes for submit button.
*/
#login form .submit input:hover {
color:#ddd;
border:1px solid #777;
}
The download-link isn’t working ?
@Vincent – I got a little hasty with a site backup today and I moved instead of copied the wp-downloads folder from my site. It is back now. The plugin is available. Sorry for the mishap.
Strange, I installed this on WP 2.5.1, but it does not appear to remove the wordpress logo….
I’m sure I’m just doing something wrong, maybe you can help?
http://www.themannings.com/blog/wp-login.php
Thanks.
@Todd – It looks like some of the css is not in place. Did you copy both of the css files to your site?
branded_login_legacy.css
branded_login_screen.css
Below needs to be in place for sure as this hides the WordPress logo:
h1 a {
background: transparent;
height: 86px;
width: 380px;
}
Make sure all of the comment line indicators /* */ have not been removed causing the code to be treated as a comment.
Hey Kerry,
So all the CSS files were in place. Checking the source on the page, I noticed it was trying to use the branded_login_legacy.css instead of branded_login_screen.css even though I am on WP 2.5.1.
I simply copied branded_login_screen.css and renamed it branded_login_legacy.css so they were both identical, and this worked.
There must be something not quite right in the version check logic.
-Todd
@Todd – Yes. My logic is flawed. I will have to come up with a better way to determine the version without having to check explicitly for 2.5 or 2.5.1 or 2.6 and so forth. Thanks for the catch. Will update once I have a fix.
@Todd – I have it fixed and I have updated the version to 1.0. This one should be solid until there are changes to WordPress that might break it.
@EMOruffino/Dave – I believe verison 1.0 should have solved this. Let me know if you still have issues after installing the new version.
Kerry, great plugin.
One minor thing I noticed though in the css code: line 18 has a that shouldn’t be there (mar gin-top: 0px; instead of margin-top: 0px;)
Should be:
#login form {
margin-top: 0;
}
Removing the space removes the extra space between the alert box (when visible) and the start of the form.
Depending on the size of your logo, you might want to adjust the number. Mine gets pretty close to the username textbox with the margin-top set at 0 when there are no alerts. I used 20px to give it some breathing room.
Thanks again for the plugin.
Thanks for that plugin, buddy. It saved my butt…
Thanks for tha fantastic plugin!
Got a question…how do you change the color of the “login” “lost password?” and “register” links at the bottom of the login?
I did change the color of the rest of the text from #fff to #000, but it seems for some reason it didn’t affect the links at the bottom — currently mine are a gray color.
Any advice?
@Joss – The CSS below will change the links to RED (#f00). Add this to the plugin’s .css and change to the color of your choice.
#nav a {color:#f00;}
#nav a:link {color:#f00;}
#nav a:visited {color:#f00;}
#nav a:active {color:#f00;}
#nav a:hover {color:#f00;}
Nice plugin!
i used this one of my other blog…
I will let you know when added on the blog
thanks
Hi,
thanks for this plug-in but I must be doing something wrong. I first installed the bm-custom plugin on a new wordpress 2.5 install. I then fixed the graphics and refreshed, nothing appeared. I then uploaded your plug-in and wordpress gave me this error message:
Fatal error: Cannot redeclare change_wp_login_url() (previously declared in /home/insideme/public_html/insidedigitaldesign/wp-content/plugins/bm-custom-login/bm-custom-login.php:41) in /home/insideme/public_html/insidedigitaldesign/wp-content/plugins/branded-login-screen/branded-login-screen.php on line 24
Can you give me any advice on how i might fix this, I’m sure I missed something.
Thank you!
Alexandra
@Alexandra – BM Custom Login and Branded Login Screen must use the same function call. Deactiveate one while testing the other.
Hello,
the plug like me and I’m just in my test blog. It looks the same time different.
But I would like to ask you how to realize the Tagcloud so? Verräts you give me perhaps what you plug this made?
It looks visually very good and secondly, you can save a lot of space.
Thank you in advance.
Greetings Alex ..
Hi Kerry
I noticed that you wrote some comments etc in Binarymoon’s weblog and are promoting their login screen. I left a comment with them but have not had a reply for a few days. So I thought I would write to you and ask you if you would be able to assist me with an answer to the following query. (Note that Binarymoon has a very nice button and I would like to have the same or better)
1. How do you change the button colour on the screen. I changed your 2 screen files colour to purple yet the button is still wordpress blue. So is there a button template to change.
2. How do you change the button itself. The button you showed on all the examples is not the WP2.5.1 button that appears on my login form. It is the same button I had before.
Hope you can help. Thanks so much.
Kerry, I do have notes from amorfrancis.com. His notes are good for changing everything via the color-fresh.css and login.css. If you change the color of the button in here then all your bottons in everything are this colour. I only want to change the login button colour not the admin panel buttons.
I hope to here from you soon. Thanks Cheers.
@Venesa – Make sure you have the current version of the plugin installed. Make sure Binary Moon’s plugin is disabled when testing Branded Login screen.
The button uses a graphic that is supplied with the plugin (fade-button.png). Change this to whatever you want.
Also checkout the answer I gave to ‘Space’ above in the comments and if you could provide a URL I could look at your setup and check for issues.
Hope this helps.
@trench – My site and several others I support are using the Branded Login Screen on 2.6 with no issues at this point.
Where in the CSS do you find to change the color of the link that says “Lost Password”?
@Jen – The CSS below will change the links to RED (#f00). Add this to the plugin’s .css and change to the color of your choice.
#nav a {color:#f00;}
#nav a:link {color:#f00;}
#nav a:visited {color:#f00;}
#nav a:active {color:#f00;}
#nav a:hover {color:#f00;}
Thanks! Great Work!
J!
Hi,
First of all, thanks a lot for the plugin….
I wanted to change the color of the login boxes (i.e, username box, password box) from white to some other color
Also, is it possible to give a little bit of opacity to the box so that the background reflects? If yes how can it be done?
Thankyou
Joel
@Joel – sorry I missed your comment and question. The answer is yes. You will have to convert the login background image to a .png in the css. Then make the image opaque so the background will show through. If you have Photoshop this should be very easy to do.
Do you have any plans to make the plugin 2.7 compatable?
WOW it really looks nice. I just can’t wait for this to pull up to 2.7 capable.
BTW where did you get the awesome tag deal?!?!
Just downloaded the branded login plugin. Installed it, activated it without a problem but see no change in the login page.
I am running WP 2.6.3
Is there anything else I need to do to see the branded page. I only see the original WP login page.
I don’t see any options in the admin and setting selections.
Thanks
You can use the branded login plugin with WP2.7. You just need to edit the login.css file
Hello, Kerry
I am trying, but I can’t to unzip this file. Can You help me?
Thanks.
Message: “The Archive is damaged”
I get into a “.zip/.cpgz” loop when trying to decompress the downloaded latest version’s archive…
I tried with BOMArchiveHelper, UnArchiver, Stuffit Expander 12.
The only thing I want to do is change the text colour of “username” and “Password” as I can’t see them with my colour scheme.
I have looked through lots of the .css files and tried changing and adding colour but to no effect.
I assume that all I should have to do with the plugin is change the following colour in “branded-login-screen.css”:-
/* If you have a light background as your login form graphic, change the color
here. #fff = white, #000 = black. This changes the Username, Password and
‘Remeber Me’ text color.
*/
form {
color:#c00;
}
Any help greatly appreciated as this has been bugging me for several days.
I did try the changes suggested for V2.7 suggected by Zac but no difference.
>>You can use the branded login plugin with WP2.7. You just need to edit the login.css file
>>http://bitterwise.com/?p=295
@Karl – Add the css below to the branded-login-screen.css file in the plugin folder. This will change the ‘Username’ & ‘Password’ labels to whatever color you specify. I have specified white below:
label {
color:#fff;
}
Thanks Kerry, That’s fixed it for the standard login, I’ve been trying a sidebar login as well. This seems to get it’s colour from the standard WP login. Again I can’t find the part of the css to change. I’ve tried changin the color under label in login.css, but no effect. I’ve serached all the WP code for where label is defined and couldn’t find it anywhere else.
Thanks in advance for any help
Hello. And Bye.
I’m having some trouble finding how to change the bright blue border of the log-in button. I’d like to change it to white and when hovered to grey.. any suggestions?
ucsee.org
try adding a !important to the color line. It took me awhile to get it to work as well.
#login form .submit input, .submit input:hover {
background: url( images/fade-button.png );
color:#f3f3f3 !important;
Hello webmaster
I would like to share with you a link to your site
write me here preonrelt@mail.ru
plugin works great! is there a way to change the page background color. I dont want to keep it gray..
@daddydesign – add this to the top of the branded-login-screen.css:
html {
background-color: #fff;
}
The default is for the logo to link to the current site (and Powered by Current Site)
But I’d like to apply branding for my own site on the login for client pages.
So every time he logs in he is reminded of my business and can click to my site.
How do I customize these urls rather than echo bloginfo or blogname??
I really like what you’ve put together & released here! I’m brand new to Wordpress; started with the login screen before the blog itself! A bit tougher to customize than I was expecting, but it works, and it’s great! Thank you for this.
Hi Kerry,
Great job on these plugins! I have a question though, when I go to http://www.kerrywebster.com/wp-admin/ it is quite another experience. How did you make the login look so un-wordpress????
Thanks
L
hi, is there anyway, i can do this…
when a visitor visits my site, they go straight to the login page/sign up page… so in order for people to actually view the rest of the site, they need to sign up… any help would be appreciated thanks!




































Mar 31, 2008
07:14 am