Sugarcube 2 Left menu button behavior

Hi everyone. I’d like to know if there’s any way to stop the left menu buttons from dissapearing when you click them and reappearing when you click the other ones. I just want them to stay put, like in sugarcube 1.

Do you mean the Save and Restart buttons go away or are you referring to buttons that you’ve defined?

They don’t (currently) disappear when I use them, including ones that I’ve defined. However, the entire story window is made very dim while showing the popup window that a button has invoked.

I’m guessing that perhaps buttons seem to disappear for you because you’ve changed the colors that are used to draw them, maybe by accident in “body” CSS declarations. I haven’t made any changes to the left column UI other than adding things to it, so I don’t think buttons disappear by default. At one time I did have some body color declarations which caused problems for seeing stuff in the UI column. The problems were fixed when I switched to using “passage” declarations instead.

1 Like

As selden said, the buttons shouldn’t disappear unless you’ve modified the CSS in your stylesheet to make them do that.

Try starting a new project, then check the buttons and you should see that they remain just fine.

You probably just need to fix the :hover, :focus, and/or :active versions of your CSS for the buttons to resolve the problem. If you right-click on one of those buttons in your browser, choose “Inspect element”, and then do a “Force state” on a button element to activate the above states, then you should be able to see how to fix the problem.

Hope that helps! :slight_smile:

1 Like

Ok, I see what happened.
My story menu has some “click” elements, and those are fine still, but I made it so when you click any of them, they are replaced by a plain text version of themselves. This is what Sugarcube 2 won’t display. I tried to add some random plain text and it won’t show either in the StoryMenu when you play the game.

Just checked, using “print” with plain text won’t work either.

Assuming you’re using the StoryMenu special passage, its documentation clearly notes that it only displays links, plain text will not work.

The easiest workarounds are probably: (not an exhaustive list)

  • Switch to using the StoryCaption special passage instead. They won’t have the same styling, by default (though that can be changed), but otherwise they will work as you intend.
  • Disable the links, via <jQuery>.ariaDisabled(), rather than replacing them with plain text.

Awesome! That’s what I wanted to do anyway: experiment with the left bar CSS. Thank you!

Is there a way of making the menu section wider / narrower? I have some text that is a bit too long and causes the text to go onto two lines and would prefer it to be only one line.

Thanks ME.

If you’re not answering the original poster’s question, you should create a new thread to ask your own question, rather than hijacking someone else’s thread.

Anyways, if by “the menu section” you mean the UI bar, then yes, you just have to change the CSS for it.

If you open your Twine HTML file in your browser, right-click on the UI bar, and choose “Inspect element”, then it should show you the element and style inspection windows. If you click on the “ui-bar” <div> element, then you should be able to see the CSS for the UI bar in the style window. Play around with the settings there until you get things to look the way you want, and then copy those changes to your game’s Stylesheet section.

For example, if you just change the width of the UI bar to 300 pixels, then in your Stylesheet you’d add:

#ui-bar {
	width: 300px;

You can use that method to figure out how to style anything on the page.

Hope that helps! :slight_smile:

1 Like