New to the community? Start here

membership authorize.net payment screen formatting is incorrect

When I set up premium membership and my user goes to pay using authorize.net the table format is off-center. I tried finding the php file to manually adjust it but am unsuccessful.

Mike

http://tinypic.com/r/2myx5pv/8

[attachments are only viewable by logged-in members]

Thu, 20 Feb 2014 0:54:01
  • PC
    • WPMU DEV Initiate

    Hey there Mike,

    Thanks for posting on the forums.

    Can you add the below CSS to your site and see if that works ?

    form.membership_payment_form.authorizenet.single {margin-left: auto;
    
margin-right: auto;
    
width: 50%;}

    Here is how it should look after adding the CSS.

    Please advise.

    Cheers, PC

    [attachments are only viewable by logged-in members]

  • Mike
    • The Incredible Code Injector

    PC- Thanks for the code; however the ‘phone’ label is still off-center.

    Can you identify the php file that is generating this form?

    Issues-

    Phone label is not squared over the input field

    Fields all have same lengths, not professional with zip code, state, etc.

    Want to hide company and fax (who uses faxes anymore).

    thanks

    Mike

  • DavidM
    • DEV MAN’s Mascot

    Hi @Mike,

    That I can see, when adding the adjustment PC mentioned, it fixes any problem with the Phone field.

    Have you tried the adjustment already?

    Also, the form fields can be altered individually using nth-child or nth-last-child.

    Here’s a variety of adjustments, including PC’s original snippet, for example:

    form.membership_payment_form.authorizenet.single {margin-left: auto;
    
margin-right: auto;
    
width: 50%;}
    

    
form.membership_payment_form div.authorize-form-field:nth-last-child(0),
    
form.membership_payment_form div.authorize-form-field:nth-last-child(1) {
    
display: none;
    
}
    

    
form.membership_payment_form div.authorize-form-field:nth-last-child(3) {
    
width: 200px;
    
}

    Perhaps that’ll work for you?

    Cheers,

    David

  • Mike
    • The Incredible Code Injector

    David- I entered PC’s code in my custom.css plugin without success. I tried again in the style.css and cleared cache and now it is working??!!??

    Thanks for that.

    In regard to the nth-child, I am afraid I do not understand how I can manually adjust fields? Do I count the field to adjust 

    form.membership_payment_form div.authorize-form-field:nth-last-child(1) {
    
display: none;
    
}

    think this is beyond my experience level. I am familiar with class designations.

    Thanks

    Mike

  • DavidM
    • DEV MAN’s Mascot

    Hi Mike,

    I actually mentioned the nth-child selector as I though that might actually be easier for you rather than having to hide “both” the actual form element and the label for it.

    However, we can simplify this. Here’s what you could use to, for example, hide the company and fax fields:

    div.authorize-form-field #company,
    
div.authorize-form-field label[for="company"],
    
div.authorize-form-field #fax,
    
div.authorize-form-field label[for="fax"] {
    
display: none;
    
}

    And for adjusting the widths of the fields, you can do like so:

    div.authorize-form-field #card_num,
    
div.authorize-form-field #first_name,
    
div.authorize-form-field #last_name,
    
div.authorize-form-field #state,
    
div.authorize-form-field #city,
    
div.authorize-form-field #phone {
    
width: 200px;
    
}
    

    
div.authorize-form-field #card_num {
    
width: 100px;
    
}

    How would that work for you?

    Cheers,

    David