Images work in Twine 2.0.11, Harlowe 1.2.2; don't work in Twine 2.1.3., Harlowe 2.0.1

Question

I'm using tags and CSS to change the background images on different passages, like so:

html.tagname {
	background: url(/images/image-associated-with-tagname.jpg) fixed;
	background-size: cover;
}

This works fine in Twine 2.0.11 and Harlowe 1.2.2. However, I wanted to update to the new Twine and Harlowe versions, 2.1.3 and 2.0.1. I didn't change anything in my CSS, but now the images don't work. Yet the rest of my CSS is working fine!

Any ideas what's happening?

Answer 1

Harlowe 1.x didn't include support for using Passage Tags to style the page with CSS so you must of used custom code to do that. As you don't state which method you were using we can't offer advice on why it is not working for Harlowe 2.x

Harlowe 2.x does support using Passage Tags to style the page with CSS but as explained in this comment in the Basic Harlowe Passage Tag Based Styling thread on the old forums the tags are added to the tw-story element, and not the html element. Harlowe 2.x also sets up its default background styling on the tw-story element, which is why background styling applied to the html element may be overwritten.

NOTE: Searching the old forums for solutions to issues is a good idea, as it contains answers to many things.

Comments

Okay, thank you. I've been working on this project for several years so I don't always remember what code I've put where. I've found the script I'm using, though, in the Startup passage:

(print: "<script>$('html').removeClass(\)</script>")
(if: (passage:)'s tags's length > 0)[
(print: "<script>$('html').addClass('" + (passage:)'s tags.join(' ') + "'\)</script>")
(print: "<script>$('tw-passage').addClass('" + (passage:)'s tags.join(' ') + "'\)</script>")
(print: "<script>$('tw-sidebar').addClass('" + (passage:)'s tags.join(' ') + "'\)</script>")
]

So, according to your link, I don't need this anymore, and I should use this in the CSS instead:

tw-story[tags~="desert"] {
	background-color: Beige;
}

tw-story[tags~="forest"] {
	background-color: LightGreen;
}

Can I ask what the ~ in this code means/does?

(I might just stick to Harlowe 1.x for the purposes of this project, but this is good information going forward.)

---

The tilde-equals (~=) there basically means the attribute value is in the list of values (the list itself being a space-separated list): 

tw-story[tags~="forest"] {
  /* the passage's tags attribute includes the "forest" value as a part of a space-separated list */
}

tw-story[tags="forest"] {
  /* the passage's tags attribute is the "forest" value (i.e. it is the only value) */
}

More info.

---

I've found the script I'm using...

If you look at the first post in the thread I linked to you will see the same code as what's in your startup tagged passage, I guess that's where you originally obtained that code from. *smile* 

---

No doubt! Thanks again, greyelf, you've been invaluable while I've been poking/learning/creatively breaking stuff.