Hey all. I recently switched from Harlowe to SugarCube 2.6.2 in Twine 2.0 (for its superior audio capabilities). I'm trying to change the background of passages using tags to be able to switch from background to another when I switch to another passage. In my stylesheet, I have the following:
body.test { background-color: white; color: black; }
In SugarCube 2.6.2, this causes a test passage I made to look like this:
I tried the same stylesheet with Twine 2's built-in version of SugarCube 1.0.34, which resulted in this:
The latter is clearly what I was going for, but I can't seem to get it to work in SugarCube 2.6.2, and a good deal of Googling seems to not have helped me much. Am I doing something wrong here (very likely, I'm not really all that experienced with HTML and CSS) or is something else broken? Am I better off just sticking with SugarCube 1? Thanks in advance!
Comments
In SC 1.x the height of the body element covers the total height of the browser's view-port, in SC 2.x the height of the body element defaults to the minimum size required to display the current Passage's content.
In SC 2.x the colour of the area above and below the Passage content is set on the html element but unfortunately the tags you are using to control the styling of the body element don't extend to the html element.
TheMadExile would be the best person to provide a solution to your question but the following Javascript can be used to copy the CSS classes created via your passage tags from the body element to the html element.
1. Place the following in your story's Story Javascript area.
2. Changed your tag based CSS styling to use the html element instead.
warning: A more experienced Javascript programmer may be able to give you a better solution, or be able to spot issues with my code.
Regardless. You should simply be able to add the following style rule to the top of your Story Stylesheet to address the issue without the use of any JavaScript: That will replicate the basic document styling onto the body element and allow you to use tags to change your background colors as normal.
I accidentally excluded a style for my previous example. The correct set of styles would be something like the following:
I do not recommend copying classes to the document element, let alone wholesale overwriting of all classes as you're doing, as SugarCube uses classes on the document element for various things. Overwriting those could have negative consequences.