How to remove the lock icon from checkout page

Hi, i would like to remove the lock icon from my checkout page (not the ssl, of course), the one that shows besides of the payment form (PO). After removing it, the form would need to be centralized, can you guys help me?

Thank you!
Comments
  • fc_adamfc_adam FoxyCart Team
    edited November 30
    @leaodonorte,

    You can hide the lock image to the left of the payment fields using a little CSS, like this:
    <style type="text/css">
    #fc .fc-checkout__section--payment #fc-icon-lock-large {
    display:none;
    }
    </style>
    You could include that in the "header" textarea of the "Add custom header and footer code to your templates" option found on the configuration page in the admin.

    In terms of centralizing the form - that would be achieved with some custom CSS too - although I'm not 100% clear on which portions, and how, you're wanting to centre.
  • Thank you , it worked. I would like to make some more changes, but is dificult to put on words, so i have created an image explaining, can you take a look and try to help me?

    image

    Thank you!

  • fc_adamfc_adam FoxyCart Team
    @leadonorte,

    Thanks for the screenshot, that definitely helps. I believe the following CSS should get you close to what you're after:
    <style>
    @media (min-width: 768px) {
    #fc .fc-container__grid--use-different-address, #fc .fc-container__grid--input--customer-email, #fc .fc-container__grid--authentication-button--amazon, #fc .fc-container__grid--checkout-subscription-cancel, #fc .fc-container__grid--checkout-submit-helper-text, #fc .fc-container__grid--checkout-subscription-cancel-helper-text, #fc .fc-container__grid--input--company, #fc .fc-container__grid--input--phone, #fc .fc-container-checkout__grid--postal-code, #fc .fc-container__grid--payment-method, #fc .fc-checkout__additional-field--tos, #fc .fc-checkout__additional-field--secure-transfer, #fc .fc-checkout__additional-field--subscribe, #fc .fc-checkout__additional-field--save-account, #fc .fc-container__grid--recaptcha, #fc .fc-address-entry > .fc-form-group:first-of-type, #fc .fc-container__grid--input--tax-id , #fc .fc-address-entry__address-container {
    margin-left: 8.33333% !important;
    width: 83.33333% !important;
    }

    #fc .fc-container__grid--label--name, #fc .fc-container__grid--label--tax-id, #fc .fc-container__grid--label--address {
    display:none;
    }

    #fc .fc-container__grid--input--company, #fc .fc-container__grid--input--tax-id {
    width:100%;
    }

    #fc .fc-container__grid--input--first-name {
    width: 50%;
    padding-left: 2px !important;
    }
    #fc .fc-container__grid--input--last-name {
    width: 50%;
    padding-right: 5px !important;
    }
    #fc .fc-container__grid--input--address1 {
    width:60%;
    padding-left:2px !important;
    }
    #fc .fc-container__grid--label--address2 {
    width: 40%;
    padding-right: 5px !important;
    }
    #fc .fc-container__grid--input--phone {
    padding-right:15px;
    }
    }
    </style>
    You'll also want to make a small change to the custom field you're adding into the address fields, removing the empty div with a class of col-sm-3 and updating the other div to have classes of col-sm-offset-1 col-sm-10 instead of the two it has now.

    It may need some finessing depending on your specific requirements - but should hopefully help get you started though.
  • Many thanks Adam! As always a great support!
Sign In or Register to comment.