Avatars with dialogue text box

If you are requesting technical assistance with Twine, please specify:
Twine Version: 2.3.16
Story Format: 2.36.1

I have successfully implemented the avatars with dialogue from my previous question.

However the text box that displays has white lines that I would like to remove. I have almost no knowledge of JavaScript, so I do not want to tinker with this code without the advice from someone more experienced than I am.

Ideally, if I could also make the text box not extend all the way across the page, maybe only to 70-80% of the width, that would be great

This is the code that I was pointed to:

// speech.min.js, for SugarCube 2, by Chapel
// v1.1.1, 2021-04-20, 53d1a20e9321b3782a303cf7dbe00f5c51e947db
;!function(){"use strict";var a=new Map;function t(t,e,r){if(void 0===r&&e&&(r=e,e=null),State.length)throw new Error("addCharacter() -> must be called before story starts");t&&r?(a.has(t)&&console.error('addCharacter() -> overwriting character "'+t+'"'),a.set(t,{displayName:e,image:r})):console.error("addCharacter() -> invalid arguments")}function e(t,e,r,s){var n=$(document.createElement("div")).addClass(Util.slugify(e)+" say"),i=a.has(e)?a.get(e).image:null,o=$(document.createElement("img")).attr("src",s||i||"");o.attr("src")&&o.attr("src").trim()&&n.append(o);var c=e.toUpperFirst();return a.has(e)&&a.get(e).displayName&&(c=a.get(e).displayName),n.append($(document.createElement("p")).wiki(c)).append($(document.createElement("p")).wiki(r)),t&&(t instanceof $||(t=$(t)),n.appendTo(t)),n}setup.say=e,setup.addCharacter=t,Macro.add("character",{handler:function(){t(this.args[0],this.args[1],this.args[2])}}),$(document).one(":passagestart",(function(){var t=Array.from(a.keys());t.push("say"),Macro.add(t,{tags:null,handler:function(){"say"!==this.name?e(this.output,this.name,this.payload[0].contents):e(this.output,this.args[0],this.payload[0].contents,this.args[1])}})}))}();
// end speech.min.js

Thanks in advance.

Rather than editing the code, you can just change the CSS. Create a passage tagged stylesheet and enter these lines

This line gets rid of the line under the name

.say p:first-of-type {border-bottom: none}

To get rid of all the “outside” lines:

.say {border: none}

To reduce the width, you can do this, though it seems it will also reduce the avatar size

.say {width: 75%}

If any of these do not override the default style, try adding the word !important at the end, eg.

.say p:first-of-type {border-bottom: none !important}
1 Like

Thnak you once again.