Howdy, Stranger!

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

Change font color based on variable


I want to change the color of something I write based on a story variable.

For example I could use this:
<<if $variable lt 2>><span style="color:blue">TEXT</span><<else>><span style="color:red">TEXT</span><</if>>

But I want to change the color of the text in A LOT of passages and using the above would mean a lot of repetition.

Is there some kind of Javascript with which I could do the if-check on every load of a passage and modify a CSS style element?


  • Depending on what you're using, you could probably write an alternate print macro or widget. Take the text as an argument, check the var, set the span and then print the text and close the span.
  • You need to state the name and full version number of the Story Format you are using, as answers can be different for each one. Also please use the code tag when posting examples - it's the C on the editor bar.

    Based on the syntax of you example we can assume you are using one of the SugarCube versions but without further information we can't guess which one, and it could make a difference in the coding of any solutions given.

    Besides @mykael excellent suggestion of using a custom macro/widget to abstract the code that determines which style to display the text in, you could also use <<addclass>>/<<removeclass>> macros to conditionally add a CSS class name to the current page**, then define CSS in the Story Stylesheet area to style it and use @@ based markup to apply it.

    eg. Say I have a $playerEmotion variable that represents the player's emotional state (blue=sad / red=angry) and that the variable's values are "sad" / "angry".
    /* The CSS could look something like. */
    .sad .emotional {
    	color: blue;
    .angry .emotional {
    	color: red;
    /% The TwineScript to assign the CSS class to the page could be like. %/
    <<addclass "body" $playerEmotion>>
    /% The Markup used to display the text could be like. %/

    ** which HTML element to target can depend on the version of SugarCube you are using.
Sign In or Register to comment.