How to change ui bar buttons text color

Authoring Twine
,
1

Twine Version: 2.5.1, web version
Story Format: Sugarcube 2.36.1

Hello! I am currently making something and I’ve changed the UI bar background color into a light yellow.

The problem is, even though I’ve changed the default text color, the UI bar buttons’ text is still white. I really want to make it so that the button text color is visible. Is there any way I can do that? Thank you!

2

I assume you’ve changed the background color of your button through the style sheet. If so, you can change the color of the text with using a new instruction line:

color : black;
1 Like
3

If you use your web-browser’s Web Developer Tools to inspect the HTML elements that make up the Menu buttons (like Save and Restart) you will see something like the following…

<ul id="menu-core">
	<li id="menu-item-saves">
		<a tabindex="0" role="button">Saves</a>
	</li>
	<li id="menu-item-restart">
		<a tabindex="0" role="button">Restart</a>
	</li>
</ul>

…and if you select one of the <a> elements you are inspecting you will discover the following CSS rule is used to style it…

#menu li a {
    display: block;
    padding: 0.25em 0.75em;
    border: 1px solid transparent;
    color: #eee;
    text-transform: uppercase;
}

You can use the same CSS Selector in your project’s Story Stylesheet area to alter the text color of those buttons, like so…

#menu li a {
    color: black;
}
1 Like
4

Thank you so much! It worked!