Revision of Twine: apply CSS to passages with specific tags from Mon, 02/04/2013 - 05:23

You can write CSS that applies only to passages that have been given specific tags!

If you're using this 1.3.6 alpha you can do this by just using the selector syntax [data-tags~=tagname].

So, if you tag a bunch of passages with "dream", you can then apply specific CSS to just those passages like this:


[tags~=dream] {
color: aqua;
text-shadow: aqua 0 0 3px;
}


If you're using a standard version of Twine you'll need to include this Javascript code as well, inside a disconnected passage that has "script" as its only tag:


Passage.prototype.render2 = Passage.prototype.render;
Passage.prototype.render = function () {
var b = this.render2();
b.setAttribute("data-tags",this.tags.join(" "));
return b;
}; var tgs = state.history[0].passage.tags.join(" "); var fc = $('passages').firstChild; fc.setAttribute("data-tags",tgs);




If you're using Sugarcane, also add this code after it:




var it = setInterval(function(){ var fd = $('passages').firstChild; if (fd!=fc) { clearInterval(it); fd.setAttribute("data-tags",tgs); } },0);


Of course, this won't work for passage text displayed with the << display >> macro.

If you like this code, consider using these macros that let you control tags inside the game.