tl;dr
Twine 2, Sugarcube 2.5. I need to make the sidebar's background change for some passages. If that requires me defining a specific thing on all 125 current passages, so be it. If I could just add code for passages where I want it to look special, that'd be ideal, but whatever.
What do I need to do to get that to work?
Hi. I've searched around, and not found anything, maybe because "sidebar" and "css" are such often used terms, but, I hope this hasn't been asked a ton of times or anything.
I'm using the most recent version Twine 2. I'm using SugarCube 2.50, as I literally just looked and saw that there has been an update, updating offline last time was a whole thing and I had issues with it, and...
"Moved the core font and color properties from the body to the html element"
... seems like it might be bothersome, I'm not entirely sure, but I have <<toggleclass "body" "whatever">> on every passage, as I change the background quite a few times based on the lighting of the room the player is in.
Anyways, that's what I'm using.
So, in general, before, I didn't really mind that the sidebar stayed the same while the background changed. The sidebar actually functions as a physical part of the room the player is in, and has a number of buttons on it. They can be darkened, when they're inactive, or later, light up, when they are able to be interacted with. As they are confined to a single space, what's on the sidebar works well as far as form and function, and when I have the background go black, for example, when the sidebar remains the same consistent "grey," that can generally be forgiven.
However, this one bit of the game I'm working on, this is what I need, or otherwise, I need to write a new idea. The room gets darker, and darker, and darker. Simultaneously, the buttons get darker, and darker, and darker. After the room is completely black, one shines, super brightly, and hurrah, the player presses it. I can get the buttons, w/e, no problem. Making the background, and fonts used, not an issue, i just do the above <<toggleclass "body" "button2dark3">> or whatever.
The sidebar refuses to get darker, though. Be it toggling it, or adding a class, or, not defining a color for the sidebar, and then adding a class, I can't get it to change, besides making it make a universal change, which doesn't help at all..
This might be super obvious with CSS; I'm self taught from just picking apart code, and while I can actually do this like, professionally, using my own, very likely messy Frankenstein code, I am by no means an expert, and specifically through Twine, I've found very basic things pop out that I should just inherently know and don't. This might be a super obvious SugarCube thing that I'm missing, but I've read the hell out of the documentation and still haven't found a way to do this. This might just be impossible to do and I should know that, buuuuut I'm hoping it isn't, so I'm asking here.
Thank you!
Comments
note: you can use any tag name you want, for this example I will be using one named other-sidebar
1. Assign the tag to all the passages you want the side-bar to look different in.
2. Add a CSS selector based on the tag to the Story Stylesheet, you want to change the side-bar (which has an ID of #ui-bar) so your CSS rule will look something like the following: ... you can change the above green to any valid CSS color value.
You can use different tag names to represent the different states you want the side-bar to go through.
Thanks a ton!
That is, literally, how I install new builds into Twine 2 for testing during development.
At least for certain types/styles of backgrounds, setting them on the body element can be problematic—which is why the change you referred to was made, so authors wouldn't have to fight the default styles in those cases.
As far as using <<toggleclass "body" "whatever">> on every passage. SugarCube automatically translates the non-special tags of the currently displayed passage into classes on the body element. In other words, you may simply tag your passages with whatever classes you want the body element to have when that passage is being displayed.
Generally, you should only need to use the <<*class>> macros for dynamic intra-passage class updates or when you need to modify the html element's classes.
To style the UI bar when certain passages are displayed, simply tag the passages in question with something (e.g. boop). That tag will become a class on body element when the passages in question are displayed. You'd reference that combination of element and class in the CSS selector of your style rule. For example: Done.
So, it was only REALLY a whole ordeal to deal with because I got drunk and frustrated. I reinstalled Twine, reinstalled SC as per the normal instructions, and no problems at all. It DOES say to keep note of the place I drop the files for the installation, but tbh, I had no idea that thats what I had to do to upgrade, and I have no clue where those files are, anymore, I lost the textedit document with that in a massive purge of files I think. So, now that I know that, super helpful, and super easy way to upgrade, awesome…. I’m gonna make sure I keep note of where those files are this time, but, I figure I’m just gonna uninstall and reinstall it all considering I have no idea where the previous files are. Maybe it was clear in the documentation and I just didn’t understand it, for some reason, I do tend to take on stuff like upgrading programs and what not at night, mid-amphetamine crash, I don’t know, I just never saw, specifically, that that was what I had to do. No big deal, though, really.
Thanks for the help— my passages are toggled, almost always, to “normal”, which is just
<code>background-color: #ffffe6;
color: #000;</code>
Not a lot goin’ on there. I just tried that, though, tagging it instead of including any <<toggleclass>> stuff, and woo, it works, and is a way better way of handling this. I was given the impression, for whatever reason, from likely misunderstanding something being said, from who knows when about who knows which version, that tagging passages to handle CSS stuff was a bad idea. No idea where I got the idea. I dunno how within the documentation, I never got that tagging stuff like this would work, either. Gonna go with that method now besides on the passages where I have timed events causing changes to <body>.
Just so that I’m sure, before I upgrade, with that change… basically, every passage where I have <<toggleclass “body” “normal”>> on, will that at all break that look, visually, or not? I’m gonna change that all to tagged passages instead eventually but I might wait a few days potentially to upgrade just so that I can get playable versions out to some people over the next few days.
Then only tag the passages you want to be different than normal.
As greyelf says in his post, just set your "normal" styles to be the default styling and then only tag/style the exceptions to that. You'll save yourself a whole lot of tagging that way.