Can I modify Modal close button/X in Uikit 2

I have a site created with Uikit 2 in which there are full page modals. I would like to modify and enlarge the close button/X, it is currently a tiny bold x (see screenshot). I am using only the Modal stack which come with Uikit 2 addons.

I would prefer a larger and finer X. Perhaps there is some CSS for this?

Can you select not to have a standard close button, or colour it thr same as thr background, then replace it with a regular button in a position stack?

In UIkit version 2 these icons are all font-awesome, which means you can change the font-size. The rule for that would be: .uk-close:after { font-size: 30px }.

Part from that, if you want to get more flexible in regarding the icons, you can still use the uk-modal-close class to close your Modal. So it’s just a matter of finding a button that can take an image, any image, and add this class to it to close the Modal.

Thank you Steve for responding to my question. An interesting workaround but it would involve alot of work with over 130 modals. I will opt for Lucas’s solution which, I think, simply involves adding some css code.

Thank you Lucas, changing the font-size in the CSS worked. The miniscule bold X is now a larger bold X. I will have to be content with that. With regard to giving the close button a new class - I am sorry to admit that my skill level doesn’t go so far as adding a class. I wouldn’t know where to find the code or where to place it in Rapidweaver. But thank you anyway, perhaps one day I will teach myself how to do this.

Adding classes using the dialog box is not that hard, see the screenshot below:


This will work with many stacks. You can also use BWD’s Button Plus and add the same class to the custom class field, it will also work as expected and close the modal.

1 Like

Lucas, That’s a great help.
Many thanks!