Change Background for certain passages? [SOLVED]

Comments

• lit

  November 2014

  To quote L:
  
  [quote]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; }

  Important note: the way to add tags to your passages is through the passage editor, underneath where you input the passage Title.
  
  
  L's toggletag macro script may interest you:
  
  [quote]This extends my code for applying Twine tags to passage divs, and extends on it as a mechanism for CSS selection. What these macros do, in order, is add a tag to the current passage's tag attribute, remove a tag, and toggle its presence (remove it if it's there, add it if it isn't). This means that conditional application of CSS, controlled by << if >> statements, is possible.
  
  Usage examples: <<addtag "dream">> <<toggletag "lightworld">> <<removetag "darkworld">>
• 0Bennyman

  November 2014

  Awesome thanks!