(SugarCube 2.30.0) Styling the Dialog close button

Please specify version and format if asking for help, or apply optional tags above:
Twine Version: Twine 2.3.5
Story Format: SugarCube 2.30.0

I’m fairly new to Javascript and CSS, so I’m sorry if this is a simple question that I’m just overcomplicating, but basically I’m looking to style the close button of the Dialog box specifically. I currently have my the buttons in my story styled to have a box shadow, but it also affects the “close” button of my Dialog boxes and makes it stick out from the title bar:

I’ve looked around a fair bit and found similar questions regarding Dialog box styling, but I couldn’t find an answer addressing the close button specifically. I’ve also been through the SugarCube documentation but couldn’t find any info regarding it. The closest I found was the Dialog widget API (https://api.jqueryui.com/dialog/) which states that I should be looking at the ui-dialog-titlebar-close class, so I tried adding this to my Stylesheet, but it didn’t work:

#ui-dialog-titlebar-close { box-shadow: none; }

My styling for buttons currently looks like this:

button {
color: black;
background-color: #614d6f;
border: none;
margin-bottom: 5px;
padding: 10px;
border-radius: 2px 2px 2px 2px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);

Basically, I want all other buttons in the story to look like that except for the “close” button on Dialog boxes. Is it possible to change just the Dialog close button/override my button style somehow? Or is there something wrong with how I’m styling my Story buttons to begin with? Any help would be sincerely appreciated!

TIP: Using your browser’s inspector is usually the fastest way to get answers to questions like this.

You’re looking for the #ui-dialog-close selector.

Also. While SugarCube does include jQuery, it does not include or use any of jQuery UI.

That worked, thank you so much! Definitely going to keep that tip in mind.

Can you teach me how to make a dialog box with a title, a long text and a close buttonm please?

Take a look at the SugarCube Dialog API, especially the examples given in the Dialog.setup() section.

1 Like