Formatting pop-ups in Twine Sugarcube

Authoring Twine
1

If you are requesting technical assistance with Twine, please specify:
Twine Version: 2.3.9
Story Format: 2.31.1

Hi…it’s me again :slight_smile:

I was wondering how much leeway I have to change the format/design of the pop-ups. First, I have two sets of code and I’m not sure which to use:

#ui-dialog-body.popmen {
  color: #e5b48f;
 }

.popmen {
  background-image: url("https://i.imgur.com/T9AS5uM.png");
  color: FFFFFF;
  size: 10px Times;
  background-color:#ebe7e0; 
}

.popmen a {
 color: #e5b48f;
}

One of my pop-ups looks like this:

Screen Shot 2021-09-24 at 6.00.08 PM
Screen Shot 2021-09-24 at 6.00.08 PM1660×1006 67.2 KB

There’s a few problems - it’s waaaay too big. I really want to get rid of the surrounding black border and reformat the ‘STICKERS COLLECTED’ to make it much less bulky. And I would love to add rounded corners. I’m also just trying to see what all I can change to experiment with as I’d like to really overhaul the whole thing, but I’m not sure how to do more than change the font color and even that sometimes gets wonky.

Any help is much appreciated - thank you!

2

1. Font size. For the header font size try adding:

#ui-dialog-titlebar {font-size:10pt}

2. Rounded borders. For rounded borders you will need to add :

#ui-dialog-body {border-radius: 0px 0px 5px 5px;}
#ui-dialog-titlebar {border-radius: 5px 5px 0px 0px }

You will probably want to adjust the numbers.

3. Color change. The black border around the pumpkin is actually the background for the dialog box so you can use this to set both it and the dialog bar to the same color:

#ui-dialog-titlebar, #ui-dialog-body {background-color: #444; border-color: transparent}

Replace #444 with a color of your choice if you don’t want grey. This can be a hex code or a color name, just like you would use in your font color.

Also, you’re missing a hash symbol in your original CSS… FFFFFF should have an # symbol in front of it.

3

This is awesome, thank you very much!! I found some other code to play with as well and changed the look.

Is there a way to change the ‘OK’ button in the pop-up? It’s bright blue and doesn’t really fit with the rest of the menu:

Screen Shot 2021-09-24 at 9.48.17 PM
Screen Shot 2021-09-24 at 9.48.17 PM902×354 43.7 KB

4

If you have something you want to change the styling for onscreen in your browser, just right-click on it, choose “Inspect” (or whatever your browser calls that option), and that will open up the browser’s Developer Tools window (you may need to click the “…” button there and choose to switch the “Dock side” to the bottom of the screen to get a better view of that window).

From the Developer Tools window you can use the “Elements” and “Styles” sections to see the HTML and CSS styles, respectively. With that, you can find the HTML elements, their IDs and classes, and how they’re currently styled. You can mess around with the styling there until you get things to look the way that you want, and then simply copy those changes to your game’s Stylesheet section to implement those changes. (I’d recommend doing this in Firefox, since it helpfully marks any CSS changes you make with a green line for you, so you don’t have to remember which things you’ve changed/added.)

Have fun! :slight_smile:

5

Very cool, thank you!!