Hey,

I would like to make a game where the background color, text color, and link colors changes as you go deeper and deeper into a cave.

I have the background color and text colors working fine using:

[this section]:
$("body").css("background-color", "rgba(0, 0, 0, 0.5)");
$("body").css("color", "yellow");

[new section]:
$("body").css("background-color", "rgba(0, 0, 0, 0.8)");
$("body").css("color", "red");

What I cant get working is changing the in text link color. I tried

$("a").css("color", "red");

and

$("a.squiffy-link").css("color", "red");

$("a").css("color", "red"); changes the color of the "restart" link which is what I would expect.
$("a.squiffy-link").css("color", "red"); does not seem to change anything.

Does anyone know of a way to dynamically change all the link colors?

You can do it with nothing but html and Squiffy. No Javascript required:

@set G=<span style="text-decoration:underline; text-decoration-color:white; color:green;">

[{G}Green Link](Green Link)

Then you can set G to other decorations and colors with later {if statements.

Alternatively, you can set other span styles variables right at the beginning and use them as you want.

Thanks for that. It does work, it just seems like it will be a pain to go back and edit my entire story to change each individual link. I will keep this incase nothing else comes up.

Search for something unique, like

]](

It shouldn't be too hard to round them up. Otherwise you can change the colors this way...

    set("newColorFlg"); //new color flag = black background
    jQuery('<style>', {id: 'customstyle'}).appendTo('head').text("body {background-color: black; color: Red;}");

    jQuery('#customstyle').append("a.squiffy-link {color: LightCoral;}");
    jQuery('#customstyle').append("a.squiffy-link.disabled {color: brown !important;}");
    jQuery('#customstyle').append("a.squiffy-header-link {color: white; text-decoration: underline !important;}"); 

This could go into your first section and it will carry through the code. Adjust colors to fit.

Ive tried this code and something similar and everytime when I preview the result I get no text. Like nothing appears on the screen almost like it is crashing.

The error appears to be in the line:

    jQuery('<style>', {id: 'customstyle'}).appendTo('head').text("body {background-color: black; color: Red;}");

If i get rid of that I will get text, but obviously no changes.

When I find that I need to change something like this in my game I use Edit > Replace. It saves a lot of time.

I found a problem with what you posted IFforClassroom:

Some places in the my story it works properly:
On this small box there is a metal plate and on the plate is a candle.

Other times I get something like:
On this small box there is a metal plate" role="link" tabindex="0">metal plate and on the plate is a candle.

EDIT: Fixed....I missed in your original post the need to link after
I was doing

On this small box there is a [{r}metal plate] and on the plate is a candle.

I should have been doing

On this small box there is a [{r}metal plate](metal plate) and on the plate is a candle.

Yeah, that's the thing about workarounds. They only ever work under the right conditions. I should have made a note of it rather than lazily copy and paste.

I absolutely love your other post about putting background and font styles directly into Squiffy code without having to monkey with the CSS file.

Here is the full test code. It works for me (in the offline editor). You should get different colors for links, selected links and so on. This should provide a framework. I've used this in a number of games. You only have to do it once in your code and it's good for the entire body.

[[Start]]:

    set("newColorFlg"); //new color flag = black background
    jQuery('<style>', {id: 'customstyle'}).appendTo('head').text("body {background-color: black; color: Red;}");

    jQuery('#customstyle').append("a.squiffy-link {color: LightCoral;}");
    jQuery('#customstyle').append("a.squiffy-link.disabled {color: brown !important;}");
    jQuery('#customstyle').append("a.squiffy-header-link {color: white; text-decoration: underline !important;}"); 
    
this is a section

[passage]

[[link]]


[passage]:

passage stuff

[[link]]:

This is a new place

Go here to get the good list of available colors.

https://www.w3schools.com/colors/colors_names.asp

Ok Next Issue with IFforClassrooms's method:
This method does not seem to work for sequences or rotates.

I cant change the text color of the sequence/rotate themselves and any links inside of them also wont change.

BlueVoss:
My issue appears to be the editor. The code you provided ran in the offline editor, but not the online editor. The preview in the offline editor did not show background colors, but the link colors worked. I had to "build" the thing before I could see the background colors. Is this typical with the editor?

Yes, the appearance on the editor and on your browser will be very different.

Shenry: Yeah, you gotta build it to see what it will look like when run in full HTML. If you just "run" it, you won't get the full effect (since you are running in the editor and not in a browser).

I used to mess with the CCS file and I'd have to paste in the changes each time I built. Doing it this way made it easier to work with. I develop using the build button. I only use run to make sure my JS code compiles correctly.