0 votes
by (120 points)
My code currently:

tw-passage img { display: block; margin: 0 auto; }

tw-story {
    background-image:url("https://i.postimg.cc/Hs885fSh/LIQUID-GOLD-1024.gif");
      background-size: cover;
}
tw-sidebar {
display: none;
}

tw-story { font-family: monaco, monospace, helvetica, sans-serif; font-size:100%; color: white; background-color: white; }

tw-link, .enchantment-link {
    color: #A2A18D;
}

tw-link:hover, .enchantment-link:hover {
    color: #ccb25f;
}

.visited {
    color: #ccb25f;
}

.visited:hover {
    color: #ccb25f;

I've tried using several methods but haven't been able to figure it out. All I want is a box that goes around only text for each passage of my game so that it can be more readble with the background image I currently have. I'm very, very new to coding and would greatly appreciate any feedback in how to accomplish this!

1 Answer

0 votes
by (560 points)

Try adding this to your stylesheet.

tw-passage{
	text-indent: 2em;
	margin-top: 0;
	margin-bottom: 0;
	background-color: transparent;
	background-color: rgba(34, 34, 34, 0.6);
	padding: 10px;
}

 

by (144k points)

To create a semi-transparent grey background the only part of this CSS example you actually need is the following..

tw-passage{
	background-color: rgba(34, 34, 34, 0.6);
}

... the rest of the CSS properties are just to make the text within the passage area look nicer.

Welcome to Twine Q&A, where you can ask questions and receive answers from other members of the community.

You can also find hints and information on Twine on the official wiki and the old forums archive.

See a spam question? Flag it instead of downvoting. A question flagged enough times will automatically be hidden while moderators review it.
...