Change display-width of account input fields

Evening all

I have been looking through the site code this evening trying to work out which php script determines how wide all the input fields are on new customer account page, in my case

http://test.italianhampers.co.uk/index.php?main_page=create_account

Most of these fields have a size="33", but some are larger, such as the address field. I want to set them all the same width.

includes/templates/template_default/templates/tpl_create_account_default.php

is looking like a candidate, but I dont see how it sets the width of these fields, I also cant find it in css either. Can anyone help me pinpoint where I can put a code change in or edit this to make all the input fields the same width (Visually - I dont want to limit the amount of data the value will store)

Thanks

Andy

Try adding the below to your css.........

#stText.alert {margin: 0px; padding: 0;}
span.alert {margin: 0; padding: 0; position: relative 90% 50%;}
input#company {width: 250px;  }
input#firstname {width: 250px; }
input#lastname {width: 250px; }
input#street-address {width: 250px;}
input#suburb {width: 250px;}
input#city {width: 250px; }
input#state {width: 250px;}
input#postcode {width: 250px;}
select#country {width: 255px; margin-right: -1px;}
select#stateZone {width: 255px; margin-right: -4px;}
input#telephone {width: 250px;}
input#fax {width: 250px;}
input#dob {width: 250px;}
input#email-address {width: 250px;}
input#email-address-confirm {width: 250px;}
input#password-new {width: 250px;}
input#postcode {width: 250px;}
input#password-confirm {width: 250px;}

That should make them all 250px. You can re-adjust from there..:)
Hope this helps.

Sweet Get Em Fast ...
:smile:

Thanks, Mark. Actually, I forgot 2 though...........if you use the 'basic' zen-cart login page, which includes the 'create_account' info that I posted, you'll see I forgot the actual LOGIN (E-mail & password) styles, which are below:

#login-email-address {width: 250px;}
#login-password {width: 250px;}

............and even more stylish stylings for the login/create account information (this is ALL the login/create account info, including my previous posts):

/*LOGIN INFORMATION STYLING*/

#loginForm fieldset {
   border-color: #1F8999;
   -moz-border-radius: 10px;
   -webkit-border-radius: 10px;
   -border-radius: 10px;
   box-shadow: #efefef 0px 5px 1px;
}
#createAccountForm fieldset {
   border-color: #1F8999;
   -moz-border-radius: 10px;
   -webkit-border-radius: 10px;
   -border-radius: 10px;
   box-shadow: #efefef 0px 5px 1px;
}

.inputLabel {
   color: #1F8999;
   text-shadow: #999 1px 1px 1px;
   font-size: 12px;
   font-weight: bold;
}

#loginForm legend {
   color: #A2E9FF;
   text-shadow: #000 1px 1px 1px;
   font-size: 16px;
}
#createAccountForm legend {
   color: #A2E9FF;
   text-shadow: #000 1px 1px 1px;
   font-size: 16px;
}


#login-email-address {width: 250px;}
#login-password {width: 250px;}
#stText.alert {margin: 0px; padding: 0;}
span.alert {margin: 0; padding: 0; position: relative 90% 50%;}
input#company {width: 250px;}
input#firstname {width: 250px; }
input#lastname {width: 250px; }
input#street-address {width: 250px;}
input#suburb {width: 250px;}
input#city {width: 250px; }
input#state {width: 250px;}
input#postcode {width: 250px;}
select#country {width: 255px; margin-right: -1px;}
select#stateZone {width: 255px; margin-right: -4px;}
input#telephone {width: 250px;}
input#fax {width: 250px;}
input#dob {width: 250px;}
input#email-address {width: 250px;}
input#email-address-confirm {width: 250px;}
input#password-new {width: 250px;}
input#postcode {width: 250px;}
input#password-confirm {width: 250px;}

Who knows................somebody may find this useful. Change colors as desired, as this is for a light blue template design. :)

Aren't input fields sized according to the number of characters they can contain? Yes, you can make the boxes appear larger or smaller, but you could end up confusing users if the box is a lot wider than the number of characters it can hold. (I've see more than a few such fields.)

Rob

rstevenson:

Aren't input fields sized according to the number of characters they can contain? Yes, you can make the boxes appear larger or smaller, but you could end up confusing users if the box is a lot wider than the number of characters it can hold. (I've see more than a few such fields.)

Rob

Hmm.........good point. Guess it could lead to confusion.......never had that problem, but you never can tell, right? May be a good idea to include a "max. characters xx" for those. But, you gotta' admit, they DO look a lot better, huh?

Get Em Fast:

... But, you gotta' admit, they DO look a lot better, huh?
Not to me. :dontgetit

I guess I'm a bit of a literalist. I like things to look like what they are. If a field is for an email address, it should be plenty long enough for the longest plausible email address. If it's for a four-digit number, it should be just big enough to hold the four-digit number. I don't see the resulting uneven right edge (if they're left-aligned) as any kind of a problem.

Rob

PS
The OP's site is very nice looking, by the way.

mi16chap:

Most of these fields have a size="33", but some are larger, such as the address field. I want to set them all the same width.

Add the following to your stylesheet, adjust width to your liking

#createAcctDefault input[type="text"], #createAcctDefault input[type="password"] {
width:300px!important;
}

Hope this helps!

Wasn't logged in and thought the first post was the newest - disregard