Styling NVL Mode Text-Boxes with Classes

Lowpostz

Hi all, I've have some questions about the text-box. If I want to style the text-box per scene, do I need to add classes using javascript functions each scene? Also, how would I make a scene without the dialog? Thanks! Context:

I want to place dialogs using classes such as .left .right .bottom and .top, so I can have fixed locations for the text-box to appear each scene. Also how can I remove type animation per scene?

remeranAuthor

I've experimented with styling NVL Mode dialog boxes a lot. You can see some of my experimentation here.
https://newrem.com/monogatari/comicgame/
With this being a link to the main.CSS file:
https://newrem.com/monogatari/comicgame/style/main.css
And script.js
https://newrem.com/monogatari/comicgame/js/script.js

I came up with two interesting solutions to styling NVL Dialog in interesting ways. The first way is by using speaking characters. You can define a character as having NVL Mode.

'hl': {
	name:"Heather",
	color: "brown",
	nvl:true,
	type_animation:false,
},

Then use CSS Query Selectors to select specifically the divs that are in NVL mode with specifically that character speaking.

text-box[mode=nvl] p div[data-spoke="hl"]{
    /*rules here*/
}

And then put whatever styling magic rules you want. In my case, I wanted it to look like the character was speaking in a text bubble like a comic book.
Image of Heather telling Alex something in Monogatari, designed to look like a comic book.

You'd use different characters for all of your different styled boxes. Since you can give characters the same "Name" in the dialog log this all works out.

However, for my purposes, I found a better option which was simply that Monogatari allows you to use HTML inside of one of the dialogues!

	'mikaComic':[
		"clear",
		"show scene gray",
		"show image mika1 with topleftpanel fadeInLeft",
		`mp <div class="animated panel1 speechBubble rightTail fadeInRight">Wow it sure is SPOOKY out here in the woods.</div>`,
		"show image mika2 with toprightpanel fadeInRight",
		`mp <div class="animated panel2 speechBubble rightTail fadeInLeft">Or... wait this is a Christmas tree farm?</div>`,
		"show image mika3 with bottompanel fadeInDown",
		`mp <div class="animated panel3 speechBubble leftTail fadeInDown">Remi, how long did you spend on this? This feels like a <br /> 1-minute-each amount of effort.</div>`,
	],

With this, I just have to CSS up the div with its classes, and that's pretty easy. Be aware, however, if you do it like this, you need specific rules to only select things that are inside of the Monogatari Game window, and not ones that just select the div uncritically, because if you do, it will also affect the way things look inside of the Log!

Lowpostz

Thanks for that, I'll try it out!