|
Pedro Ordenes
|
June 2, 2016 at 1:06 pm
Hello! Our payment page, seen here, isn’t responding to any CSS changes. It’s so stretched out with large padding and margins, and for some reason the “Promotion code” header is buried behind the input field. Since we only take one method of payment, we don’t need an entire radio button section for it, nor the important information section – we really just need the Pay now button, which is tiny and is affecting our abandonment rate.
I’d love to make a bunch of CSS changes here, but while they show in inspect element, none of them appear when in our stylesheet, including with the !important marker. Is there anything that can be done in CSS on this page? Thanks!
|
|
Lorenzo Orlando Caum
|
June 2, 2016 at 1:30 pm
Hello,
That is the registration checkout page so your changes should apply there.
Could you share an example of the CSS that you are using?
You could share in a gist (https://gist.github.com/) or post it here.
—
Lorenzo
|
|
Pedro Ordenes
|
June 2, 2016 at 1:48 pm
Sure. Here’s some of the code that showed in inspect element but not when put in the CSS. I also tried replacing # with . and vice versa to no effect. Thanks!
.ee-stripe-button-btn {
padding: 10px!important;
background-color: #0099ff!important;
color: #fff!important;
font-size: 18px!important;
}
#ee-spco-payment_options-reg-step-form-payment-options-before-payment-options {
padding-bottom: 0px;
margin-bottom: 0px;
}
#method-of-payment-hdr {
margin: 1.5em 0 .5em;
margin-bottom: 0px;
}
|
|
Lorenzo Orlando Caum
|
June 3, 2016 at 4:47 am
Hello,
The names of your CSS elements are correct. However, when I inspect the page, I’m not seeing those new styles. I thought I may have overlooked one or more but I checked several of them.
How are they being added to your site? Is this through a custom CSS area or through a plugin that introduces that feature like Simple Custom CSS?
If they were removed, then could you please restore them and reply here?
Thanks
—
Lorenzo
|
|
Pedro Ordenes
|
June 3, 2016 at 4:57 am
Our theme has a custom CSS input page. We are affecting other parts of EE and our website in general with it, but it seems to not work with this one page. The new styles have not been removed and are still active, despite not feeding through to the other end. I have also tried the Simple CSS plugin but they’re still not showing.
|
|
Pedro Ordenes
|
June 3, 2016 at 4:59 am
Wait! Some of them are working from Simple CSS when I change . to #. Hold on, let me explore this for a second.
|
|
Pedro Ordenes
|
June 3, 2016 at 5:25 am
Okay! With some slight changes, it worked. Thanks so much!
|
|
Tony
|
June 3, 2016 at 5:26 am
Hi Lauren,
I ran a test registration and can see your styles are being applied, so I guess you’ve figured this out 🙂
Just to note for future reference, there is a differece between the . and # selector and it will only work if you use the correct one.
# is for the ID of an element.
. is for the class of the element.
So to target the Stripe payment button you used .ee-stripe-button-btn
But if you take a look here – http://take.ms/Kk3CX
You can see that it has an ID of ee-stripe-button-btn, so that needs to be:
#ee-stripe-button-btn
The same applies for any element within CSS, you’ll need to make sure you use the correct selector for each element 🙂
|
