So I referred to this old thread to create a minimap in my twine game: https://twinery.org/forum/discussion/1630/macro-mini-map-to-go
I modified the minimap a little and put it on the right hand side of the page, so that it wouldn't take up space on my StoryMenu UI bar.
Now on the StoryMenu UI bar, I added a click macro: <<click "Toggle Minimap">><<toggleclass "#minimap" "display">><</click>>
Here are my stylesheets for the minimap with "display: none" as default for the #minimap:
transition: all 2s;
-webkit-transition: all 2s;
My problem is that it is not working, and the minimap remains hidden (due to the default display:none). Did I do anything wrong? Should I use visibility: hidden instead?
As an extra question, due to me putting the minimap at the right-hand side of the passage, the minimap tends to obscure text / images within the passage due to its size, so I would also like to add a toggleable "margin-right: 285px" or something like that into the body element, using the same click macro, but I have no idea how to do that.
Sorry if this question is rather simple, but I'm still new and terrible at twine and css in general >_<
Add the following style rule to your current rules: (somewhere after #minimap) That rule changes the CSS property display when the class display exists on the #minimap element.
I still have another question that I asked in my original post though: I'm trying to add another <<toggleclass>> macro within the same <<click>> macro I mentioned above which modifies the "body" property to increase the right margin whenever the minimap is toggled back on. Any idea how I would do that? How do I modify the CSS for "body"?