Twine Version: Sugarcube
I want to make a linear story with images and music, and it’s working out alright so far, but the sidebar doesn’t look very good at the moment, but I also don’t want to get rid of it completely because it has the forward and back buttons and ability to save and load your place and I’d like to keep those. So how do I go about changing the colour and fonts and thst sort of stuff? I’m having trouble finding guides about it.
I don’t know how familiar with CSS you are and how much custom CSS you’re using, but if you’re pretty comfortable with it, the default CSS for the sidebar is here, and it’s commented to give a general idea of what’s what, so that should be enough to get you started figuring out what classes you need to address in your custom CSS to get the sidebar looking the way you want it.
The generally answer to a “how do I go about changing the colour and fonts…” type question is, using CSS within the Story Stylesheet area of your project. But before you can do that you need to know what HTML element(s) to target, and what identifiers that/those element(s) has/have.
There are two methods you can use to learn the HTML elements that make up the different areas of the page:
Once you’ve done that you will learn:
a: that the parent HTML element of the entire side-bar has an ID of ui-bar
b: that that area of the page uses the same default font-family as the rest of the page, which is set on the html element using CSS like the following…
html {
font-family: Helmet, Freesans, sans-serif;
}
c. that the default foreground colour of the sidebar’s toggle button is set using CSS like the following…
#ui-bar-history [id|=history], #ui-bar-toggle {
color: #eee;
}
d. that the default foreground colour of the menu items is set using CSS like the following…
#menu li a {
color: #eee;
}
So if you wanted to change the font-family, background colour and foreground colour of just the sidebar you could use CSS rules like…
#ui-bar {
background-color: brown;
color: black;
font-family: monospace;
}
#ui-bar-history [id|=history], #ui-bar-toggle {
color: black;
}
#menu li a {
color: black;
}
I’ve been using the stylesheet to change the background colour and text for the pages, but the guide I was using only had code on how to get rid of the sidebar.
I think I might try to find out if there’s anything else I can change by viewing the page source, such as the save menu, and the borders that appear around the buttons on the sidebar.
The bits of the default CSS you want to edit to change the look of the buttons on the sidebar are #ui-bar-history [id|="history"] and #menu li a, if that helps.
Also, if you weren’t already aware, you can also customize the content of the sidebar - see SugarCube - Twine Cookbook
Does anyone know if it’s possible to change the colours of the buttons in the save menu? The blue is clashing with the rest of the page.
It is possible! It depends if you want to only change the colour of one button or all buttons.
button will target all buttons in the game
#ui-dialog-body button will target all buttons in any dialog box (like the Save Menu, but not exclusively only that one)
button.save will only target the buttons in the Save Menu that says save on them.
You can find which element to target by using the Inspect Tool of your browser (click right on a page, then Inspect page or Inspect tool on that menu).
The issue I’m having with the sidebar is a bit more esoteric.
I’ve added buttons to the StoryMenu passage to show the player a table of all the different endings they’ve found so far, with the unknown ones replaced with question marks. (My game has, like, 36 different endings and you get achievements for finding them all, so it’s useful to keep track of them!)
All well and good, I’ve made some nice little widgets to display this information nicely. My problem is this:
If I go to the Achievements screen, then to the Endings list, then the Bonus list, all from the Story menu, those passages get registered in the game’s history. Hitting ‘back’ first takes me to ‘Endings’, then to ‘Achievements’, and only then back to where I was. In fact, if you hit one button several times, each click adds another instance to the history so that you have to go back through numerous identical screens.
What I’d like, is some way to tell SugarCube NOT to register those menu screens in the history, so going ‘back’ will always take you back to the last STORY passage encountered, ignoring any MENU passages in between.
You can’t really remove states from the history. Or tell the system not to register it.
But: I got something to help 
Plop this into your JavaScript:
$(document).on(':passagestart', function (ev) {
if (!ev.passage.tags.includes('noreturn')) {
State.variables.return = ev.passage.title;
}
});
Tag the non story passages with [noreturn]
Then either use:
<<back [[Return to Story|$return]]>>
<<return [[Return to Story|$return]]>>
Back and Return have different functionality when moving through the story, one might fit your needs better.
Note: you need to remove the newly automatically created passage $return on Twine. Otherwise you get an error.
Using <<link "Return to Story" $return>><</link>> also works.
OR you transform those passages as Dialog Boxes (like a popup).
@manonamora that might work I guess, if I can work out how to remove or override the default back / forward buttons in the sidebar. I guess there’s a way of doing that.
Bah. Seems like the <<back>> macro doesn’t work with strings stored in variables. I can do it with <<link>>, but of course that messes up the history.
Ok so I’ve found it for the back problem. You need to trick SugarCube a bit
<<= "<<back [[Return to Story|"+$return+"]]>>">>
That way you both get the custom text and the return to the correct story passage
What a weird hack! Oh well, if it works!
It’s a shame we can’t put it in the StoryMenu though.
I might just leave it at this point and ignore the clunkiness.
You shouldn’t need the stupid print trick for this. The following will work.
<<back [[Return to Story|$return]]>>
You just need to delete the bogus $return passage unhelpfully created by Twine 2.
Beyond that, any macro that generates an anchor element (<a>)—which <<back>> does—may be used within the StoryMenu special passage.
I actually tried that already and it didn’t seem to make a difference, but it’s OK. It was getting too tricky to make the feature play nicely with other more important features, so I’ve abandoned it for now.
I don’t know what the rules are about posting in topics that haven’t been posted in a while, but I need help with something else.
I’ve been adding things to my CSS and Javascript and I ended up with a “Settings” button that I just cannot figure out how to get rid of because I don’t like it’s position between the “Saves” and “Restart” buttons, and also all it has is a volume slider which I already have on the sidebar further up so there’s no point to it. I can’t find anything in my CSS that will make it go away, it might be in my Javascript instead, I don’t know.
EDIT: Never mind, I worked it out.
#menu-item-settings {
display: none;
}