Changing background and stylesheet on Twine 2 Sugarcube 2.21.0

Question

I found a neat theme on the web that I'm using for my game, but I'm trying to figure out how to apply it to certain passages instead of my entire story. I placed the code in my style sheet and put the compiled HTML in a passage and everything works great.  The question I have is how can I make this passage specific? Can I also make it like a shadow box type style inside a passage?

Answer 1

You can assign the related passages a know Passage Tag (like terminal for instance) and then use CSS in your Story Stylesheet area to target only passages that have that known tag assigned to it.

The SugarCube engine will automatically add the known tag to a number of places within the HTML structure of the passage when it is shown, for your purposes I would use either the body element's data-tags attribute or the div.passage element's data-tags attribute. So if your passage tag was named terminal then the base CSS selector you would use would be either...

body[data-tags~="terminal"]

.passage[data-tags~="terminal"]

You would append one of the above bases to any other CSS seletors that you only want to activate when a passage has been assigned the known tag. For example the h1 selector in the cyberpunk example may look somthing like.

.passage[data-tags~="terminal"] h1 {
	font-size: 4rem;
	margin-bottom: 1rem;
	text-transform: uppercase;
}

note: You may be able to convert the HTML and CSS of the cyberpunk example to use SugurCube's existing HTML structure for a number of the example's div elements.

For example you might be able to use SC's #story div element as a replacement for the example's div.frame element, SC's #passages div element or div.passage element as a replacement for the example's div.output element, and CSS