Support » Plugin: WP Payeezy Pay » Styling forms

  • Resolved chrdunne

    (@chrdunne)


    Is it possible to style the forms, change their layout etc?

    Do you have any examples?

    Thanks
    Chris

Viewing 1 replies (of 1 total)
  • Plugin Author Richard Rottman

    (@rickrottman)

    Yes. The following CSS is loaded on the page directly before the form:

    <style>
      #x_first_name {
        width: 250px;
        height: 30px;
        padding: 0 0 0 6px;
        border: 1px solid #222
      }
      #x_last_name {
        width: 250px;
        height: 30px;
        padding: 0 0 0 6px;
        border: 1px solid #222
      }
      #x_company {
        width: 250px;
        height: 30px;
        padding: 0 0 0 6px;
        border-color: #222
      }
      #x_address {
        width: 250px;
        height: 30px;
        padding: 0 0 0 6px;
        border: 1px solid #222
      }
      #x_city {
        width: 250px;
        height: 30px;
        padding: 0 0 0 6px;
        border: 1px solid #222
      }
      #x_state {
        width: 250px;
        height: 30px;
        padding: 0 0 0 6px;
        border: 1px solid #222
      }
      select#x_state,
      select#x_country {
        padding: 0 0 0 6px;
        -webkit-appearance: none;
        -moz-appearance: none;
        -webkit-border-radius: 0;
        border-radius: 0;
        -webkit-box-shadow: none;
        box-shadow: none
      }
      #x_country {
        width: 250px;
        height: 30px;
        padding: 0 0 0 6px;
        border: 1px solid #222
      }
      #x_invoice_num {
        width: 250px;
        height: 30px;
        padding: 0 0 0 6px;
        border: 1px solid #222
      }
      #x_po_num {
        width: 250px;
        height: 30px;
        padding: 0 0 0 6px;
        border: 1px solid #222
      }
      #x_reference_3 {
        width: 250px;
        height: 30px;
        padding: 0 0 0 6px;
        border: 1px solid #222
      }
      #x_user_1 {
        width: 250px;
        height: 30px;
        padding: 0 0 0 6px;
        border: 1px solid #222
      }
      #x_user_2 {
        width: 250px;
        height: 30px;
        padding: 0 0 0 6px;
        border: 1px solid #222
      }
      #x_user_3 {
        width: 250px;
        height: 30px;
        padding: 0 0 0 6px;
        border: 1px solid #222
      }
      #x_email {
        width: 250px;
        height: 30px;
        padding: 0 0 0 6px;
        border: 1px solid #222
      }
      #x_phone {
        width: 125px;
        height: 30px;
        padding: 0 0 0 6px;
        border: 1px solid #222
      }
      #x_zip {
        width: 125px;
        height: 30px;
        padding: 0 0 0 6px;
        border: 1px solid #222
      }
      #entered_coupon {
        width: 200px;
        height: 30px;
        padding: 0 0 0 6px;
        border: 1px solid #222
      }
      #x_description {
        padding: 0 0 0 6px;
        border: 1px solid #222
      }
      label {
        font-weight: 700;
        display: block
      }
      #x_amount {
        width: 100px;
        height: 30px;
        padding: 0 0 0 6px;
        border-color: #222;
        border-width: 1px;
        margin-bottom: 20px;
        margin-right: 10px;
        display: inline
      }
      #x_amount2 {
        width: 100px;
        height: 30px;
        padding: 0 0 0 6px;
        border-color: #222;
        border-width: 1px;
        margin-bottom: 20px;
        display: inline
      }
      #wp_payeezy_payment_form input[type="submit"] {
        width: auto
      }
    </style>

    You can override any of these by adding !important to the new style rule. For example, if you wanted to make the #x_first_name field 300px wide instead of 250px wide, you could go into Customizer and under Additional CSS, add the following rule:

    #x_first_name {
        width: 300px !important;
      }

    The would result in the First Name field being 300px wide.

Viewing 1 replies (of 1 total)
  • The topic ‘Styling forms’ is closed to new replies.