Home › Development Diaries › L's blog

Revision of Twine: apply CSS to the <body> element during specific tagged passages from Tue, 02/05/2013 - 00:50

Tue, 02/05/2013 - 00:39 — L

If you've been using Twine passage tags for CSS selection you probably think it's pretty swell, albeit missing some highly desirable functionality - there isn't a way to use it to select the page's <body> tag, and thus control the presentation of the page background (among other things). So, here's some Javascript code that can overcome this deficiency:

Passage.prototype.render3 = Passage.prototype.render; Passage.prototype.render = function () { var b = this.render3(); document.getElementsByTagName("body")[0].setAttribute("data-tags", this.tags.join(" ")); return b; };

What this does is make the <body> tag have its "data-tags" attribute set to equal that of the most recently displayed passage. So, you can select CSS for the body and the passage div separately, like this:
body[tags~=blood] {
background-color:red;
color: black;
}
.passage[tags~=blood] {
background-color: black;
color: red;
}

Keep in mind that this selector will apply to both the body and the passage div:
[tags~=blood] {
font-size: 110%;
}

This should work with both Jonah and Sugarcane.