PayPal Commerce CSS for Colossus

[lesliekirk]

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

[ids]

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?

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

#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

[Ron Frigon]

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.

<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!

[ids]

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.

[lesliekirk]

I've got another one that is screwed up. This time updating the CSS did nothing. Adding the id="payment-fields" didn't help. Argh!!!