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/ind...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
Re: Create new account input fields
Try adding the below to your css.........
Code:
#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.
Re: Create new account input fields
Sweet Get Em Fast ...
:smile:
Re: Create new account input fields
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:
Code:
#login-email-address {width: 250px;}
#login-password {width: 250px;}
Re: Create new account input fields
............and even more stylish stylings for the login/create account information (this is ALL the login/create account info, including my previous posts):
Code:
/*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. :)
Re: Create new account input fields
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
Re: Create new account input fields
Quote:
Originally Posted by
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?
Re: Create new account input fields
Quote:
Originally Posted by
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.
Re: Change display-width of account input fields
Quote:
Originally Posted by
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