Howdy, Stranger!
It looks like you're new here. If you want to get involved, click one of these buttons!
Is there any way to let the player choose the background color? (Harlowe)
And by that I mean the color applied to the entire background, throughout the entire game. Basically this:
html{
background-color: rgb(xxx, xxx, xxx);
}
Except chosen by the player, either once at the beginning of the game or at any time through a link in the header. It would be the simplest thing in the world if variables worked in the stylesheet, but as far as I can tell, they do not. Unfortunately I am not at all well versed in css, so... is there any workaround for this? I am aware that there is the (background:) macro, but that only colors the space immediately under the attached hook and I want the entire background to be filled in (plus I'd like to avoid having to manually apply a macro to literally every single passage in the game if at all possible, though if it's the only way, I'll do it...)
html{
background-color: rgb(xxx, xxx, xxx);
}
Except chosen by the player, either once at the beginning of the game or at any time through a link in the header. It would be the simplest thing in the world if variables worked in the stylesheet, but as far as I can tell, they do not. Unfortunately I am not at all well versed in css, so... is there any workaround for this? I am aware that there is the (background:) macro, but that only colors the space immediately under the attached hook and I want the entire background to be filled in (plus I'd like to avoid having to manually apply a macro to literally every single passage in the game if at all possible, though if it's the only way, I'll do it...)
Comments
A. If predetermined then you could use a technique similar to that in the Basic Harlowe Passage Tag Based Styling thread to achieve what you want.
Place the following links in a passage, they use the CSS from the linked thread.
(link: "Forest")[ <script>$('html').removeClass().addClass('forest');</script> ] (link: "Desert")[ <script>$('html').removeClass().addClass('desert');</script> ]B. If three integers then you will need to:
1. Obtain those numbers from the Reader using either (prompt: ) macros or via one of the CustomScripts hacks. Remember to convert the String values supplied by the Reader into numbers using the (num: ) macro.
2. Validate that the numbers are integers and within the range allowed for RGB colour values.
3. Use code similar to the following to update the background-color CSS style property of the html element.
The following colour values are supplied by the Reader (set: $red to 0) (set: $green to 255) (set: $blue to 0) (print: "<script>$('html').css('background-color', 'rgb(" + (text: $red) + "," + (text: $green) + "," + (text: $blue) + ")');</script>")