Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

Is it possible to use passage tags to style tw-story or tw-passage? Harlowe 1.2.2, Twine 2.0.11

I've successfully changed my background image depending on passage tags. I'd like to also make some adjustments to the CSS of the tw-story or tw-passage elements. Is that possible? Could I do something like this:
tw-passage.class1 {
background-colour: #fff;
}
tw-passage.class2 {
background-colour: #000;
}

Or perhaps using a different method?

Thanks!

Comments

  • I found that it is possible, but you have to adjust the header script as well. Greyelf's script which I used is this:
    {
    (print: "<script>$('html').removeClass(\)</script>")
    (if: (passage:)'s tags's length > 0)[
    (print: "<script>$('html').addClass('" + (passage:)'s tags.join(' ') + "'\)</script>")
    }
    

    I added this:
    (print: "<script>$('tw-passage').addClass('" + (passage:)'s tags.join(' ') + "'\)</script>")
    ]
    

    Once that was in the header-tagged passage, I was able to write different CSS for tw-passage.class1, tw-passage.class2, etc.

    I may have to do it for tw-sidebar too, to make sure everything matches.

    Is there a downside to this that I'm not seeing?

  • or you could use my original script as is and use the follow CSS selectors:
    html.class1 tw-passage {
    	background-colour: #fff;
    }
    html.class2 tw-passage {
    	background-colour: #000;
    }
    
    ... either way works.
  • Thanks, Greyelf! I'll try it that way too, see if I can get it less clunky.
Sign In or Register to comment.