Short Code CSS and Payment Table Help Pls!

[Seneca]

Hey,

I’m trying to connect my Simple Pay Lite Stripe payment button to my Pricing Table in X Theme, but have no idea how to…

Simply Pay Lite generated this payment for short code for me: [simpay id=“6”].

I want it to have the same design/look as the button that comes with the theme, but with all the background magic from the Simple Pay button. I think this is a CSS issue, but I’m not sure if it is or how to change it…

Here’s an image of the two:

Would super grateful for any help!

[basanta]

Hi There,

Thanks for writing in!

Can you please send us your page URL where you have added the pricing table with button, so that we can suggest you the CSS.

Thanks

[Seneca]

Hey Basanta

Address sent in secure note. I’ve got the X Theme style version (the bottom one in my diagram) showing now, please let me know if you want me to change to the other version.

Thanks in advance!

[mldarshana]

Hi There,

Upon testing, it seems that you already have the referenced button.

Could you please try clearing your browser cache and test it again.

Thanks!

[Seneca]

Hey,

No it’s not, that’s the version that I want it to look like!

If you check the link again, you’ll see what it really is.

Thanks bud

[Seneca]

Also, while you’re there could you please help me understand why the accordion at the bottom of the page (under FAQs) never shows up until you click on the empty space?

Thanks!

[thai]

Hi There,

To style the button, please add this custom CSS under X > Theme Options > CSS:

button.simpay-payment-btn {
    background: #33bbff;
    border: none;
    padding: 12px 10px;
    border-radius: 4px;
}
button.simpay-payment-btn span {
    color: #fff;
}

The accordion at the bottom is working fine on my end.

Could you please send us with a video how it looks on your end?

Thanks.

[Seneca]

Thai you’re a legend - thanks dude!

Quick question, is there a way you could add some code for me that’d let me tweak the writing size as well?

And here’s a video of the accordion issue: https://www.screencast.com/t/w4c1KwLpMj1

Thanks again

[rad]

Hi there,

You mean the font size? You can’t add font-size styling to existing CSS like above.

About the accordion, please deactivate the column fade in animation where the accordion is. The issue happens because it’s almost in the footer where scrolling reaches its max and fade won’t trigger right away.

Thanks!

[Seneca]

Yeah I meant font size, sorry. So there’s no way around that at all?

And thanks, that fixed the accordion issue (y)

[ruenel]

Hey There,

If you want to change the font size, you can update the code and use something like this:

button.simpay-payment-btn {
    background: #33bbff;
    border: none;
    padding: 12px 10px;
    border-radius: 4px;
}
button.simpay-payment-btn span {
    color: #fff;
   font-size: 20px;
}

Feel free to adjust the font size.

[Seneca]

Awesome, it worked! Thanks

[rad]

You’re most welcome!