Sugarcube 2 transferring an online css stylesheet

Authoring Twine
1

If you are requesting technical assistance with Twine, please specify:
Twine Version: Twine 2
Story Format: Sugarcube 2

Hi, so I’m trying to get a parchment background on my game and I found this beauty online https://codepen.io/AgnusDei/pen/NWPbOxL.

It’s awesome, exactly what I needed, so I found the bits I’ll like to use and copy-paste it into the stylesheet, except two things.

One, twine doesn’t let the background element and the text element overlap, there will be a strip on the background on top and the words all below it.

I’ve tried many things, putting the text element inside the background element solves that issue but another one pops up, the thing at the bottom which makes the ragged edges also does that to the words and I have no idea how to fix this.

Or if this is not fixable, where can I find examples for a different parchment-like background?

Thanks!

2

Here is a simpler way of doing it. I tested it with the attached image, free from Pixabay with no attribution required if you choose to use it.

Extract it, put in your main folder next to the game’s main .html, then name it paper.png

paper.zip (865.9 KB)

Now insert this in your stylesheet

#passages {background-image: url(paper.png); background-size: 100% 100%; background-repeat: no-repeat; min-height: 900px; padding: 10%; color: black}

Basically this will stretch the background to your passage height (which is determined by the amount of text) or 900 pixels, whichever is larger. You may want to change the min-height value to something smaller but it will not look much like a piece of paper if you make the height too short.

You can replace the image with your own of course

3

The HTML structure of the main Story area of a SugarCube project looks something like…

<div id="story" role="main">
	<div id="passages">
		<div id="passage-start" data-passage="Start" class="passage">
			/* The contents of the 'current' Passage goes here... */
		</div>
	</div>
</div>

The CSS rules you linked to is expecting a specific HTML structure, as shown in the HTML panel in the CodePen editor. So you will likely need to rename some of the CSS selectors being used by those rules (eg. #parchment to #story) for it to work correctly with the default SugarCube HTML structure.

4

the thing at the bottom which makes the ragged edges also does that to the words and I have no idea how to fix this.

Based on this sentence, it seems like the ‘padding’ property is what you were missing, but without seeing the css it is hard to say for sure