You can write CSS that applies only to passage DIVs (such as those selected with .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".
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.