Customizing Modal Close Position

Jason Bostick asked how he could customize the position of a modal close button. I wanted to post the solution here to show that I mean it when I say that I will support Foundry users. Here is a link to his original post.

The challenge with doing this is the number of the !important statement used in the modal stack styles. The following CSS should work.

button.btn-close {
    top:24px!important;
    right:24px!important;
    width:2rem;
    height:2rem;
    background-size: 2rem;
}
button.btn-close:hover {
    background-color:transparent!important;
}

You will need to adjust the position and sizing options to your liking. I also thought that the hover styles on the button were not the best, so I fixed that too.

2
1 reply