Design - Written by Kerry on Monday, March 31, 2008 2:10 - 132 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

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.

Standard Login ScreenBranded Login Screen Screenshot

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.

Branded Login Screen - Have the logo area link back to the main page of the current blog not WordPress.org  Branded Login Screen - Change the ‘Powered by’ title to mention the current blog title not WordPress.org

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

 Digg  Facebook  StumbleUpon  Technorati  Deli.cio.us  Twitter  Sphinn  Mixx  Google  DZone 


132 Comments

You can follow responses to this entry through the RSS 2.0 feed. You can leave a response or trackback from your own site.

Tony Gray
Mar 31, 2008
07:14 am
 

Excellent!! thanks! I was afraid I was going to have to write my own plugin. Good work!

Ed
Apr 1, 2008
06:26 am
 

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

Josh Byers
Apr 1, 2008
08:03 am
 

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/

Carl Thomas
Apr 1, 2008
08:38 pm
 

Thanks for updating the plugin.

Newton
Apr 1, 2008
11:30 pm
 

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.

James Reinsch
Apr 2, 2008
12:23 am
 

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!

Arian Xhezairi
Apr 2, 2008
04:12 am
 

Cool plug-in Kerry, congratulations.

jez
Apr 2, 2008
07:33 am
 

truly unique, thanks mate!

UtahLuxury.com
Apr 2, 2008
12:12 pm
 

Genius! I am going to make the magic happen right now.

Thanks a ton!!!

Kerry
Apr 2, 2008
06:54 pm
 

@Everyone Above (I know not to personal)…

…but THANKS FOR THE FEEDBACK. Hope this helps and possibly saves you some time with customization.

Jacob Cass
Apr 3, 2008
06:19 am
 

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 :)

ck
Apr 3, 2008
10:51 pm
 

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…

Mike
Apr 4, 2008
05:05 am
 

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

Kerry
Apr 4, 2008
07:36 am
 

@ Everyone – THANKS AGAIN FOR ALL THE FEEDBACK.

Steven
Apr 4, 2008
06:00 pm
 

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

Kerry
Apr 6, 2008
05:48 am
 

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.

Kerry
Apr 6, 2008
05:45 am
 

Hope this helps out.

Kerry
Apr 6, 2008
05:46 am
 

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.

Kerry
Apr 6, 2008
05:53 am
 

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.

Kerry
Apr 6, 2008
05:54 am
 

Nice implementation at ‘60bloggers.com’. I hoped the photoshop files would help. Nice blue gradient.

Kerry
Apr 6, 2008
05:55 am
 

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.

Kerry
Apr 6, 2008
05:56 am
 

Hope your upgrade goes well. Mine did. I believe bm-custom-login is now 2.5 compatible as well.

Kerry
Apr 6, 2008
10:26 am
 

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.

Kerry
Apr 6, 2008
10:40 am
 

Awesome implementation of ‘The Masterplan’ theme. Nice and clean design. Well done.

Jef
Apr 7, 2008
09:00 am
 

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.

Cihan Aksu
Apr 7, 2008
01:58 pm
 

Really wonderful and also i adore the .psd file.) Thanks my friend

Mike
Apr 7, 2008
06:41 pm
 

Works great in IE but moves left-right in Firefox when clicking between Login and Register

Cihan Aksu
Apr 8, 2008
07:33 am
 

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.

Kerry
Apr 13, 2008
11:08 am
 

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.

Kerry
Apr 13, 2008
10:56 pm
 

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).

Kerry
Apr 13, 2008
11:33 pm
 

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.

John Wayne
Apr 14, 2008
01:33 am
 

This plugin is awesome. You are a genius. Would you like to marry my daughter?

Kerry
Apr 14, 2008
08:35 am
 

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. :)

Space
Apr 24, 2008
11:24 am
 

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

http://moonscrater.com/blog/wp-login.php

Kerry
Apr 27, 2008
02:56 pm
 

@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;
}

Vincent
Apr 28, 2008
03:28 pm
 

The download-link isn’t working ?

Kerry
Apr 30, 2008
12:40 am
 

@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.

Todd
Apr 30, 2008
08:26 pm
 

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.

Kerry
May 1, 2008
08:03 pm
 

@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.

Todd
May 1, 2008
10:19 pm
 

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

Kerry
May 3, 2008
02:14 pm
 

@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.

Kerry
May 4, 2008
11:40 pm
 

@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
May 20, 2008
10:51 am
 

@TODD mine was doing the same thing… thanks for the tip ;)

Kerry
May 20, 2008
08:46 pm
 

@EMOruffino/Dave – I believe verison 1.0 should have solved this. Let me know if you still have issues after installing the new version.

