Howdy, Stranger!

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

Changing background color in SugarCube 2.6.2 for Twine 2 doesn't seem to work properly for me?

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: vVcOpoA.png

I tried the same stylesheet with Twine 2's built-in version of SugarCube 1.0.34, which resulted in this: 8FN86mK.png

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

  • Your not doing anything wrong, the HTML structure and CSS defaults of SugarCube 2.x are just different to those of SugarCube 1.x

    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.
    prerender["HTML element tags"] = function (content, taskName) {
    	/* Copy the body element's CSS classes to the html element. */
    	document.documentElement.className = document.body.className;
    };
    

    2. Changed your tag based CSS styling to use the html element instead.
    html.test { background-color: white; color: black; }
    

    warning: A more experienced Javascript programmer may be able to give you a better solution, or be able to spot issues with my code.
  • Hmm. Well, that's an unintended consequence of a somewhat recent change. I'll have to think about that.

    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:
    body {
    	color: #eee;
    	background-color: #111;
    }
    
    That will replicate the basic document styling onto the body element and allow you to use tags to change your background colors as normal.
  • @TheMadExile , your solution I'm afraid did not change anything. I ended up going with @greyelf 's and that worked just fine. Thanks so much for your replies!
  • My apologies for the late reply. I got sidetracked with various things.

    I accidentally excluded a style for my previous example. The correct set of styles would be something like the following:
    /*
    	Reset the default SC2 background color setting for the
    	document element, which allows background settings applied
    	to the <body> element to fill the entire area as expected.
    */
    html {
    	background-color: inherit;
    }
    
    /*
    	Replicate the default SC2 document styling onto the <body>
    	element.
    */
    body {
    	color: #eee;
    	background-color: #111;
    }
    
    
    /*
    	Your body.whatever styles here.
    */
    

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