Howdy, Stranger!

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

Not quite understanding how to have the click macro change its text color

I'm using Sugarcube in Twine 2.0.1 and essentially wish the text to change color when a user clicks on it (I plan to also add changes to variables at the same time, but that part will be hidden from view).

I have dedicated quite a bit of time searching the forum and google in general, narrowing my code down to this:
<span id="etest"><<click "Test ears">><<replace "#etest">>body { color: red; "Test ears" }<</replace>><</click>></span>

While I'm no longer getting the Error messages, I'm currently only printing the text "body { color: red; "Test ears" }" after the user clicks the "Test ears" text.

I'm guessing that I might need to use class instead of id, since somewhere it says that id can only affect one thing while class can affect many. But simply switching the word id with class generates an error, so . . . yeah. Really trying to figure out this whole CSS/HTML/Javascript thing (far cry from BASIC).


  • edited December 2015
    That's not how CSS works.

    You will, very likely, want to add a class to your ID bearing element. For example:
    <span id="etest"><<click "Test ears">><<addclass "#etest" "red">><</click>></span>
    That doesn't remove the link, however, so if you wanted that done as well, then you'd need something like the following instead:
    <span id="etest"><<click "Test ears">><<replace "#etest">>Test ears<</replace>><<addclass "#etest" "red">><</click>></span>

    You'll also need to define what the class does by putting something like the following into your Story Stylesheet:
    	This will change the color of both normal and link text
    	within the target element to red.
    .red, .red a {
    	color: red;
  • Thank you very much.
Sign In or Register to comment.