0 votes
by (250 points)
Hi,

I have some CSS in my Twine story, that I'm using to make character text a little more readable:-

<div class="container chloe">
  <img src="images/chloe/face.jpg" alt="Avatar" style="width:100%;">
  <p>Hello.</p>
</div>

Just a simple box with an image, and some text, I have a .container, then another named container for each character (too change color and such).  This work fine, I can reuse it and there are no issues.

I was reading the Twine/Sugarcube documentation, and came across Inline Styling, I've been doing some playing, trying to reduce the amount of code needed, but I can't seem to make it work:-

@@.container.chloe;Hello again@@

This displays the colour, but makes a mess of the box.  I've also tried adding the image, but it jumps out of the box.  

@.container.chloe;<img src="images/chloe/face.jpg" alt="Avatar" style="width:100%;">Hello again@@

I just can't work out how to get it working.

Can anyone point me in the right direction, or suggest what I'm doing wrong?

Thanks

Maso

1 Answer

0 votes
by (68.6k points)
selected by
 
Best answer

You're using the inline version of the custom styles markup, which renders into a <span>.  If you want a block, then you need to use the block version, which renders into a <div>.  The documentation makes note of these transformations.

For example, you want something like the following (notice the line breaks):

@@.container.chloe;
Hello again
@@

NOTE: Wrapping this within a no break feature will make it function as the inline version, since you're removing the line breaks, so don't do that.

by (250 points)
Thank you, this worked great.
...