By bstrange on

I dilligently searched this topic and found numerous posts on how to change the login block to a single line, or reposition it to the header or footer; but could find nothing on how to customize the border and background colors etc. What I am looking to accomplish can be seen in the pictures attached, current and desired effect.

The Desired effect is numbered and I will address them in order:

1. I would like to change the user/pass text field's border. Currently light grey to a different color.

2. I would like to change user/pass text field's background color from white to a different color.

3. I would like border on the 'Remember me' check box to a different color than it's current blueish color.

4. I would like to change the border on the Log In button (or better yet, redesign the entire button color scheme) but I don't know where it is pulling the button graphic from currently.

5. Was changing the astrisk color, but I resolved the issue before posting, for anyone wondering the css that effects this, in my modified Garland theme was:

span.form-required {
color:#FFAE00;
}

Now, I was able to resolve #5 by looking in firebug; however, for #1 & 2, Firebug brought up groups out of css that appear unrelated to the border color and background color (input, #user-login-form, and body) #3 brought up what appear to be unrelated css groupings as well (input, .form-item label.option, .form-item label, #user-login-form, and body), #4 brought up (.form-button, .form-submit, input, #user-login-form, and body)

What I expected to see was, for 1 & 2, css with #A7A6AA and #FFFFFF; for #3, css with #1C5180 and for #4, I expecter to see "url(images/login-button.gif)" or something of that nature.

Searching style.css for #A7A6AA and #1C5180 returned "String not found"

Searching style.css manually for login code yeilded only:

/**
 * Login Block
 */
#user-login-form {
  text-align: center;
}
#user-login-form ul {
  text-align: left; /* LTR */
}

So now I am kindof stumped :(

Any help would be greatly appreciated!
Thanks in advance :)

It looks like I am unable to attach the files to this post, so I threw em up on Photobucket:

Current Login Block
http://i78.photobucket.com/albums/j99/bstrange/logincurrent.jpg

Desired Login Block
http://i78.photobucket.com/albums/j99/bstrange/logindesired.jpg

⋅ Categories: Drupal 6.x

Comments

bwv’s picture

bwv commented

You have to add some custom CSS tags that refer specifically to the div id of the login block.

I had a look at a login block with the garland theme, and the login block div id in Firebug displayed as "block-user-0".

With this code added to the style sheet:

#block-user-0 .form-submit {color: white; background-color: black; border: 2px outset red;}

I was able to change the appearance and the border of the login button, for example.

bstrange’s picture

bstrange commented

Thanks! that worked great for the button, but for the life of me I can't figure out how to apply that to the user text field and password text field...

bwv’s picture

bwv commented

Try this:

#block-user-0 input {background: #cccccc;}