Custom CSS issues in list block.. A simple button

Ask the community
, ,
1

Hi any help would be appreciated! I have an external checkout that opens as a popup for each of my list items. It is the blue “select gift” text in screenshot. The popup works fine but I am unable to style the button no matter what I try! Please help… don’t want to lose this function just because I can’t style a button…

I have added the code below as well for the popup. The href code is held in airtable as I need a different popup per list item. I am using the embed element to get it onto the list block.

Thanks for any help! Hoping to get it looking like a regular softr button.

Screenshot 2023-02-10 082217
Screenshot 2023-02-10 082217817×835 260 KB

Instructions I am using to add popup to my custom website

  • Add the Checkout Page script to the header of your site
  • Add the link code to your site
  • Optionally, style the link with CSS

Script code

Link code to open popup
Buy now

2

Hi,
What is the link to the page where the list details is? This is this url we need to apply css to the button

3

Thanks for your reply :slight_smile:

https://dashtest873.preview.softr.app/list-copy?

I have tried adding code in the custom code box for this page with no effect

4

Can you try to add the following code in the custom code HEADER of the page?
All color are referenced with HEX color code to be more precise. I added the corresponding color next to the hex color code. Border radius is the roundness of the button border.
(This is for the select gift button)

Note that to customize the open drawer button that I see is explained in shoelace.style (this is where it comes from if I’m right?)

<style>
.cp-button {
  background-color: #00FF00; /* green */
  color: #FFFFFF; /* white */
  padding: 10px 20px;
  border-radius: 5px;
  border: 2px solid #000000; /* black, 2px, solid */
  cursor: pointer;
  font-size: 16px;
}

.cp-button:hover {
  background-color: #FFFFFF; /* white */
  color: #000000; /* black */
}
</style>
5

Can you show the code provided by checkoutpage.co to perform this “open modal”?
This could be launched by a softr button, adding javascript with a onclick event