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 0.1
zip, 506k - [downloadcounter(Branded-Login-Screen)] downloads
41 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/
Thanks for updating the plugin.
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!
Cool plug-in Kerry, congratulations.
truly unique, thanks mate!
Genius! I am going to make the magic happen right now.
Thanks a ton!!!
@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
@ Everyone - THANKS AGAIN FOR ALL THE FEEDBACK.
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
Hope this helps out.
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.
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.
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.
Awesome implementation of ‘The Masterplan’ theme. Nice and clean design. Well done.
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.
Really wonderful and also i adore the .psd file.) Thanks my friend
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
http://moonscrater.com/blog/wp-login.php
@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.
23 Trackbacks
[...] Visit & Download [...]
[...] Branded Login Screen [...]
[...] Branded Login Screen [...]
[...] Branded Login Screen [...]
[...] Branded Login Screen [...]
[...] WordPress 2.5: Branded Login Screen [...]
[...] ‘Branded Login Screen’ Plugin (tags: wordpress plugin) [...]
[...] Branded Wordpress Log In Screen - This is a plugin that brands only the log in screen. [...]
[...] ‘Branded Login Screen’ Plugin - S man ikke overskriver personaliseret loginside ved opdatering [...]
[...] concept. But the version I’m utilizing is a modification of the one by Ben at BinaryMoon. The modification is made for those who are using Wordpress 2.5. (I suggest the one from KerryWebster, it includes [...]
[...] te ondersteunen. Voor meer tekst, uitleg en de download instructie kun je kijken op de site van Kerry Webster. Stem of voeg toe aan [...]
[...] Kerry Webster - ‘Branded Login Screen’ Plugin (tags: wordpress webdesign) [...]
[...] Kerry Webster - ‘Branded Login Screen’ Plugin (tags: wordpress webdesign) [...]
[...] http://www.kerrywebster.com/index.php/design/branded-login-screen-plugin/ Format [...]
[...] Plugin-Seite | Download geschrieben am 07.04.08 um 19:06 Uhr von: BlogPimp | [...]
[...] fine, ultima oprire o facem la pluginul Branded Login Screen. Acesta - a?i v?zut deja captura de mai jos - permite modificarea dup? gust a aspectului paginii [...]
[...] Branded Wordpress Log In Screen [...]
[...] Name: Branded Login Screen Description: Display upgrade protected custom background images for the WordPress login screen. [...]
[...] ‘Branded Login Screen’ Plugin: kerrywebster.com [...]
[...] Branded Wordpress Log In Screen - Este otro plugin te facilita enormemente la personalización de la pantalla de acceso al blog, y lo mejor es que aunque actualices la versión de Wordpress mantendrás tu imagen. [...]
[...] Release Page | Download Related PostsWordPress Plugins and Mods Working TogetherWordPress Plugins PackWordPress Plugins : Plugin Central, Login Error Cleanup, ReadySetFlickr, Widgetized Admin Dashboard, KeywordLuv, Login-boxWordPress 2.5 : Plugin ManagementWordPress 2.5 : Broken Plugins [...]
[...] Unviewable chinese text - SORRY for the inconvenience [...]
[...] Visit & Download [...]