CSS Help - Changing the Background for a Specific Passage

esteph · November 2015

Hello!
I am rather new to Twine, and am using version 1.4.2. My theme is sugarcane.
I'm trying to make different background images for each passage, and my instinct is to do this with my CSS stylesheet, but I cannot figure out how to do it. I thought that creating a tag for each passage and then calling it in the CSS with #specificpassage {/*css code here*/} in the stylesheet would work, but it has no effect. I also tried calling the tag as a class in CSS, so .specificpassage {/*more css*/} but this didn't work either. I tried calling the CSS on a specific passage name as well (not the tag) but this wasn't working either. Any advice on how do get passage-specific background imaging done?
Thank you!

greyelf · November 2015

warning: If you are planing on having a downloadable copy of your story then any person using a recent version of either Chrome or Opera may not be able to navigate through your story due to the way Sugarcane handles History. Changing to another story format like SugarCube would fix this potential problem.

If you look at the HTML generated by Sugarcane for a passage with a tag you will see something like the following, a number of parts have been replace with ... because they are not relevant to this topic.

<body data-tags="forest">
	...
	<div id="passages">
		<div id="passageStart" class="passage" data-tags="forest" ...>
			...
		</div>
	</div>
	...
</body>

... as you can see the tag forest is added as a data-tags attribute to both the body element as well as the .passage classed element.

So depending on if you want the background image to cover the whole page or only the passage text section you would use one of the following two CSS selectors:

body[data-tags="forest"] {
	/* This affects the entire page */
}

.passage[data-tags="forest"] {
	/* This only affects passage area */
}

... obviously replacing the string "forest" with whatever your tag is.

esteph · November 2015

Thank you so much!

Howdy, Stranger!

Categories

CSS Help - Changing the Background for a Specific Passage

Comments