Show horizontal login form, change colour & show button as image WordPress

Joe Jenkins comments:

This is the test site:

http://bloggers.wp3.co

Pippin Williamson comments:

To change the input background to other than white, add this to your CSS:


#user_login, #user_pass {
background: #f0f0f0;
}

And replace #f0f0f0 with your color code.

To change the submit button to an image, add:


#wp-submit {
background: url('path/to/your/image.jpg');
}


Joe Jenkins comments:

Thanks, I'm almost there on this one :)

How do I make the menu show up horizontally?

I've tried <?php wp_login_form(); ?> and it just gives me the vertical style (as you can see on the page now) and I tried to take the form out of wp-login.php, which looked ok, but doesn't actually work.

Pippin Williamson comments:

Because I don't have the actual source code in front of me, I can't tell you the exact id's, but it would be something like this:

#wp-login input {
display: block;
float: left;
margin-right: 10px;
}


Then just adjust your spacing accordingly.

Joe Jenkins comments:

This is the CSS I am using (including your code):

#header-signup {
background: transparent;
margin: 20px 0px 10px 320px;
padding: 0px 0px 0px 0px;
display: block;
float: left;
}


And this is from the header file:

<div id="header-signup">
<?php wp_login_form(); ?>
</div>

I've also noticed that the submit image is in a button.

Pippin Williamson comments:

Do


#user_login, #user_pass {
display: block;
float: left;
margin: 20px 10px 10px 0;
}
#header-signup {
margin-right: 320px;
display: block;
float: left;
}


That should be getting really close.

Joe Jenkins comments:

I've done that (but changed it to margin left), and it is starting to get there, but it is still showing the username & password inputs on seperate rows.

Weirdly, it has the titles for those inputs and the remember me checkbox to the right, but the remember me text below the password input.

Pippin Williamson comments:

For the username and password text, add


#header-signup p {
float: left;
display: block;
margin-right: 5px;
}


See what that looks like and we will reevaluate.

Joe Jenkins comments:

Well, that sorted out the input boxes too :)

Just one last thing on there, is it possible to just remove the text, so it doesn't say username, password, or remember me?

It takes up hell of a lot of space.

Pippin Williamson comments:


#header-signup label {
display: none;
}


That should do the trick.

Joe Jenkins comments:

Thanks, that's great.

Now I can have a play with it and sort out other things

You can relax now and rest your brain :)