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

I'm wanting to have a login section on the site that is horizontal, I'd also like to have the form parts a different colour to the usual white and have the submit button show as an image.

This should be simple, but my brain is fried today.

The image shows it how it should be (ignore the red ink). However, the 'remember me' check box should also be there if possible.

attachment image View Attachment

Joe Jenkins | 08/13/10 at 2:23pm | Edit

horizontal, login

(1) Possible Answers Submitted...

Last edited:
08/13/10
3:44pm
Pippin Williamson says:
Can you give a link to the site? Then I can tell you how to change the colors and images.
- 08/13/10 2:32pm
  
  Joe Jenkins says:
  This is the test site:
  
  http://bloggers.wp3.co
- 08/13/10 2:36pm
  
  Pippin Williamson says:
  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');

}
```
- 08/13/10 2:53pm
  
  Joe Jenkins says:
  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.
- 08/13/10 3:00pm
  
  Pippin Williamson says:
  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.
- 08/13/10 3:13pm
  
  Joe Jenkins says:
  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.
- 08/13/10 3:16pm
  
  Pippin Williamson says:
  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.
- 08/13/10 3:27pm
  
  Joe Jenkins says:
  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.
- 08/13/10 3:30pm
  
  Pippin Williamson says:
  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.
- 08/13/10 3:34pm
  
  Joe Jenkins says:
  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.
- 08/13/10 3:35pm
  
  Pippin Williamson says:
```
#header-signup label {

  display: none;

}
```
  That should do the trick.
- 08/13/10 3:43pm
  
  Joe Jenkins says:
  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 :)