+2 votes
by (620 points)
reshown by

Hello everyone.

In the story im writing, i have set a color for the tw-passage part of the passage on the stylesheet (with CSS and in Harlowe 2.0.1) like so:

tw-passage {
  padding: 2em;
  background-image: -webkit-linear-gradient(-45deg, beige, #c6c66c);
  box-shadow: inset 0 0 2em black;
  }

It all works properly but i want to be able to change the colours above according to a "health" variable set in my later passages. Like this: if health =3 then the color will be green, if health =2 then the colours will be orange and if health =1 the the colours will be red. For information I have no idea how CSS works and although i do understand what I have written here, it didn't come from me. I copied it from an other website. So please don't use too many convoluted words and such...

So please, if anyone knows how to make this possible, please let me know how so.

Thanks in advance, SaltySam.

1 Answer

+2 votes
by (159k points)
selected by
 
Best answer

NOTE: Because the Q/A site is still new, I generally suggest searching the old Twine Forum when looking for possible solutions to questions that don't have existing answers here.

You can use a technique similar that used in the old Harlowe - How to change type-styles with variable... thread to achieve the effect you want, although I suggest modifying it slightly to suit your use-case.

1. Initialise your story variable within a startup tagged special passage.
If you don't already have one of these passages within your story then simply create a new passage (the name you give this passage is not important) and assign it a startup tag.

(set: $health to 4)

2. Create the CSS selectors to be used to style the three special health based use-cases.
Place CSS like the following within your story's Story Stylesheet area, it defines your base style plus three (sub)classes of it which will be used as needed.

tw-passage {
	padding: 2em;
	background-image: -webkit-linear-gradient(-45deg, beige, #c6c66c);
	box-shadow: inset 0 0 2em black;
}
tw-passage.health-3 {
	background-image: -webkit-linear-gradient(-45deg, green, #c6c66c);
}
tw-passage.health-2 {
	background-image: -webkit-linear-gradient(-45deg, orange, #c6c66c);
}
tw-passage.health-1 {
	background-image: -webkit-linear-gradient(-45deg, red, #c6c66c);
}

3. Use a footer tagged special passage to control which CSS (sub)class is used.
Create a new passage (I named mine Health Based Styling) and assign it a footer tag.

(if: $health is 3)[<script>$('tw-passage').addClass('health-3');</script>]\
(else-if: $health is 2)[<script>$('tw-passage').addClass('health-2');</script>]\
(else-if: $health is 1)[<script>$('tw-passage').addClass('health-1');</script>]

... the above code may look a little confusing but it basically breaks down to:
a. The (if:) related macros which determine which code to run based on the three special values of $health.
b. Using a jQuery locator function (the $('element-name') part) to access the tw-passage element.
c. Using the jQuery addClass() function to assign a CSS (sub)class to the located tw-passage element.

4. Change the value of the $health variable within your passages as needed.

(set: $health to 1)

5. Hide all visual output generated by the special passages used in points 1 and 3.
Place CSS like the following within your story's Story Stylesheet area, it uses CSS selector based on the type of the startup tagged passage and the name of the footer tagged passage to hide those passage's visual output.

tw-include[type="startup"], tw-include[title="Health Based Styling"] {
	display: none;
}

note: If you gave the footer passage in point 3 a different name then you will need to alter the title part of the above CSS selector to be the same as that name.

by (620 points)
Thanks a bunch for explaining all of this to me! Not only have you solved my problem but now I also know how this part works now! I hope other people will find this useful too.
by (6.2k points)
edited by

Greyelf, you are such a great twine community member. You're always there to help and know everything. I had a similar problem to SaltySam's, so thanks so much!smileysmileysmileysmileysmileysmileysmileysmileysmileysmileysmileysmileysmileysmileysmileysmileyyesyesyesyesyesyesyesyesyesyesyesyesyesyesyeswinkwinkwinkwinkwinkwinkwinkwinkwinkwinkwinkwinkwinkwinkwinkwink

Edit:

Just tried the code, however it doesn't change the entire passage's background; it has the same effect as the (background:) macro. I tried changing the 'passage' in the css to 'story', but it didn't work. Have I done something wrong, or does this not change the entire background?

by (6.2k points)
Greyelf, I tried the code, however it doesn't change the entire passage's background; it has the same effect as the (background:) macro. I tried changing the 'passage' in the css to 'story', but it didn't work. Have I done something wrong, or does this not change the entire background?
by (159k points)

@Deadshot

You need to supply an example of how you are displaying your default background image, because the CSS selectors required to overwrite that default will need to be based on it.

by (6.2k points)
Umm, I actually just want to change the background colour, not image. Will this work for that?
...