Revision of Twine: apply CSS to passages with specific tags from Tue, 02/05/2013 - 01:16

You can write CSS that applies only to passage <div>s (such as those selected with the .passage selector) 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 <div> by combining selectors with ".body", ".body .internalLink" and such:

[data-tags~=cave] .body .internalLink { color: gold; }

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

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, add this code after it to make it work with the Start passage and bookmarked passages:

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

If you like this code, consider using these macros that let you control tags inside the game. Also see this code to let you select the <body> element during specific passages.

pensive-mosquitoes