Announcement

Collapse
No announcement yet.

PayPal Commerce CSS for Colossus

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

    #16
    Oops there's more...once I get it all in place I can send it to you.

    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


      #17
      Thanks, Ron for posting your CSS.

      The interesting question here is for the correct location of the styles; in a styles tag on OPAY? This doesn't seem to work for me. The Paypal Commerce has the Style Tab. I noticed you need to add the CSS as JSON name-value format? Where did you add this CSS?

      Originally posted by Ron Frigon View Post
      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;
      }
      FWIW: I've defined some simple CSS in the Styles Tab and these don't appear to be recognized on the page.

      Scott
      Last edited by ids; 07-20-21, 04:08 PM.
      What help do you need today!
      Interactive Design Solutions http://www.southbound.com
      MivaMerchant Business Partner | Certified MivaMerchant Web Developer
      My T-shirt Collection is mostly MivaCon T-shirts!!
      Competitive Rates, Popular Modules, and Integrations:
      Product Copy | AutoBaskets | Waitlist Integration| Wholesale Integration

      Comment


        #18
        Hey Scott!

        It looks like this was added to CSS/JavaScript Resources > paypalcp - Inline CSS. The site is https://www.magicknature.com/ if you want to add something to your cart and check out OPAY.

        It looks like I added the form id to this myself looking at my template version history. I must have had a hard time targeting the css rules.

        On OPAY find the opay-form and add the id to it.

        Code:
        <mvt:item name="readytheme" param="contentsection( 'checkout_steps' )" />
        <mvt:item name="readytheme" param="contentsection( 'messages' )" />
        <form data-hook="opay-form" method="post" action="&mvt:payment:url;" id="payment-fields">
        Cheers!
        Last edited by Ron Frigon; 07-20-21, 04:54 PM. Reason: Found more info
        Ron Frigon
        The Web Dude at J. Rousek Toy Co.

        Comment


          #19
          Thanks, Ron. Explains why I can apply a style in the dev tools but what should be the correct target doesn't actually reach into the bowels of this. I'll give it a try and see what I can do.

          Scott

          UPDATE: assigning the ID to the form seemed to do the trick. Thanks again, Ron.
          Last edited by ids; 07-22-21, 09:28 AM.
          What help do you need today!
          Interactive Design Solutions http://www.southbound.com
          MivaMerchant Business Partner | Certified MivaMerchant Web Developer
          My T-shirt Collection is mostly MivaCon T-shirts!!
          Competitive Rates, Popular Modules, and Integrations:
          Product Copy | AutoBaskets | Waitlist Integration| Wholesale Integration

          Comment

          Working...
          X