Howdy, Stranger!

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

Variable changes CSS?

Is it possible to have a background color changing of intensity according to a variable in percentages? (I'm using Sugarcube if it's important).


  • Which version of sugarcube? What do you mean by intensity (i.e. what rule or parameter are you looking to change)? What does your css look like right now?
  • Well, I'm using Sugarcube 1.0.34.
    I have a "health" variable, and I would like the background to turn to blood-red when the value of health decreases. I don't know exactly what parameter would correspond to that...
    My CSS is pretty empty right now :
    body {
    	background-color: white;	
    	color: black;
  • edited July 2017

    Step 1. Create a style rule.
    body.low-hp {
      background-color: #f33;

    Explanation (feel free to skip to next step): You can add classes to CSS using a dot. CSS applies styles based on their specificity and order; rules lower in your style sheet override rules appearing earlier, but more specific rules override less specific rules regardless of where they appear. It's possible to add classes to elements using SugarCube macros or jQuery, so we can override our basic body styling rules by adding classes and making more specific rules for those classes.

    Step 2. Create a new passage and name it PassageDone and add the following code. If you already have a PassageDone special passage, instead add this code to it.
    <<removeclass 'body'>>
    <<if $health lt 30>>
      <<addclass 'body' 'low-hp'>>

    Explanation: We can use the <<addclass>> and <<removeclass>> macros to dynamically add and remove classes from elements. We put this code in PassageDone for two reasons:

    1. PassageDone executes after the passage has rendered--this is helpful since certain elements are rerendered on passage transition, and can't be targeted before they are rendered. THIS IS NOT TRUE OF THE body ELEMENT, however, so that's not really an issue here.

    2. It's code is appended to every passage and executes silently, without output. This means we don't have to add this code to every passage where a player might lose some health and we don't need to worry about it creating any line-breaks in our displayed passage.

    Obviously you'll want to change the variable names, numbers, and classes to whatever you want/need them to be.

    One more additional note: If you aren't too far in your story, you should switch to SugarCube 2.18.0 now, before doing too much work in CSS. You'll find that, other than CSS (and potentially a small amount of custom JavaScript) pretty much all the code you've written will translate just fine to v2. You'll only gain functionality; you won't lose anything you have or need now.
  • Chapel wrote: »
    Step 2. Create a new passage and name it PassageDone and add the following code. If you already have a PassageDone special passage, instead add this code to it.
    <<removeclass 'body'>>
    As a general rule, you should never do that—i.e. remove all classes from the <body> element within any of the special passages or using task objects. It is both:
    1. Redundant. The <body> element's classes are cleared/reset at the beginning of passage navigation—i.e. each turn. This occurs just before the predisplay task functions and the PassageReady special passage are run.
    2. Destructive. You're clobbering the <body> classes auto-generated from the passage's tags during rendering. This occurs just before the prerender task functions and the PassageHeader special passage are run.
Sign In or Register to comment.