How to style the UI settings buttons - Twine Sugarcube

[rinari]

Twine Version: 2.3.14
Story Format: Sugarcube 2.34.1

Hi everybody, I’ve got what seems like a fairly simple question (I’m a complete novice so hopefully this isn’t just a glaringly obvious answer). I’ve figured out how to change visual “themes” in my CSS stylesheet and JS, but I’m finding that the actual settings buttons in the Sugarcube settings API menu don’t change styles, as well.

Here’s what the settings menu looks like as the default:

Summary

(Sorry, new users can only upload one media image per post, so here’s an imgur link)

And here’s what it looks like when the visual theme is changed in the settings:

Summary

As you can see, the dropdown buttons keep the same font color as the default theme (and same background color when hovered over), rendering them unreadable in the new theme. Does anybody know how I can fix this?

As a bonus question: does anyone know how I can make the dropdown buttons in the settings menu all the same size as each other?

Thank you for your help and time!

[HiEv]

The trick to figuring these things out is learning how to use your browser’s Developer Tools window.

Simply pull up the thing that you want to style in your browser, then right-click on it, select “Inspect element” (or your browser’s equivalent), and (if necessary) go to the “Elements” tab. Also, if the Developer Tools window is on the side of the screen, you can move it to the bottom by clicking the “…” button in the upper-right of the window and then change the dock side to the bottom.

Now that you have the Developer Tools window open, you can select elements under the “Elements” tab, and then see and modify the CSS on that element under the “Styles” tab on the right. You can play around with the styling there until you get things looking the way you want, and once you’ve done that, just copy your changes to your game’s Stylesheet section. (If you’re using Firefox, it even helpfully marks any styling you’ve changed with a green line to the left of those CSS changes in the Styles section.)

Also, in the Elements window, you can see the element type (e.g. div for <div> elements) and whether they have an ID (which you’d represent starting with a # in CSS; e.g. <div id="xyz"> could be referred to using #xyz) or any classes (which you’d represent by starting it with a . in CSS; e.g. <div class="xyz"> would be represented as .xyz.) If you need help targeting specific elements with your CSS changes, see the MDN page on CSS Selectors (I’d recommend bookmarking that).

Anyways, you should be able to use that so that you can identify and style those dropdown lists in your Stylesheet section, or modify the look of any other web elements in your game.

Hope that helps!

[TheMadExile]

Also. You may want to download the Bleached stylesheet from SugarCube’s website. It’s a primarily white style that you can use as a reference.

[rinari]

Thank you so much for your help @HiEv , I’m such a newbie that I didn’t even know about the inspect elements tool! I’ve progressed way faster since you told me about it I truly appreciate your help!