I've recently posted up a new version to a game - for this version, I changed the background colors through the css file. The problem is, some people love it and others do not.

Since I'm getting this effect through the css file, is there a way to change colors in the actual squiffy/js code? I'd rather toggle this change in-game, rather than maintain two separate versions of the game.

Thanks in advance.

I haven't used Squiffy much, but you should be able to add an extra section using javascript:

    jQuery('<style>', {id: 'customstyle'}).appendTo('head').text("body {background-color: green; color: purple;}");
    jQuery('#customstyle').append("p {border: 6px double red}");

and if you want to remove it again,

    jQuery('#customstyle').remove();

Overriding the built-in styles with a later style element is probably better than modifying the existing stylesheet reference, which leads to odd permission issues in some browsers.

I tried putting this into simple code and got the following error:

SyntaxError: Unexpected string

I have to admit, I'm not very good with javascript.

Sorry; disadvantage of typing on mobile. I missed out the colon after id on the first line.

Thanks a lot. You saved me from having to maintain TWO versions of the same game! I really appreciate it!

Hey, was playing with it tonight. I can make my active links LightCoral. However, I'd like to make my disabled links Brown. I can't seem to pull that off. Here's my test code.

[[init]]:

This is the basic color

[[next]]

[[next]]:

    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;}");
    
Did it change?

[test passage]

[[back]]

[test passage]:
This is a test of a passage

[[back]]:

    jQuery('#customstyle').remove();
    
Clear new colors

[[The End]]

[[The End]]:

Testing that old links show correctly

I'm so close!

OK… for some reason, the default CSS includes the line:

a.squiffy-link.disabled {color: inherit !important;}

inherit means that it will be the same colour as the containing paragraph. !important prevents it being overridden by later scripts. I have no idea why they've done that.

So if you want to override it, the line will be:

    jQuery('#customstyle').append("a.squiffy-link.disabled {color: brown !important;}");

Brilliant! Thank you so very much for that fix, Mrangel. I've got an open day and figure I could get a patch together and put it out there. Also, this will make future games so much easier to work - no more screwing around with a css file; I can code colors in directly.

I really appreciate your quick and complete effort on this. If only my bank had this sort of customer service!