[Sugarcube] How can I have a variable change the color font in CSS?

Question

Okay, so this might take some explaining:

I've been writing this story/game for a while, and thanks to some excellent people (greyelf in particular), I was able to alter the CSS to color fonts of certain characters' speech. Now, years later, I'm trying to figure out if there's a way to alter the coding so that over time, a character's font would shift from one color to another by a variable change.

What I'm working with right now is something like this in the style sheet:

#passages .phaera {color: #FF69B4;}

#passages .raphael {color: #51B9DF;}

Now, what I'm currently doing to achieve the effect I'm going for in regular passages is this:

<<if $Status is 7>>@@.phaera;"TEXT"<<else>>@@.raphael;"TEXT"<<endif>>

You can see how that would get tiresome really quick.

Is there anyway of achieving the above by altering the css from without or within the style sheet?

Answer 1

You could just make a widget in a passage tagged as "widget":

<<widget "color">><<nobr>>
	<<if $Status is 7>>@@.phaera;$args[0]<<else>>@@.raphael;$args[0]<<endif>>
<</nobr>><</widget>>

Then you can just write:

<<color "TEXT">>

 

Comments

Tried putting it in just as you had it. It didn't work quite right.

What does $args[0] represent?

---

<<color>> is the widget name "TEXT" is the argument. Widgets take arguments as an array which are accessed as $args. If you only specify a single argument then it's the first slot in the array, [0].

If one writes a widget that uses multiple arguments then it could be something like this:

<<exampleWidget "argument0" "argument1" "argument2">>

In the code of the widget those variables would correspond like this:

• $args[0] = "argument0"
• $args[1] = "argument1"
• $args[2] = "argument2"

So in idling's example $args[0] is the text you'd like styled.

---

 It didn't work quite right.

Could you give more detail on what exactly wasn't right about that widget's behaviour?

---

Here's the documentation for sugarcube 1 and sugarcube 2.

I'm afraid without knowing what doesn't work right for you I can only make guesses.

Be sure to put the widget into its own passage and don't forget to tag that passage. You also can't pass linebreaks so if you want a linebreak in your text, you'll have to do something like this:

<<color "line1<br>line2">>

 

---

Okay... I actually looked into it a bit and realized that for the version I have, I needed to put the following:

 

<<widget "color">><<nobr>>
	<<if $Status is 7>>@@.phaera;<<print $args[0]>>@@<<else>>@@.raphael;<<print $args[0]>>@@<<endif>>
<</nobr>><</widget>>

The <<print $args[0]>> was what I was missing. Sorry for the confusion, but thanks a LOT for the coding experience (not sarcasm, I genuinely appreciate the help). This should be a huge help going forward for my project.

---

That's... odd. I've tested it without <<print>> and it works just fine. Naked variables and all that.