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**@ 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".

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