How to create bordered text boxes with profile picture?

Authoring Twine
1

Please specify version and format if asking for help, or apply optional tags above:
Twine Version: 2.3.9
Story Format: Sugarcube

Creating my first story on Twine, and looking to include features I’ve notices from other stories, such as speech boxes with profile pictures like the one featured below. Can anyone assist?

sample

2

That looks like Chapel’s Speech Box custom macro, but with some changes to the CSS.

Using it requires CSS and JavaScript (provided in the above link), which you need to copy and paste into your game into the “Edit Story Stylesheet” and “Edit Story JavaScript” passages.

1 Like
3

I’m pretty sure there are way better ways to do this, but I was struggeling with the same thing. This is how I got it to work:
I created a definition for the table in the CSS:

table.speech {
  width="700px";
  height="100%";
  border: 2px solid #444444;;
  vertical-align: top;
}

Now when I want a character to say something I use a table like below:

<table class="speech" width="700px">
  <tr align=left>
    <td><img src="images/profilePic.jpg" alt="pic" width=100px px/></td>
    <td style="text-align:left" width=600px>Maybe we should stop talking about it and start showing it.</td>
  </tr>
</table>\

Again, I think there must be way simpeler ways to get the same result (or even way better), but this is how I managed to get it to work.

4

Wish I found that before … looks better then what I’ve got.
:rofl: :rofl: :rofl: