Results 1 to 9 of 9
  1. #1
    Join Date
    Oct 2011
    Location
    West Yorkshire - England
    Posts
    38
    Plugin Contributions
    1

    Default 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

  2. #2
    Join Date
    Dec 2006
    Location
    Seligman, MO U.S.A.
    Posts
    2,124
    Plugin Contributions
    6

    Default 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.
    Last edited by Get Em Fast; 5 May 2012 at 02:47 AM.
    Teach them to shop and they will shop today;
    Teach them to Zen and they will OWN a shop tomorrow!

  3. #3
    Join Date
    Apr 2006
    Location
    Ohio
    Posts
    6,098
    Plugin Contributions
    0

    Default Re: Create new account input fields

    Sweet Get Em Fast ...
    Mark
    Hare Do - Does the rabbit beat Zen "never".
    Zen Cart 1.5.1 Update Release Need help Purchase the Book

  4. #4
    Join Date
    Dec 2006
    Location
    Seligman, MO U.S.A.
    Posts
    2,124
    Plugin Contributions
    6

    Default 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;}
    Teach them to shop and they will shop today;
    Teach them to Zen and they will OWN a shop tomorrow!

  5. #5
    Join Date
    Dec 2006
    Location
    Seligman, MO U.S.A.
    Posts
    2,124
    Plugin Contributions
    6

    Default 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. :)
    Last edited by Get Em Fast; 7 May 2012 at 04:00 AM.
    Teach them to shop and they will shop today;
    Teach them to Zen and they will OWN a shop tomorrow!

  6. #6
    Join Date
    Nov 2006
    Location
    Dartmouth, NS Canada
    Posts
    2,369
    Plugin Contributions
    0

    Default 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
    Breakfast: the most important donut of the day.

  7. #7
    Join Date
    Dec 2006
    Location
    Seligman, MO U.S.A.
    Posts
    2,124
    Plugin Contributions
    6

    Default Re: Create new account input fields

    Quote Originally Posted by rstevenson View Post
    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?
    Teach them to shop and they will shop today;
    Teach them to Zen and they will OWN a shop tomorrow!

  8. #8
    Join Date
    Nov 2006
    Location
    Dartmouth, NS Canada
    Posts
    2,369
    Plugin Contributions
    0

    Default Re: Create new account input fields

    Quote Originally Posted by Get Em Fast View Post
    ... But, you gotta' admit, they DO look a lot better, huh?
    Not to me.

    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.
    Last edited by rstevenson; 8 May 2012 at 12:37 PM.
    Breakfast: the most important donut of the day.

  9. #9
    Join Date
    Feb 2010
    Location
    New York
    Posts
    1,629
    Plugin Contributions
    14

    Default Re: Change display-width of account input fields

    Quote Originally Posted by mi16chap View Post

    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
    Last edited by rbarbour; 8 May 2012 at 12:43 PM. Reason: I'm an idiot

 

 

Similar Threads

  1. Create Account - modify existing fields or add extra fields?
    By sopretty in forum General Questions
    Replies: 4
    Last Post: 30 Jul 2010, 08:26 PM
  2. Change width of input boxes on login page
    By jeking in forum Templates, Stylesheets, Page Layout
    Replies: 8
    Last Post: 15 Mar 2010, 05:43 PM
  3. input fields log in, create account, contact us etc...
    By gee38l in forum Templates, Stylesheets, Page Layout
    Replies: 7
    Last Post: 7 Jan 2009, 03:10 PM
  4. No fields display on create account page
    By jpbakken in forum Managing Customers and Orders
    Replies: 2
    Last Post: 9 Apr 2008, 03:43 PM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •