Howdy, Stranger!

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

Change background color and image for different passages

I'm using Twine 2, SugarCube 2.

I know that this is probably something very basic, but I haven't been able to make it work.

How do I change the background color and image for different passages?

In my game, currently I have a black background with a forest image for the entire game. But since I plan to continue the game and make it longer, I'm gonna need to change the background image starting from a particular passage.

I've found some similar discussions in the forums, but following those instructions isn't giving me the results I want. I was able to change the background of the text, but not the background of the actual page itself.

To summarize, I want the background image to be a forest until a certain passage, and once you reach that passage, I want it to be an image of a house. How can I do that?

Comments

  • You can used the class related DOM Macros to implement functionality similar to the custom class/tag based styling already supported by SugarCube 2.

    note: Ideally you would assign your custom classes to the body element but unfortunately classes manually assigned to this element are automatically removed each time the Reader navigates between passages, because of this the following uses the html element instead although the style rules will still target the body element and it's children.

    The following four passage example is written in TWEE Notation.
    :: First
    The First passage should have the standard black background
    
    [[Next|Second]]
    
    :: Second
    <<addclass "html" "forest">>\
    The Second passage should have a green background.
    
    [[Next|Third]]
    
    :: Third
    The Third passage should also have a green background.
    
    [[Last|Forth]]
    
    :: Forth
    <<removeclass "html" "forest">><<addclass "html" "desert">>\
    The Forth passage should have a tan background.
    
    ... notice you need to remove the current class before adding the next one to transition from one set of CSS rules to the next.


    Placing the following example CSS within your story's Story Stylesheet area, it assigns the correct background colours to the body element.
    html.forest body {
    	background-color: green;
    }
    html.desert body {
    	background-color: tan;
    }
    
  • edited January 2017
    Thank you! Works beautifully.

    Theoretical question -- what happens if, say, it's possible to go back from the desert to the forest, and then return to the desert and continue? Would I put
    <<removeclass "html" "desert">><<addclass "html" "forest">>\
    in the forest passages that you can return to, even though the first time you enter them there's no "desert" class to remove?
  • As explained in the <<removeclass>> macro documentation you can call it without specifying the class name(s) and it will remove all existing classes from the indicated element.
    <<removeclass "html">><<addclass "html" "new-class-name">>
    
    ... this means you don't need to know the class of the previous section.


    If you need to send the Reader from one class section to another and the target passage is not the normal start-of-section passage then you can do one of two things:

    1. Add the remove/add class macro calls to the target passage.

    2. Add the remove/add class macro calls to the link targeting that passage.

    Replace the code of the Forth passage in my previous example with the following, it shows how to use <<removeclass>> to unconditionally remove all existing classes before adding this section's class, it also shows how to set the class of a passage targeted by a link.
    <<removeclass "html">><<addclass "html" "desert">>\
    The Forth passage should have a tan background.
    
    <<link "Go back to the Third passage" "Third">>
    	<<removeclass "html">><<addclass "html" "forest">>
    <</link>>
    
Sign In or Register to comment.