Customize the border of your Softr Modal / Popup

Now that all buttons support “open modal”, it’s time to customize it a little :wink:

In your custom code header, on the page where the button leading to a modal is, insert this:

.sw-modal-container.sw-modal-size-md {
  border-radius: 10px;
  border: 2px solid #0000FF;

You will be able to customize the border thickness, the border color and the corner radius.
I don’t think there should be more to customize but feel free if you want me to add something

Also note that a code line will change accordingly to the size of the popup you want to open.
If S size => .sw-modal-container.sw-modal-size-sm {
If M size => .sw-modal-container.sw-modal-size-md {
If L size => .sw-modal-container.sw-modal-size-lg {
If XL size => .sw-modal-container.sw-modal-size-xl {

PS: this is also a feature request for a no-code solution @artur


btw, any idea how to launch a modal with a custom button ? :slight_smile:

By creating a hardcoded popup modal I guess.

Or use a modal/popup from Opening a modal “made in softr” from a custom button wouldn’t be possible. At least I have 0 idea on how to do it.

That being said I advise not using custom buttons, specifically if they have to open a modal. As now this is something Softr can do, this would be a work overload.

1 Like

Is there a way to make this work on list buttons? It seems like it does not amend if I have a button in a list or if there is multiple buttons:)

For example on “List with horizontal cards”.

It is not supposed to be related to buttons at all, it’s just the modal style. The modal coming out of a list with horizontal cards may be different, I have to check

I implemented this the places it worked, looks amazing:)

But you confirm it doesn’t work when clicking a button on a list with horizontal cards (to open a modal, of course)?

Correct yes!

What is the size of the modal you want to open? S ? M ? L ?

Most are M some are L :slight_smile:

You will need to change this line of code (I updated the post)

1 Like

Superstar! Thank you :slight_smile:

This made a huge UI difference. Amazing how such a small detail can make something 10x more pretty.

I agree :joy:

1 Like

Doesn’t work for me. The style remains the same. FYI my modal opens from a click on a list item.

It works in this case too, I need more details to debug (what code, what list, where is the code ,screenshots)

  • list: “List with horizontal cards and visible button”

  • code: exactly what you mentioned above

  • where is the code: in the custom header of the page the list is on.

  • screenshot: I’m not gonna put a screenshot here, the modal is just unchanged.

  • item on click: open modal

  • page to open: a standard softr page with a little more info about that item.

  • size: L

  • No error in the console

So it should work :man_shrugging:, because it does. Erik has the same list, it works. I did tests with item on click, it works.

Did you check this Customize the border of your Softr Modal / Popup - #11 by matthieu_chateau

An example here:

There must be an error on your side, it perfectly works. Maybe your block needs an update or there is a little error in the code that you can’t see or I don’t know, but nothing to do on my side, I’m sure of this

1 Like

Yes, it works fine, I didn’t see that you actually needed to change that line of code depending on your modal size.

Thanks Matthieu!

1 Like

I just watched the tetris movie on apple TV, and this is glorious :laughing: love the easter egg