0 votes
asked by (160 points)

So for this example lets say I have two passages defined by two tags.

mushroomzone

and

birdzone.

In mushroomzone I want the image in the #ui-bar background to be (https://i.imgur.com/EuwbHEo.png) this image.

But when you click and exit to the next zone, I want the #ui-bar background to change to a different image, lets sayyy... (https://i.imgur.com/Tw9kyBJ.png) this image.

 

I've tried going into the css page and doign something along the lines of 

.

#ui-bar.mushroomzone{
        //set the background-image here
}

Which didn't work... so I had the idea of maybe creating a variable that updates itself each passage and is referenced in the css to assign the background-image url when the ui-bar loads each time. But I have no idea how to go about executing this or even if it's the most viable way. Honestly I mostly just want a side pannel with a background, so would it be easier to hide the ui-bar and just pad my main body away from the side and add a picture there of the same size and shape each time? I'm kinda torn.

1 Answer

0 votes
answered by (160 points)
Okay! I figured it out myself using

 

http://twinery.org/questions/6129/sugarcube-how-do-i-hide-show-ui-bar-in-different-passage
(the only difference between the answer in this link and what works here is that instead of hiding it, in each passage you update the background-image.)
 

BASICALLY!!! If anyone finds this in the future...

 

It's .mushroomzone #ui-bar{

}

not

#ui-bar.mushroomzone{

}

And don't forget the space!
Welcome to Twine Q&A, where you can ask questions and receive answers from other members of the community.

You can also find hints and information on Twine on the official wiki and the old forums archive.

See a spam question? Flag it instead of downvoting. A question flagged enough times will automatically be hidden while moderators review it.
...