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.
Announcement
Collapse
No announcement yet.
PayPal Commerce CSS for Colossus
Collapse
X
-
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; }
Leave a comment:
-
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.
Leave a comment:
-
Originally posted by lesliekirk View PostIt'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?
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; }
N54L3E.png
Leave a comment:
-
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?
Tags: None
Leave a comment: