CSS for lines?

Question

Hi all,

I am new to using CSS, especially in Twine, but I noticed that by typing hyphens across the passage, you can make a solid line across the played version. Is there a way I can edit its color in the Stylesheet? Thanks!

Answer 1

SugarCube converts four (or more) continuous hyphens into a HTML horizontal rule (hr) element.

To determine that elements current styling you can either locate the hr selector rule within the SugarCube 2's core.css file referenced in the CSS page of its documentation; or use you web-browser's built-in Developer Tools to Inspect that element to see the associated CSS styling. Whichever method you use you would see it looks something like the following.

hr {
	display: block;
	height: 1px;
	border: none;
	border-top: 1px solid #eee;
	margin: 1em 0;
	padding: 0;
}

 

The colour value of the border-top property is what is determine the line's colour, and you can use a CSS border-top-color property like the following to alter it to whatever valid colour value you like.

#passages hr {
	border-top-color: red;
}

NOTE: The above CSS needs to be placed either in: A. your story's Story Stylesheet area if using Twine 2; or B, in your story's stylesheet tagged passage is using Twine 1.