64 Responses to “Customized Wordpress login Page Plugin”

  1. Andy says:
    January 12, 2009 at 2:42 pm

    How do I make it so that my login page also displays on option to register?

    As for the logo change…the plugin worked flawlessly…thanks!

    Andy

    Reply
    • admin says:
      January 14, 2009 at 11:41 am

      hello Andy
      Thanks for visiting and the message.Well,you may enable registration option in settings->General(Any one can register option),just check the check box and save.

      Reply
  2. Wendy Merritt says:
    January 14, 2009 at 10:34 am

    I am working on a new site (www.smashingonlinesurveys.com) built on the WordPress 2.7 platform. I used your plugin to try and brand the login. However, my logo is a different size from yours. I do not see where to change the code in the wp-customized-login.php. If go to my site you will see that about half of my image is chopped off.

    Thanks for your help and such a great idea for a plugin :-)

    blessings,
    Wendy

    Reply
    • admin says:
      January 14, 2009 at 11:47 am

      hi Wendy,Thanks for dropping by.
      I just checked your website.here is what you need to do.Open the custom-login.css file(you can find it in wp-customized-login folder).Now you may see something written as
      #login h1 a {custom-login.css (line 2)
      background:transparent url(logo.png) no-repeat scroll 0 0;

      }

      change that to

      #login h1 a {custom-login.css (line 2)
      background:transparent url(logo.png) no-repeat scroll 0 0;
      height:277px;
      }

      Where height attribute is only to define the height of your logo(normally not required),I put it as 277px as your logo is 277px.all the best with your project.
      regards
      Brajesh

      Reply
  3. Wendy Merritt says:
    January 14, 2009 at 1:14 pm

    Brajesh,

    Thank you very much! It would have taken me hours to figure out what was wrong!

    blessings,
    Wendy

    Reply
  4. Ben says:
    January 17, 2009 at 4:06 pm

    Brajesh,

    Thanks for this, very helpful.
    Btw, where would one include the code directly into the wp-login.php file; i am a PHP dummy but i would rather have the code directly in to cut on the number of plugins.

    Thanks

    Reply
  5. Neo says:
    January 26, 2009 at 7:01 pm

    Very simple yet powerful and useful plugin! Thank you!

    Reply
  6. Azzam says:
    January 30, 2009 at 12:37 pm

    What an excellent plugin! Hats off to you.

    It would be even more amazing to add custom background for the pages also, any thoughts?

    Reply
    • admin says:
      February 7, 2009 at 1:29 pm

      hi Azzam
      Thanks for the nice comments.
      If you want to modify the background of login page,please look inside custom-login.css and uncomment the commented selectors.Then you may add your own rules for the background.
      btw, if you are looking for adding custom background images for each post,page, you may consider my another plugin, “Wp Unique Article Header Image”
      Hope it helps.
      Brajesh

      Reply
  7. Steve says:
    February 6, 2009 at 2:50 pm

    My logo appears offset from the box containing the login/register info, a little too left and stops a little before the right side.
    I tried adding a width property like you did with the height, but it didn’t work. Can you help??

    Reply
    • admin says:
      February 7, 2009 at 1:25 pm

      hi Steve
      you need to add one line into custom-login.css
      on line number 2 of custom-login.css you will see a selector

      #login h1 a{
      background:transparent url(Weblogo.jpg) no-repeat scroll 0 0;
      display:block;
      height:100px;
      margin-left:15px; /*i have added margin-left 15 px and it works */
      width:300px;
      }
      Hope it helps.
      Please let me know if you have any issue.
      regards
      brajesh

      Reply
  8. Steve says:
    February 8, 2009 at 8:51 am

    Thank you for your help, Brajesh. Wonderful plugin.

    Reply
  9. MClogoID says:
    February 10, 2009 at 11:51 pm

    i cant wait to try this.. of corz im interested and excited to see the result.. thanks a lot!

    Reply
  10. Craig says:
    February 26, 2009 at 12:16 pm

    Thanks for this plugin! It’s fantastic!

    Here’s how I used it on a client’s site: http://www.jaqdwear.com/wp-login.php

    Here’s the CSS:

    #login h1 a { background: url(logo150.png) no-repeat top center; height: 150px;}

    body.login { background: url(frog_logo_back.png) no-repeat bottom right #000; }
    #login { height: 600px; }
    .login #nav a { color: #FF1493 !important; }
    .login #nav a:hover { color: #FFF !important; }
    #login form .submit input {
    background: #FF1493 none repeat scroll 0 0;
    border-color: #FFF !important;
    color: #FFFFFF !important;
    font-weight:bold;
    }

    #loginform { background: #000; }
    #loginform p { }
    #loginform label { font-family: verdana,arial; font-size:0.9em; }

    #registerform { background: #000; }
    #registerform label { font-family: verdana,arial; font-size:0.9em; }

    #lostpasswordform { background: #000; }
    #lostpasswordform label { font-family: verdana,arial; font-size:0.9em; }

    #wp-submit { }
    #forgetmenot { }
    .login #backtoblog a { color: #FFF; }
    .login #backtoblog a:hover { color: #FF1493; }
    #nav { }
    .message {
    background-color: #444 !important;
    color: #FFF;
    border-color: #FF1493 !important;
    }

    Reply
  11. Lionel Chollet says:
    March 2, 2009 at 4:09 pm

    Hello and thanks for your plugin,

    After activation, my custom logo wasn’t displayed on the login page, so I opened wp-customized-login.php in a text editor and found that, if your WordPress install is in a folder but your blog address is the same as your domain, you need to modify line #32:

    replace:
    $stylesheet_uri=get_bloginfo(’siteurl’).”/”.PLUGINDIR.”/”.dirname(plugin_basename(__FILE__)).”/custom-login.css”;

    with:
    $stylesheet_uri=get_bloginfo(‘wpurl’).”/”.PLUGINDIR.”/”.dirname(plugin_basename(__FILE__)).”/custom-login.css”;

    Reply
  12. Luke says:
    March 9, 2009 at 7:19 am

    How can I change the color of the entire background throughout the whole page? So far, whenever I try to change it from the css, it only color’s half the screen to just below the “lost your password” link. Other than my small problem, great plugin!

    Reply
  13. luke says:
    March 9, 2009 at 9:20 am

    I am having trouble changing the colour of the background from the CSS file. Whenever I set a background colour, it only fills the screen down to just below the “Lost your password” link. You wouldn’t happen to know how to change the colour of the whole background? Other than that, great plugin!!

    Reply
  14. brajesh says:
    March 9, 2009 at 11:56 am

    @Luke
    Hello Luke.Thanks for using this plugin.Well,I am not sure what you mean by saying tha background color below the forgot password link.
    Well you may try putting this in the css file

    body.login {
    display:block;
    background:red; /* or what ever color you want */

    }

    btw,if it does not solve your poblem ,please point me to your site and I will do my level best to assist you.

    Regards
    Brajesh

    Reply
  15. luke says:
    March 9, 2009 at 12:46 pm

    Sorry but that didn’t change anything, still looks the same. My site that its affecting isn’t online as its just a test installation. Here’s my current css:

    body.login {
    color: #9CC4C7;
    background: #102030 url(bg-new-Blue.jpg) no-repeat center top;
    font: 11px/18px Georgia;
    }

    And a screenshot here: http://img19.imageshack.us/my.php?image=whitespace.png

    Reply
    • brajesh says:
      March 9, 2009 at 1:15 pm

      hi Luke
      Thanks for putting the image.Now I got the clue ,why it is happening so.It is , because the margin on login div is set to be 7em by default from top and bottom.So it’s that margin causing the whitespace at bottom .you may reset that margin using the following code

      body.login #login{
      margin:7em auto 0 auto; /***set the margin from bottom to be zero */
      }
      here we are simply overwriting the default margin.to make it lok a little better you may consider adiing some bottom padding.Please adjust the top margin(which I put here as 7em ),if required.Also,please do let me it helped or not.
      thanks
      Brajesh

      Reply
  16. luke says:
    March 9, 2009 at 1:29 pm

    Well, it helps thanks, but not correctly… I’ve tried adjusting the bottom margin and that makes the background cover more of the screen depending on the value I enter, but its only for a certain size, it would be better if it just fitted the screen size. I tried setting it to 100% but that didn’t work (im no CSS expert). Do you know how to make it the size of the screen? Thanks for all the help.

    Reply
  17. luke says:
    March 9, 2009 at 1:30 pm

    Oh ok, sorry, missed the 2nd message.

    Reply
  18. luke says:
    March 10, 2009 at 6:58 pm

    Any update on this?

    Reply
  19. Rude Retro says:
    March 12, 2009 at 4:31 am

    Great plugin. I also don’t like editing the wp files. It’s a pain when upgrading. I was wondering if you could add an option to add text to the login/register page. I have a private site where only people I know can join and I want them to use their real names as usernames and I’d like that printed on the page.
    I think it would be cool for other reasons too. People could put reasons to join the site or perhaps even advertising.
    I don’t know how easy it would be though. I am a beginner at php but I haven’t studied for a while but I will have a look at your code myself to see if I can figure out a solution.

    Reply
    • brajesh says:
      March 27, 2009 at 11:32 am

      @Rude Retro
      Hi,Thanks for your comment.Well ,the things you mentioned is not difficult, and is achievable using a few basic filters/actions like “login_form”,”login_message”, I will be writing a post discussing very soon how to achieve that.
      Thanks
      Brajesh

      Reply
  20. luke says:
    March 14, 2009 at 7:33 pm

    Ok, i managed to figure it out myself, entering the following code will allow you to choose a background colour for the rest of the white block:

    html {
    background-color: #FFF; /* enter the colour here */
    }

    Reply
    • brajesh says:
      March 27, 2009 at 11:34 am

      @Luke
      Hi Luke,I am sorry ,but I had been disconnected from network for the few following days after leaving my last comment to you.So could not help you.I am happy ,you figured it out.all da best with your developments.

      Reply
  21. Rude Retro says:
    March 27, 2009 at 4:50 pm

    That’s great. I’m looking forward to it and I bet that it will make this plugin even more popular.

    Reply
  22. pkayf says:
    April 15, 2009 at 8:25 am

    What size is the .png suppose to be. My logo is only partially showing. I just need to down size, but not sure what size.

    thanks
    Penny

    Reply
  23. dervieno says:
    April 16, 2009 at 5:06 pm

    was it fixed brajesh? i really need it :-(

    Reply
  24. Exep says:
    May 26, 2009 at 2:07 am

    Hello, its possible use this login widget to login on other location, for exemple:
    in my server root a have wordpress: http://wwww.etcetctec.com/

    And have phpbb in: http://wwww.etcetctec.com/phpbb/

    I need use your login widget to login and redirect to phpbb

    Its possible? please help

    Reply
  25. ripley says:
    June 13, 2009 at 12:03 am

    I have my wordpress set up so the index.php is in the root and the rest of the file is on a folder. This seems to cause your plugin to stop working. Could you please help how to solve this problem? Thanks you for your work!

    Reply
  26. Don says:
    June 23, 2009 at 2:18 am

    Hi. I’m mid developing my website so I can’t give you a link yet. My issue is that I have a 1280×160 header image for my site that I’d like to show on all the login pages as well. … I can resize it (and even add “scroll” so I can see it all) but I can’t get it all the way to the left on the page. It won’t go any further left than the Username/Password “box”. I’ve been digging through the w3c CSS properties with no luck. What am I missing?

    Here’s where it sits at the moment, after experiments failed:

    #login h1 a{background:url(ftr-it-header-image-V2.jpg) no-repeat; width:1280px;height:160px;}

    Thanks in advance.

    Reply
  27. Don says:
    June 23, 2009 at 5:15 am

    Never mind. After piecing together examples from Craig (2/26/09) and Luke (3/14/09) I’ve basically got it. There is some fine tuning to do, the margin-top behaves differently in Firefox than IE7, and I couldn’t figure out what the #login {height: ###px} added so I remarked that out for now, but other than that, the following code works — see remarks:

    /* have to put something here or the WP logo shows up, so make it disappear with 0×0px, … */
    /* adding margin-top moves the form down below the new header image defined in the body section; */
    /* however, the position margin-top sets on the page varies between Firefox and IE 7, though not fatally */
    #login h1 a{background:url(ftr-it-header-image1-300×37.jpg) no-repeat; width:0px; height:0px; margin-left:0px;margin-top:145px}

    /* initial code by Craig 2/26/09; modified for my site */
    body.login

    /* puts my header image – 1280×160 – across the top of the page starting at the upper left corner, replaces above image */
    /* new: border-top-color changes the border color above the image to match the color below set by the html statement; set */
    {background: url(‘ftr-it-header-image-V2.jpg’) no-repeat top left; border-top-color: #BDBDBD;}

    /* new: set text and hover colors for border top above header image */
    .login #backtoblog a { color: #000099; }
    .login #backtoblog a:hover { color: #000099; text-decoration: underline; font-weight: bold; }

    /* adds color to area of page below the header image — code solution by Luke 3/14/09 */
    html {background-color:#BDBDBD;}

    /* not sure what this code does, other than when unremarked, if set less than the height of the header image */
    /* it cuts into the image, more didn’t seem to matter and leaving it remarked out has no apparent effect */
    /* #login { height: 160px; } */

    /* #nav = lost password link */
    .login #nav a { color: #000099 !important; }
    .login #nav a:hover { color: #000099 !important; text-decoration:underline; font-weight:bold;}

    /* submit button: button color, border color, text color, font weight */
    #login form .submit input {
    background: #000099 none repeat scroll 0 0;
    border-color: #F2F2F2 !important;
    color: #F2F2F2 !important;
    font-weight:bold;
    }

    /* form color */
    #loginform {background: #BDBDBD;}
    #loginform p { }
    #loginform label { font-family: verdana,arial; font-size:1.0em; color: #000099}

    /* register form, uses #nav and .submit settings */
    #registerform { background: #BDBDBD; }
    #registerform label { font-family: verdana,arial; font-size:1.0em; }

    /* lost password, uses #nav and .submit settings */
    #lostpasswordform { background: #BDBDBD; }
    #lostpasswordform label { font-family: verdana,arial; font-size:1.0em; color: #000099}

    #wp-submit { }

    /* not sure what this does, haven’t researched it yet */
    #forgetmenot { }

    #nav { }

    .message {
    background-color: #BDBDBD !important;
    color: #FF0000;
    border-color: #FF0000 !important;
    }

    Reply
  28. Don says:
    June 23, 2009 at 5:35 am

    Okay. I got a tip from my theme site on how to test for the different browsers, see: http://neilkilbride.blogspot.com/2008/01/browser-css-differences-ie6-ie7-firefox.html.

    Here’s the modified code and it works beautifully now (note that there is still the question of the value of having the #login {height: xxxpx;} setting. Enjoy!

    **********************************************************

    /* have to put something here or the WP logo shows up, so make it disappear with 0×0px, … */
    /* adding margin-top moves the form down below the new header image defined in the body section; */
    /* however, the position margin-top sets on the page varies between Firefox and IE 7, though not fatally */
    #login h1 a{background:url(ftr-it-header-image1-300×37.jpg) no-repeat; width:0px; height:0px; margin-left:0px;margin-top:147px;.margin-top:70px;}

    /* initial code by Craig 2/26/09; modified for my site */
    body.login

    /* puts my header image – 1280×160 – across the top of the page starting at the upper left corner, replaces above image */
    /* border-top-color changes the border color above the image to match the color below set by the html statement set below */
    {background: url(‘ftr-it-header-image-V2.jpg’) no-repeat top left; border-top-color: #BDBDBD;}

    /* set text and hover colors for border top above image */
    .login #backtoblog a { color: #000099; }
    .login #backtoblog a:hover { color: #000099; text-decoration: underline; font-weight: bold; }

    /* adds color to area of page below the image — code solution by Luke 3/14/09 */
    html {background-color:#BDBDBD;}

    /* not sure what this code does, other than when unremarked, if set less than the height of the header image */
    /* it cuts into the image, more didn’t seem to matter and leaving it remarked out has no apparent effect */
    /* #login { height: 160px; } */

    /* #nav = lost password link */
    .login #nav a { color: #000099 !important; }
    .login #nav a:hover { color: #000099 !important; text-decoration:underline; font-weight:bold;}

    /* submit button: button color, border color, text color, font weight */
    #login form .submit input {
    background: #000099 none repeat scroll 0 0;
    border-color: #F2F2F2 !important;
    color: #F2F2F2 !important;
    font-weight:bold;
    }

    /* form color */
    #loginform {background: #BDBDBD;}
    #loginform p { }
    #loginform label { font-family: verdana,arial; font-size:1.0em; color: #000099}

    /* register form, uses #nav and .submit settings */
    #registerform { background: #BDBDBD; }
    #registerform label { font-family: verdana,arial; font-size:1.0em; }

    /* lost password, uses #nav and .submit settings */
    #lostpasswordform { background: #BDBDBD; }
    #lostpasswordform label { font-family: verdana,arial; font-size:1.0em; color: #000099}

    #wp-submit { }

    #forgetmenot { }

    #nav { }

    .message {
    background-color: #BDBDBD !important;
    color: #FF0000;
    border-color: #FF0000 !important;
    }

    Reply
  29. Don says:
    June 23, 2009 at 6:09 am

    P.S. I just noticed a couple of missing semi-colons after CSS color codes.

    Reply
  30. Don says:
    June 23, 2009 at 6:36 am

    One final note: if you add a margin-top:Xpx; to the .submit section you can move the button down out of the way of the “A password will be e-mailed to you.” message.

    /* submit button: button color, border color, text color, font weight, margin-top moves the button down */
    #login form .submit input {
    background: #000099 none repeat scroll 0 0;
    border-color: #F2F2F2 !important;
    color: #F2F2F2 !important;
    font-weight:bold;
    margin-top:5px;
    }

    Reply
  31. Don says:
    June 23, 2009 at 6:47 am

    This really is the last update for the night (well, morning). There was one last thing bugging me. The color of the “A password will be mailed to you.” message seen during registration. There is a way to change it.

    Add the following anywhere you wish — I put it right below the /* form color */ section:

    #reg_passmail {color: #000099;}

    Hope this helps.

    Reply
  32. Don says:
    June 23, 2009 at 9:29 pm

    If y’all are interested in another example of customizing this neat plugin, check out this forum thread I posted at: http://forum.bytesforall.com/showthread.php?t=2152.

    Based on hints and code from Craig and Luke on this forum, it is an example of totally “tweaking” the custom-style.css file to allow for full header images, color change, and so on … and it handles issues between FireFox and IE7.

    Hope this helps.

    Reply
  33. Stef says:
    July 1, 2009 at 3:19 am

    Great plugin-it worked wonders

    Reply
  34. Chris Hajer says:
    July 6, 2009 at 12:57 am

    Hi, I know this blog post is a little out of date, but I just started using the plugin today, and I am wondering if it’s possible to insert the stylesheet in the proper place, in the rather than before the DOCTYPE? This is with WordPress 2.8.

    Thank you.

    Reply
    • brajesh says:
      July 11, 2009 at 11:02 am

      hi Chris
      Please check again.this works perfectly and ads css to `` tag not before the doc type.I am using it on this blog and you may wish to check the login page.Use firebug to check,where the css is added.
      Thanks
      Brajesh

      Reply
  35. Carl S. says:
    July 6, 2009 at 11:57 am

    Hi, thanks for the useful info. But now I haven’t got even a theme installed ’cause I’m a new one to WP :( so I will use your post a bit later. Hope you will help me in case of some troubles

    Reply
  36. John says:
    July 16, 2009 at 7:43 pm

    I have used this plug in on other sites and love it. For some reason it is not working on my http://www.singleparenttravel.net site.

    I followed the directions and uploaded the graphic (logo.png) via FTP. The log-in screen is now just blank. The cursor changes tot he pointer where the logo is supposed to be, but the logo just does not appear.

    Any suggestions?

    Reply
    • brajesh says:
      July 18, 2009 at 2:12 pm

      hi John,I am sorry, your comment went into spam.Today while cleaning the spams,I had a look at it and thought I must respond.
      I checked your website and the logo is till not appearing at the login page.
      I checked and the logo is not present in the right directory.

      Please note, you must upload your logo to wp-content/plugins/wp-customized-login/ directory.
      Please upload the logo to above mentioned directory and let me know ,if the problem still persists.

      Thanks
      Brajesh

      Reply
  37. Chris Hajer says:
    July 18, 2009 at 2:14 pm

    It doesn’t appear that the logo is actually here:
    http://www.singleparenttravel.net/wp-content/plugins/wp-customized-login/logo.png

    That’s where the login page expects to see it, but it’s not there.

    Reply
  38. John says:
    July 18, 2009 at 4:15 pm

    I have deleted the logo and re-uploaded it and it is in the directory. The image is long and rectangular (896 x 106)

    I have the plug in on another blog (www.eyeonannapolis.net) and I just modified the logo and reuploaded that and it appears. However, that logo is also wide (608 X 103) and it is showing up but only partially.

    I am still stumped on the singleparenttravel.net site., here is the destination directory (/www/wp-content/plugins/wp-customized-login) and in that directory is the file logo.png and I can see that logo fine.

    Is there a way to change the sizes so the full logos will show?

    Thakns so much!

    Reply
  39. Chris Hajer says:
    July 18, 2009 at 5:29 pm

    Your logo is here:
    http://www.singleparenttravel.net/wp-content/plugins/wp-customized-login/Logo.png

    Linux is case-sensitive, so you will need to rename that to logo.png, lowercase, and things will be fine.

    To make the full image appear, I think I would change the size of the #login div. You need to remove the CSS comment /* from the custom-login.css, then add this to the #login section:

    `#login {
    width: 608px;
    }`

    Then you need make the other two sections narrow and centered again. You will need to modify #loginform and #nav, with something like this:

    width: 320px;
    margin: 0 auto;

    320px is the size of the WordPress included login form.

    Reply
  40. Chris Hajer says:
    July 18, 2009 at 5:31 pm

    Don’t use the backticks in your custom-login.css. I was trying to format that as code here but it didn’t work. Just this:

    #login {
    width: 608px;
    }

    You’ll need to remove the opening and closing CSS comments for that change to have any effect. (Remove this /* from the beginning of the file [right after this line: *Uncomment it and edit all sections with your code formatting */], and this */ from the end.)

    Reply
  41. John says:
    July 18, 2009 at 5:39 pm

    Thank you so much. That was it.

    Reply
  42. Bob says:
    September 7, 2009 at 7:59 pm

    Great plugin. One question. I would like to have the logo point to my site, the developer, not the site I have developed. Is there a way I can do that?

    Reply
    • brajesh says:
      October 13, 2009 at 7:49 am

      hi Bob, you will need to modify the code a little bit.
      change this function “tiw_site_url($url)” and return your sites link.It will be automatically be linked.

      Thanks
      Brajesh

      Reply
  43. michelle says:
    October 4, 2009 at 7:16 pm

    i’m brand new to coding. question, where do you put all of this code to show your login page?

    Reply
    • brajesh says:
      October 13, 2009 at 7:47 am

      hi, you should just install the plugin and upload logo to your wp-content/plugins/wp-customized-login
      Please check the readme.txt (replace the orginal logo with yours and it will appear automatically on your wp login page)

      Thanks

      Reply
  44. Jodi says:
    October 8, 2009 at 6:12 pm

    Hi Brajesh,

    Everything worked perfect when I edited the CSS for my logo. I have read all the posts and most of them have to do with logo issues. I can’t seem to get the “logo” to go to my site. If you click on it you are taken to some other place. Where do I edit that? I see the filters but I don’t know what needs to be edited to point to my site.
    I LOVE your plugin and recommend it to my friends because it was so easy to use and smooth! Thanks!

    Reply
    • brajesh says:
      October 13, 2009 at 7:52 am

      hi Jodi
      I Hope you are running wordpress not wordpress Mu.This plugin is for wordpress.

      Still, If you find this problem.
      Please check the plugin code(that’s only a few lines) and locate function “tiw_site_url”.
      Edit the return code and return your sites link.It will work.
      Thanks
      Brajesh

      Reply
  45. kerjakeras says:
    December 28, 2009 at 3:24 am

    thanks for sharing this plugin, i’ve been looking for this solution for my company site to make a branding login page. thanks:)

    Reply

Leave a Reply



Get Adobe Flash playerPlugin by wpburn.com wordpress themes