Adding border around a text section in a passage.

Question

Hello, fellow creators. I am having a little problem with something I want to do. I am using Twine 1.4.2 and the Sugarcane story format.

I am trying to put a border around a section of text, separating character dialogue from regular narrative.

This is the CSS code:

span.message {
	border-style: solid;
	border-width: 3px;
	border-radius: 2em;
	border-margin: 10%;
}

Then, in the passage, I write it like this:

<span class="message">//"Hello World!"//</span>

Basically, I want to put the "Hello World" inside a message box, like the old RPG games. Can someone tell me what is wrong with my code?

Answer 1

You're not doing anything wrong, as such, but there are a few caveats:

• "border-margin" is not a valid CSS property (and so gets ignored). Are you sure you don't mean to put something like "padding: 5px;" there?
• You don't set "border-color" to anything, so it's simply inherited from the parent elements. Which might mean that it's the same colour as the background - or transparent. Set something like "border-color: red;" and see if it helps.
• Are you sure you set the CSS in the right place? Can you check if it is applied in the developer view (typically accessed by hitting F12) of your browser?

Comments

You're right, aboute everything above (though the CSS is indeed the right place). The thing is, I changed <span> to <div> in both the stylesheet and the passage, and it worked perfectly. Padding was also the property I needed to get the text off the edge of the border.

Final CSS:

div.message {
	border-style: solid;
	border-width: 3px;
	border-radius: 1em;
	padding: 10px;
}

And in passage:

<div class="message">//Hello world!//</div>

Thank you!

---

Well, <span> elements also tend to collapse the white-space around them, so it might also have been the borders being simply "behind" whatever is around the <span>. For this, there's always "display: inline-block;".

Answer 2

... and the Sugarcane story format.

I strongly suggest you don't use the Sugarcane story format and change to the SugarCube 2 story format instead, or at least to the SugarCube 1 story format if you want the same look and feel.

The main reasons I make this suggestion are:

1. The Sugarcane story format has not been updated since mid 2015 and as such it makes some assumptions about how web-browsers work that are no longer valid, in particular about what is allowed when the story HTML file is run locally. This is also true with the other (vanilla) story formats that come pre-installed with the Twine 1.x application.

2. SugarCube is a much more feature rich story format and it has the same macro syntax as the vanilla story formats, so the TwineScript migration should be mostly painless. There are some differences with the CSS structure that will need to be handled manually, but if you haven't modified the look-an-feel of your story yet then this won't be a problem either.

3. I suggested using SugarCube 2 over SugarCube 1 because the 1.x series of the story format is not longer being actively developed, where as the 2.x series was last updated on the 14-jul-2017.

Instructions on how to download and install the story format can be found on the SugarCube v2 Installation page of it's documentation.

note:

If you do decide to change to SugarCube then the answer supplied by @Akjosch will still work, or you could use the story format's Custom Style feature instead of the span element like so:

@@.message;//"Hello World!"//@@

 

Comments

Alright, I will see if I can import SugarCube 1 into my Twine 1.4.2. The Twine 2 version, although lovely, is not installing on my computer due to a complex dll problem.

Thank you for the tip, too!

EDIT: I see that the SugarCube 2 has a version for Twine 1.4.2. I think I can import that one.