Shawn S
May 23, 2008
12:21 am
 

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.

riptide
May 29, 2008
02:14 am
 

Thanks for that plugin, buddy. It saved my butt…

Joss
Jun 4, 2008
12:04 pm
 

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?

Kerry Webster
Jun 4, 2008
10:06 pm
 

@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;}

Naseer Ahmad Mughal
Jun 5, 2008
02:25 am
 

Nice plugin!

i used this one of my other blog…
I will let you know when added on the blog

thanks

ata-grup
Jun 5, 2008
08:39 am
 

Thanks Nice plugin

Alexandra
Jun 17, 2008
11:16 pm
 

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

Kerry
Jun 20, 2008
08:31 pm
 

@Alexandra – BM Custom Login and Branded Login Screen must use the same function call. Deactiveate one while testing the other.

Alex
Jun 26, 2008
08:26 am
 

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 ..

Kerry
Jun 28, 2008
02:22 am
 
Venesa
Jul 3, 2008
03:42 pm
 

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.

Kerry
Jul 13, 2008
06:31 pm
 

@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
Jul 22, 2008
10:34 pm
 

Does this run with 2.6?

Kerry
Jul 23, 2008
02:51 pm
 

@trench – My site and several others I support are using the Branded Login Screen on 2.6 with no issues at this point.

Jen
Aug 1, 2008
01:22 pm
 

Where in the CSS do you find to change the color of the link that says “Lost Password”?

Kerry
Aug 3, 2008
12:11 am
 

@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;}

J!
Aug 8, 2008
09:19 pm
 

Thanks! Great Work!

J!

Harry
Aug 14, 2008
11:48 pm
 

Great post. thank you.

Joel
Aug 29, 2008
05:30 am
 

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

Kerry Webster
Sep 29, 2008
11:01 pm
 

@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.

Josh
Dec 4, 2008
04:49 pm
 

Do you have any plans to make the plugin 2.7 compatable?

Kerry
Dec 9, 2008
11:34 pm
 

@Josh – Yes. It should take too much. A few CSS changes is all I see right now.

Homer
Dec 12, 2008
08:51 pm
 

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?!?!

Ron
Dec 14, 2008
01:16 pm
 

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

Zac
Dec 15, 2008
06:25 pm
 

You can use the branded login plugin with WP2.7. You just need to edit the login.css file

http://bitterwise.com/?p=295

David
Dec 28, 2008
08:36 am
 

Hello, Kerry

I am trying, but I can’t to unzip this file. Can You help me?
Thanks.

Message: “The Archive is damaged”

Lionel Chollet
Dec 28, 2008
06:47 pm
 

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.

Karl
Dec 30, 2008
12:59 pm
 

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

Kerry
Jan 10, 2009
02:36 pm
 

@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;
}

Karl
Jan 12, 2009
07:42 am
 

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

ZacharyGuidry
Jan 12, 2009
04:26 pm
 

Wow. That was EASY!

Thanks!

kookimebux
Feb 1, 2009
12:43 pm
 

Hello. And Bye. :)

aDniela
Feb 10, 2009
05:19 am
 

There is so amazing for me! Thanks!

Vika
Feb 10, 2009
10:04 am
 

Amzing information, gracias!

Ben
Feb 10, 2009
11:00 pm
 

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

Jason
Feb 17, 2009
02:57 pm
 

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;

Alexwebmaster
Mar 3, 2009
05:46 am
 

Hello webmaster
I would like to share with you a link to your site
write me here preonrelt@mail.ru

Haspunjuppy
Apr 13, 2009
09:46 am
 

Long string of question marks… (edit)

IterneKer
Apr 15, 2009
04:12 am
 

Long string of question marks… (edit)

daddy design
Jul 19, 2009
03:33 pm
 

plugin works great! is there a way to change the page background color. I dont want to keep it gray..

Kerry
Jul 19, 2009
11:57 pm
 

@daddydesign – add this to the top of the branded-login-screen.css:

html {
background-color: #fff;
}

Ezuca
Sep 27, 2009
04:38 am
 

Thanks. It will surely make wp login page lively.

Troy
Oct 7, 2009
01:26 pm
 

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??

RH
Jan 30, 2010
02:02 am
 

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. :-)

Trackbacks

Leave a Reply



BasecampHighrise

Comment



 

Design, News - Nov 10, 2009 21:27 - 0 Comments

My Entries in the WordCamp Boston Logo Contest

More In Design


News - Jan 25, 2010 4:37 - 6 Comments

Branded Login Screen 2.0 Released

More In News


How To - Jul 15, 2008 23:59 - 10 Comments

How WordPress 2.6 Broke My Permalink Structure…

More In How To




Login