Button design issues

Twine Version: 2.3.9
Story Format: Sugarcube 2.31.1

Hello helpful people,

I am trying to format the buttons for my story with a main style and a few variant button styles. So far I am working with this, where devb is the secondary buttons style that is called with span. As it is right now, it only changes the text size (I presume the passage button overrides everything else). I can get them to look the way I want if I drop the #passage parts but then the hover formatting does not work. I feel like I am missing something simple here.

#passages button {
	color: 	black ;
	background-color: white;
	border: 1px solid #ffffff;
	padding: 0.4em;
	border-width: 2px;
	border-radius: 5px;
	border-color: black;

#passages button:hover {
	color: 	dimgray;
        background-color: whitesmoke;

.devb button {
    color: 	White ;
    background-color: black;
    border-width: 1px;
    font-size: 75%;
    padding: 0.1em;

Well, the main problem you’re having has to do with how CSS works.

The “C” in “CSS” stands for “cascading”, which refers to how the stylesheet rules used “cascade” down, in a “least specific” to “most specific” order, with the last style in that order being the one that’s actually used. When there’s a tie with two things being equally specific, then the last one specified is the one that’s used.

IDs, like #passages, are more specific than classes, like .devb, because IDs are supposed to be unique on a page, while you can have multiple instances of the same class on a page. Thus the CSS for #passages button is preferred over the less specific .devb button CSS.

If you want that last chunk of CSS to work, then you’d need to make it more specific than the #passages button chunk. The simplest way to do that would be to do this:

#passages .devb button {
    color: white;
    background-color: black;
    border-width: 1px;
    font-size: 75%;
    padding: 0.1em;

That will work, because #passages .devb button is more specific than #passages button.

One thing which can help when trying to work these kinds of things out is using the “Developer Tools” window in your browser to play around with the CSS there until it works. (You can hit F12 or CTRL+SHIFT+i in most browsers to open that up, or right-click on an element on the page and choose “Inspect Element”.) Most times the “Developer Tools” window will open up to an “Elements” section, where the HTML can be explored, a “Console” section, where errors will be displayed and commands can be entered, and a “Styles” section, where you can see and play around with the CSS on the element currently selected in the “Elements” section.

For example in the “Styles” section you can compare your version to my version in the image below:

(Note: I also added border-color: white, just so that I could see the button better when testing.)

As you can see on the left in the above image, the .devb button CSS is mostly overridden by #passages button in your version (CSS with strikethrough text is overridden). Looking at the right side, you can see that by changing .devb button to #passages .devb button it makes it so that that CSS overrides #passages button CSS.

So, by using the “Developer Tools” window in your browser, you could’ve seen what was happening and figured out why the CSS in your Stylesheet section wasn’t working. It’s a handy tool.

Additionally, you can create and edit styles in the “Styles” section to make things look the way that you want. Once it all looks good, then all you need to do is copy those changes to your game’s Stylesheet section and then your game will look that way. I use that all the time when styling stuff.

Hope that helps! :grinning:


Thanks for the code and the explanation. I never really thought what the cascading part of CSS actually meant before and not it makes sense. Likewise, I’ve seen the styles section for the dev tools and had no idea what I was looking at. This will be a big help going foward.