Customize the border of your Softr Modal / Popup

Custom Coding
, ,
1

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:

<style>
.sw-modal-container.sw-modal-size-md {
  border-radius: 10px;
  border: 2px solid #0000FF;
}
</style>

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

5 Likes
2

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

3

By creating a hardcoded popup modal I guess.

Or use a modal/popup from shoelace.style. 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
4

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”.

5

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

6

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

7

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

8

Correct yes!

9

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

10

Most are M some are L :slight_smile:

11

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

1 Like
12

Superstar! Thank you :slight_smile:

13

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

14

I agree :joy:

1 Like
15

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

16

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

17

  • 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

18

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: https://test-play.softr.app/

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
19

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
20

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

image
image946×584 21.4 KB