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

You can write CSS that applies only to passage .passage) that have been given specific tags in Twine!

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:

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

Some other selector syntax exists that you might find useful:
[data-tags] for a passage with at least one tag of any sort. [data-tags=dream] for a passage which only has one tag, "dream". [data-tags*=swamp] for a passage whose tags contain "swamp" (such as "grayswamp" or "swampfort"). And there's :not([data-tags~=gold]) for a passage which does not have the tag "gold".

And, of course, you can select elements of a matching passage [data-tags~=cave] .body .internalLink {
color: gold;
}

If you're using a standard version of Twine the selector syntax described above is the same, but 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.

pensive-mosquitoes