Trying to mark/highlight text in Sugarcube

Authoring Twine
,
1

Hello again!

I’m trying to make my story text stand out from its background, but feel as if I’m making it much harder than it needs to be.

What I want is to make a semi-transparent black box to sit underneath the text, as in the following example:

decade-memoir-8_004
decade-memoir-8_0041366×768 89 KB

I’m still deciding whether or not to have one single box for the entire text in one passage or several. I’ve been using the following code in my story stylesheet:

div.message {
  background-color: rgba(0,0,0,0.8);
  border-radius: 5px;
  padding: 8px 8px 8px 8px;
}

And the following in the story passages:

<div class="message"> Texty text </div>

The problem I’m having is that the closing div tag disappears when combined with if statements. I just feel as if there’s a much easier way to approach this and would appreciate any advice.

Twine Version: Twine 2
Story Format: 2.30

2

If you do want several ‘boxs’ then you could replace the whole <div class="message"> Texty text </div> with the usage of a paragraph element like so…

<p>Texty text</p>

…and then change your CSS selector to something like…

.passage p {
	/* assign properties here */
}

In regards to the styling of the whole of the ‘passage area’… If you use your web-browser’s Developer Tools to Inspect the HTML structure of the current page you will see the ‘main’ area looks something like…

<div id="story" role="main">
	<div id="passages">
		<div id="passage-start" data-passage="Start" class="passage">
			/* Content of the Start passage... */
		</div>
	</div>
</div>

So you could target the #passages identifier with your 'semi-transparentstyling and the.passageCSS class with your 'black' based styling. (you would likely need to adjust theheight` properties of each element)

#passage {
	/* properties to make the background semi-transparent and the correct 'height' */
}
.passage {
	/* properties to make the background black with the correct margins/padding *.
}