Background color for text in SugarCube

Authoring Twine
1

Twine Version: 2.3.16
Story Format: 2.36.1

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.

2

There are a few things you might find useful.

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.

1 Like
3

I would like to change all base text to have either a background colour, or a shadow, what do I add to CSS?:

I tried both:

text {text-shadow: 4px 4px black;
}

and this, as in HTML5?

p {text-shadow: 4px 4px black;
}

but neither had any effect that I could see. Does Twine 2, SugarCube have another preference, or am I barking up the wrong tree altogether?

4

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.

<style>.passage {text-shadow: 2px 2px 2px red}</style>

To apply to the shadow to every passage plus the sidebar, create a stylesheet with:
body {text-shadow: 2px 2px 2px red}

Note that the numbers are horizontal offset, vertical offset, and blur

1 Like
5

Thank you again. That is perfect.

1 Like