Announcement

Collapse
No announcement yet.

PayPal Commerce CSS for Colossus

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

    PayPal Commerce CSS for Colossus

    It's looking like the CSS for PayPal Commerce isn't quite matching up to Colossus. Do I need to modify the CSS or the template or both?
    Leslie Kirk
    Miva Certified Developer
    Miva Merchant Specialist since 1997
    Previously of Webs Your Way
    (aka Leslie Nord leslienord)

    Email me: [email protected]
    www.lesliekirk.com

    Follow me: Twitter | Facebook | FourSquare | Pinterest | Flickr

    #2
    Originally posted by lesliekirk View Post
    It's looking like the CSS for PayPal Commerce isn't quite matching up to Colossus. Do I need to modify the CSS or the template or both?
    I've been dinking around with this a little but it's still not quite right


    Code:
    div#paypalcp-cc-name.paypalcp-cc-field.paypalcp-cc-name-field,
    div#paypalcp-cc-number.paypalcp-cc-field.paypalcp-cc-number-field,
    div#paypalcp-cc-exp.paypalcp-cc-field.paypalcp-cc-exp-field,
    div#paypalcp-cc-cvv.paypalcp-cc-field.paypalcp-cc-cvv-field {
    display: block;
    width: 100%;
    height: calc(3.5em - 2px);
    margin-bottom: 0.25em;
    padding: 0;
    position: relative;
    background-color: #fff;
    border: 1px solid #c0c0c0;
    border-radius: 0.125em;
    }
    
    #payment-fields label {
    width: 100%;
    max-width: 33%;
    margin-right: 0;
    }
    
    div#paypalcp-cc-name.paypalcp-cc-field.paypalcp-cc-name-field input {
    display: inline-block;
    width: 100%;
    height: 100%;
    max-width: none;
    border: 0 none;
    box-sizing: border-box;
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
    }
    I think the CVV field is a bit tooooooo big. And things need to be aligned a tad better.


    N54L3E.png
    Leslie Kirk
    Miva Certified Developer
    Miva Merchant Specialist since 1997
    Previously of Webs Your Way
    (aka Leslie Nord leslienord)

    Email me: [email protected]
    www.lesliekirk.com

    Follow me: Twitter | Facebook | FourSquare | Pinterest | Flickr

    Comment


      #3
      Hi Leslie,

      You are correct, the CSS does need to be modified to fit the look and feel of any non-Shadows based site or if the Shadows based site is highly customized.
      Matt Zimmermann
      Front-End Development Director / Miva, Inc.

      Comment


        #4
        Hey Leslie, I've added this to Colossus. Here's a copy of the css. It did take some tweaking.

        Code:
        #payment-fields .paypalcp-cc-name-field,
        #payment-fields .paypalcp-cc-number-field,
        #payment-fields .paypalcp-cc-exp-field,
        #payment-fields .paypalcp-cc-cvv-field {
        display: block;
        width: 100%;
        height: calc(3.5em - 2px);
        margin-bottom: 0.25em;
        padding: 0;
        position: relative;
        background-color: #fff;
        border: 1px solid #c0c0c0;
        border-radius: 0.125em;
        }
        
        #payment-fields label {
        width: 100%;
        max-width: 33%;
        margin-right: 0;
        }
        
        #payment-fields .paypalcp-cc-name-field input {
        display: inline-block;
        width: 100%;
        height: 100%;
        max-width: none;
        border: 0 none;
        box-sizing: border-box;
        -moz-appearance: none;
        -webkit-appearance: none;
        appearance: none;
        }
        .t-payment-form .c-form-input--cvv {
        max-width: none;
        }
        
        .t-payment-form .t-data-cvv {
        margin-left: 0.5rem;
        }
        Ron Frigon
        The Web Dude at J. Rousek Toy Co.

        Comment


          #5
          Thanks, Ron. I had already tried that first (it wasn't what I needed). I don't think my page has the ID payment-fields - I did discover it looks to have 3 that I've been working with.
          Leslie Kirk
          Miva Certified Developer
          Miva Merchant Specialist since 1997
          Previously of Webs Your Way
          (aka Leslie Nord leslienord)

          Email me: [email protected]
          www.lesliekirk.com

          Follow me: Twitter | Facebook | FourSquare | Pinterest | Flickr

          Comment


            #6
            Originally posted by Matt Zimmermann View Post
            Hi Leslie,

            You are correct, the CSS does need to be modified to fit the look and feel of any non-Shadows based site or if the Shadows based site is highly customized.
            Is there a demo site with the same look and feel for the OPAY screen that is shown here? https://docs.miva.com/paypal-commerc...-card-payments

            I'm stuck on converting a couple of the classes and still have the look & feel from the screenshot I included.

            Leslie Kirk
            Miva Certified Developer
            Miva Merchant Specialist since 1997
            Previously of Webs Your Way
            (aka Leslie Nord leslienord)

            Email me: [email protected]
            www.lesliekirk.com

            Follow me: Twitter | Facebook | FourSquare | Pinterest | Flickr

            Comment


              #7
              Hi Leslie,

              I do not have a demo site using Colossus with PayPal Commerce. Maybe someone in the community has a live site they can share here.
              Matt Zimmermann
              Front-End Development Director / Miva, Inc.

              Comment


                #8
                Originally posted by Matt Zimmermann View Post
                Hi Leslie,

                I do not have a demo site using Colossus with PayPal Commerce. Maybe someone in the community has a live site they can share here.
                Here's hoping someone does. Kinda sucks not being able to duplicate what is shown in the examples
                Leslie Kirk
                Miva Certified Developer
                Miva Merchant Specialist since 1997
                Previously of Webs Your Way
                (aka Leslie Nord leslienord)

                Email me: [email protected]
                www.lesliekirk.com

                Follow me: Twitter | Facebook | FourSquare | Pinterest | Flickr

                Comment


                  #9
                  So here's what I did. I set up a branch and installed Shadows 2.0, removed the demo categories, and worked with the OPAY screen. The CSS that installed with PayPal Commerce wasn't quite up to snuff. Here's what I used


                  Code:
                  #payment-fields .paypalcp-cc-exp-field,
                  #payment-fields .paypalcp-cc-cvv-field,
                  #payment-fields .paypalcp-cc-number-field,
                  #payment-fields .paypalcp-cc-name-field {
                  display: block;
                  width: 100%;
                  height: calc(3.5em - 2px);
                  margin-bottom: 0.25em;
                  padding: 0;
                  position: relative;
                  background-color: #fff;
                  border: 1px solid #c0c0c0;
                  border-radius: 0.125em;
                  }
                  
                  #payment-fields label {
                  width: 100%;
                  max-width: 33%;
                  margin-right: 0;
                  }
                  
                  #payment-fields .paypalcp-cc-name-field input {
                  display: inline-block;
                  width: 100%;
                  height: 100%;
                  max-width: none;
                  border: 0 none;
                  box-sizing: border-box;
                  -moz-appearance: none;
                  -webkit-appearance: none;
                  appearance: none;
                  }
                  Turns out what I used is almost identical to what Ron Frigon posted (I didn't notice that until I came back to post what I used). I don't know if it can be called a bug or not, but what is being added doesn't work. Thanks, Ron!
                  Leslie Kirk
                  Miva Certified Developer
                  Miva Merchant Specialist since 1997
                  Previously of Webs Your Way
                  (aka Leslie Nord leslienord)

                  Email me: [email protected]
                  www.lesliekirk.com

                  Follow me: Twitter | Facebook | FourSquare | Pinterest | Flickr

                  Comment


                    #10
                    I'm close, really close but the CVV info message doesn't work. I'm getting a drop-down message saying One or more fields are invalid.


                    cuMwaz.png

                    FWIW, the dev branch (Shadows 2.0) works as expected.

                    Attached Files
                    Leslie Kirk
                    Miva Certified Developer
                    Miva Merchant Specialist since 1997
                    Previously of Webs Your Way
                    (aka Leslie Nord leslienord)

                    Email me: [email protected]
                    www.lesliekirk.com

                    Follow me: Twitter | Facebook | FourSquare | Pinterest | Flickr

                    Comment


                      #11
                      Hi Leslie,

                      Make sure the button for the "What's This?" has the attribute type="button"
                      Matt Zimmermann
                      Front-End Development Director / Miva, Inc.

                      Comment


                        #12
                        Originally posted by Matt Zimmermann View Post
                        Hi Leslie,

                        Make sure the button for the "What's This?" has the attribute type="button"
                        Here's was the button code

                        Code:
                        <button class="c-button c-button--small c-button--clear u-bg-transparent x-messages--info" data-mini-modal data-mini-modal-type="inline" data-mini-modal-content="data-cvv" title="Card Security Code Information">What's This? <span class="u-icon-question"></span></button>
                        I updated it to this

                        Code:
                        <button class="c-button c-button--small c-button--clear u-bg-transparent x-messages--info" data-mini-modal data-mini-modal-type="inline" data-mini-modal-content="data-cvv" title="Card Security Code Information" type="button">What's This? <span class="u-icon-question"></span></button>

                        Now nothing happens...


                        Leslie Kirk
                        Miva Certified Developer
                        Miva Merchant Specialist since 1997
                        Previously of Webs Your Way
                        (aka Leslie Nord leslienord)

                        Email me: [email protected]
                        www.lesliekirk.com

                        Follow me: Twitter | Facebook | FourSquare | Pinterest | Flickr

                        Comment


                          #13
                          Hi Leslie,

                          This may be related to a similar issue that was discovered in Shadows [https://github.com/mivaecommerce/rea...dows/issues/73]. Try updating your OPAY Page Template with the following [https://gist.github.com/influxweb/73...8c08a530bcf46e] and make the CSS adjustment mentioned in the Shadows link.
                          Matt Zimmermann
                          Front-End Development Director / Miva, Inc.

                          Comment


                            #14
                            Originally posted by Matt Zimmermann View Post
                            Hi Leslie,

                            This may be related to a similar issue that was discovered in Shadows [https://github.com/mivaecommerce/rea...dows/issues/73]. Try updating your OPAY Page Template with the following [https://gist.github.com/influxweb/73...8c08a530bcf46e] and make the CSS adjustment mentioned in the Shadows link.
                            Thanks - that fixed the popup but wiped out all my CSS tweaks.

                            Leslie Kirk
                            Miva Certified Developer
                            Miva Merchant Specialist since 1997
                            Previously of Webs Your Way
                            (aka Leslie Nord leslienord)

                            Email me: [email protected]
                            www.lesliekirk.com

                            Follow me: Twitter | Facebook | FourSquare | Pinterest | Flickr

                            Comment


                              #15
                              Matt Zimmermann I had to tweak the <ul> for the CSS that both Ron & I have had to use.


                              Code:
                              <mvt:else>
                              <ul id="payment-fields" class="c-form-list o-layout u-grids-1 u-text-bold u-text-uppercase t-payment-form t-&mvt:global:payment_module_class;">
                              <mvt:foreach array="payment:fields" iterator="field">
                              Leslie Kirk
                              Miva Certified Developer
                              Miva Merchant Specialist since 1997
                              Previously of Webs Your Way
                              (aka Leslie Nord leslienord)

                              Email me: [email protected]
                              www.lesliekirk.com

                              Follow me: Twitter | Facebook | FourSquare | Pinterest | Flickr

                              Comment

                              Working...
                              X