I simply want to add a background colour to my text to make it stand out when the background has light areas. I prefer to use white text, and don’t want to darken my background images.
I could only find this topic relating to Harlowe, so any help would be greatly appreciated.
If you are changing the background for just a few words, you might try this: <span style="background-color: grey">Text</span>
For an entire section of the text, you can do this. <div style="background-color: grey">Text</div>
You can also add shadows: <span style="text-shadow: 4px 4px grey">Text</span>
Or just change the color of the text itself: <span style="color: blue">Text</span>
See this page for more advanced ways to adjust colors and text.
As I noted in the other thread, sometimes Twine’s CSS will conflict with CSS you find elsewhere…but this one shouldn’t conflict because text styling is pretty basic.
First of all, a black shadow won’t show up on Twine’s black background. You said that you had background images, so maybe this isn’t the problem. Still, for testing purposes, I’m going to use red to make it more visible.
We also need to choose a selector. Text isn’t a valid selector, p is a valid HTML element and thus a valid selector but it isn’t ideal in this case.
Instead there are a few options.
To apply the shadow to every passage in the story, put this in one of your stylesheets (that is, inside a passage tagged stylesheet). .passage {text-shadow: 2px 2px 2px red;}
If you want to do this in just one passage instead of every passage, you can instead add this at the end of one story passage — not in a stylesheet.