Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

Twine 2, SugarCube 2: Can I change the styling of the sidebar on specific passages?



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

  • edited May 2016
    SugarCube supports passage tag based styling, which means you can use passage tags to influence which CSS is used to style any passage assigned a particular tag. This works because SugarCube assigns the current passsage's tags as CSS classes to the body element when the current passage is shown.

    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:
    body.other-sidebar #ui-bar {
        background-color: green;
    }
    
    ... 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.
  • Ah! That works perfectly! Thank you very, very much. I think I might have mixed one or two things up in my head when reading the documentation, and took it as "w/e that tagged passages for CSS thing is, don't do it, it'll break shit," and I wrote this exact thing off as an unusable method.

    Thanks a ton!
  • 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...
    Assuming you mean installing the new version was "a whole thing". Once you have SugarCube 2 installed in Twine 2, all you should need to do to update it to a newer release is to copy the files of the new release over your existing one, while Twine 2 is closed of course. You shouldn't have to fiddle with the story formats window at all.

    That is, literally, how I install new builds into Twine 2 for testing during development.

    "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.
    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.

    Twine 2, Sugarcube 2.5. I need to make the sidebar's background change for some passages.
    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:
    /*
    	When the <body> element has the class "boop", set the UI bar's
    	background color to "darkred".
    */
    body.boop #ui-bar {
    	background-color: darkred;
    }
    
    Done.
  • I'm on a Mac running El Capitan, just because I feel like that’s worth saying first. This isn't really even a "yeah, and then SC didn't work" reply, I'm just explaining that remark The “it was a whole thing” just was this… When I updated it before, there isn’t anything that says straight up, “and to update an already installed version, do this.” If there was, I at least wasn’t able to find it easily. If it's right there immediately obvious and I just somehow am missing a key sentence, and I'm being an idiot, I wouldn't put it past me, but still, that's the reason. Without knowing entirely what to do, I basically just tried to do an installation of it again. It had trouble repeatedly with the file path. Eventually, while frustrated, and mildly drunk, I just opened up the package for Twine, and dropped the new files in the story-formats folder.

    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.
  • You don't need to tag the 'normal' passages, just add CSS like the first one in the following example to style the #ui-bar element. (This CSS should appear earlier in your Story Stylesheet area than the tagged based CSS selectors.)
    /* The default style of the side-bar. */
    #ui-bar {
    	background-color: black;
    }
    
    /* Tag based styles of the side-bar. */
    body.sad #ui-bar {
    	background-color: blue;
    }
    body.happy #ui-bar {
    	background-color: yellow;
    }
    body.envy #ui-bar {
    	background-color: green;
    }
    
    
    ... obviously change the background colours (or any other property) to the values you want to be the default/normal.

    Then only tag the passages you want to be different than normal.
  • edited May 2016
    Assuming that the "normal" (body.normal) style rules are your default styles.

    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.
Sign In or Register to comment.