Changing tw-story color based on passage tags

Authoring Twine
1

Twine Version: 2.11.1

Hi everyone,

I’m trying to change the color of my story background based on the passage tags. Another simple thing, right? Except I can’t find a way to change the entire page. The passage block changes color nicely, but the story color stays static.

This is what my CSS code looks like right now:

tw-story [tags~=“white”] {
background-image: linear-gradient(to right, white, purple);
color: black;
}

tw-story [tags~=“black”] {
background: #141414;
color: white;
}

tw-story [tags~=“blue”] {
background: #97B4E8;
color: black;
}

tw-story [tags~=“red”] {
background: #C4768C;
color: black;
}

tw-story [tags~=“green”] {
background: #BCE3AC;
color: white;
}

The point is to make combinations of color tags show different color gradients, but before I go choosing color gradients I want to actually get it to work first. This was me testing stuff out.

tw-story {
background: #C4768C;
}

The above will change the background part I’m trying to change, but it doesn’t target the tags.

I really appreciate any help.

1 Like
2

Try removing the space between tw-story and the [tags~="whatever"] – in a CSS selector a space means “descendant of” so you’re looking for the tag on some element nested arbitrarily deeply within tw-story, rather than looking for it on the tw-story element itself.

3 Likes
3

That worked! Thanks so much!

Do you also happen to know if there’s a way to remove the HTML/body border around the tw-story element? Or for it to mimic the same value as the tw-story element? I can deal with a white border, but if there’s a way to remove it…

1 Like
4

Huh. I don’t think there should be a white border: do you have other CSS?

1 Like
5

Oh! Good call. One of the bits I copied for other CSS was the problem, easy fix. Thanks for the help.

2 Likes