While setting up a custom login page for a client using our Custom Login Page WP Plugin, I figured something out that is possible with the current version, through some simple custom CSS, but will be included in the next version.
Full Page Body & Background Image
Currently the WordPress login page has an “active body” that only extends to the bottom of the form div. If you are logging in to WordPress is it currently at 400px. When you login out and are taken to the login page with the confirmation message at the top, it is at 459px. This is the area that you can customize through our plugin with a custom background image.
To edit this you can simply insert some custom CSS in the Custom CSS area of the plugin.
Here is what I have used for this client:
Your height should represent at least the vertical resolution of your monitor so that your background does not get cut off. If you know CSS in the slightest you know that all this does is assure that the body portion of the document extends at least 1000 pixels vertically.
Since you have done this, now all you have to do is specify your background image in the top portion of the plugin’s page, and set it’s repetition to “repeat”.
Hi AJ,
Use HTML instead of Body tag for the background-color. No need to specified height.
Regards,
Denzel
Hi,
I’m having this problem before and try to get rid of it. Lots of try and error but still same. At the end I found this.
At your wp login css will see this:
* { margin: 0; padding: 0; }
body {
border-top-width: 30px;
border-top-style: solid;
font: 11px “Lucida Grande”, Verdana, Arial, “Bitstream Vera Sans”, sans-serif;
}
Modify to this:
* { margin: 0; padding: 0; }
html {
height:100%;
}
body {
height:100%;
background:#000;
border-top-width: 30px;
border-top-style: solid;
font: 11px “Lucida Grande”, Verdana, Arial, “Bitstream Vera Sans”, sans-serif;
}
Do not know is it wrong or not but this is the output: http://www.healthcarelifestyle.com/wp-login.php
Thanks,
Mustafa
Mustafa or anyone,
How did you change the color for the top of the logon page to complete black. Most pages have it gray. I would like to change the color on it.
I used your code and everything works great – except I still have the gray box with the link back to my page.
.-= cesar´s last blog ..Laoreet imperdiet Cras placerat suscipit purus viverra. =-.
….idk if it’s me or I’m just dumb, but you’re instructions are either vague or not working.
My site’s login: http://www.finallyanime.com/wp-login
The background is Sttillllllllllllllllllllllllllllllll only covering about half of the login page…and it’s so annoying. Please help me out. Nothing’s working. I just want this image to stretch all the way down.
.-= FaS´s last blog ..Spice & Wolf: Gettin Naughty =-.
Thanks for the great plugin. It took me a while to find the .css for the top, but I finally found it.
Add the following to the code and change the color code to match your own background.
The grey border will disappear.
body.login{
border-top-color:#2e3645;
}
FaS – Make sure you use the tag for html height in the custom CSS field.
html {
height:100%;
}