Home › Development Diaries › L's blog

Twine: apply CSS to passages with specific tags (Tag CSS)

Thu, 01/24/2013 - 23:07 — L

Update: Twine 1.4 now has an easier method of using Tag CSS, so this script code is no longer necessary.

Obsolete script removed: use Twine 1.4

CSS Syntax
The selector syntax for passages with specific tags is [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;
}
The preceding code will affect both the passage div and the body element. To select those elements separately, use syntax like this:
body[data-tags~=blood] {
  background-color:red;
  color: black;
}
.passage[data-tags~=blood] {
  border: 5px solid white;
  font-size: 110%;
  width: 30em;
}
Some variations on the selector syntax exists that you might find useful:
[data-tags*=swamp] for a passage whose tags contain "swamp" (such as "grayswamp" or "swampfort").
: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:

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

Caveat: all of this won't work for passage text displayed with the << display >> macro unless you use something like addtag.

Selector recap:
* To apply CSS to the body element, use "body[data-tags~=tag]", "body:not([data-tags~=tag])" etc.
* To apply CSS to the passage-class element, use ".passage[data-tags~=tag]", ".passage:not([data-tags~=tag])" etc.
* To apply CSS to both, use "[data-tags~=tag]" etc.

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

*This is really just a workaround until browsers support CSS selector subjects. Ideally you could just do !body .passage[data-tags:], but alas, not this year.

Version history:

  1. 11/2/13 - Possibly fixed crash in situations where 'state' hadn't been initialised yet.
  2. 6/2/13 - Additional code to affect the <body> tag was added for both versions.
  3. 5/2/13 - Altered to use "data-tags" attribute rather than "tags".
  4. 4/2/13 - Split into two snippets for Twine 1.3.6 alpha and Twine stable versions.
  5. 26/1/13 - Altered to affect the Start passage.
  6. 25/1/13 - Initial.

Comments

Fri, 01/25/2013 - 05:52 — caevstroy

Is it possible to change CSS

Is it possible to change CSS depending on some variable? For instance if $thingy = true then all passages will appear a certain way, and if it changes so does the appearance

I ask because a friend of mine...

Fri, 01/25/2013 - 07:34 — kitbeard

Can't get it to work!

I'm working on a twine game at the moment where I wanted to give two different feels, so I thought this would be useful, but I can't get it to work! Admittedly, it's a while since I've used css, but I'm also using your dissolve, which is running fine, as long as I don't put this in too. (Technically, it's running fine as long as I don't have the second block of code on this page in, just having the first one is not affecting it.) Both firefox (18.0.1) and ie (9.0.loadsadigits) are complaining that there is a problem with the story (Script: expected "]"), but I can't see where one would go. Is it running fine for you?

---

Edit: half an hour later.

I am a silly kit. I was putting the javascripts and the csses in the same passage. It runs fine, the error was between the sofa and the keyboard.

Mon, 08/05/2013 - 02:57 — Darkhog

I'm a bit confused

Do I need to add code after "...and if you're using Sugarcane, add this code after that to make it work with the Start passage and bookmarked passages:" even if I have 1.3.6? Or only if I have older Twine (I'm using 1.3.6)?