Navigation
User login
Upcoming events
Recent Events
- 13 weeks 6 days ago
- 16 weeks 4 days ago
- 26 weeks 6 hours ago
- 28 weeks 1 day ago
- 28 weeks 3 days ago
Newest Games
Search
Who's online
Revision of Twine: apply CSS to the <body> element during specific tagged passages from Tue, 02/05/2013 - 01:22
If you've been applying CSS to passages with specific tags, 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.