(SugarCube 2.30.0) Styling the Dialog close button

Authoring Twine
#1

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:

image
image1079×316 14.3 KB

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!

#2

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.

#3

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

#4

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

#5

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

1 Like