Chat Theme for NVL mode

🏆️ This is a sponsor-only post, if you're seeing it, that means you are amazing and thanks to your support Monogatari keeps getting better every day, thanks a lot! Please don't share or distribute the contents of this post, usage in your game is of course permitted though!

This is a very simple but cool theme for the NVL mode that will make it look like a chat conversation! Choices for NVL mode also have a custom look that will make them fit better with the overall chat-like feel.

Samples

Want to see how it looks? Here are some samples:

• Sample Game
• Video
• GIF
• Screenshot

Adding it to your game

Adding this theme to your game is really simple and you'll only need to modify two files!

1. options.js

It's recommended that you disable the typing animation on NVL mode by setting the NVLTypingAnimation property to false. While technically you could leave it enabled, it looks weird on the chat bubbles since it makes them grow as it types the dialog out.

2. main.css

This is where all the magic happens. First, let's add the following code, you can add it anywhere in your file but this part may be better to have it right on top.

:root {
    --chat-background: transparent;
    --chat-bubble-default-background: #424242;
    --chat-bubble-default-text-color: #fff;

    --chat-choice-container-animation: slideInUp;
    --chat-choice-container-background: #fff;
    --chat-choice-button-background: #ec407a;
}

That's the code that will let you configure many of the styling for the chat. Let's see what each of those variables does:

Chat Variables

• --chat-background: The background for the text-box element, in this case, the background for the whole chat screen.
• --chat-bubble-default-background: The default background for the chat bubbles. This is the background that will be use for the dialogs coming from the narrator or any character with no style definition (more on this in a bit).
• --chat-bubble-default-text-color: The default color for the text on the chat bubbles.

Choices Variables

• --chat-choice-container-animation: The animation to use when showing the choices, if you don't want it to show up with an animation, you can set this to none.
• --chat-choice-container-background: The background to use for the container that holds all the options.
• --chat-choice-button-background: The background to use for the choice buttons.

Now that you have your configuration set, you can add the rest of the styling needed, this time you can add it anywhere you'd like in your file.

quick-menu {
    z-index: 11;
}

.nvl choice-container {
    animation: var(--chat-choice-container-animation);
    background: var(--chat-choice-container-background);
    bottom: 0;
    box-shadow: inset 0 0 5px -2px #424242;
    animation-duration: 0.3s;
}

.nvl choice-container button {
    border-radius: 4px;
    width: 100%;
    background: var(--chat-choice-button-background);
}

text-box.nvl {
    background: var(--chat-background);
}

text-box.nvl [data-content="dialog"] {
    display: flex;
    flex-direction: column;
}

text-box.nvl p {
    padding: 0;
}

text-box.nvl [data-spoke] {
    border-radius: 5px;
    padding: 1em;
    display: inline-block;

    background: var(--chat-bubble-default-background);
    color: var(--chat-bubble-default-text-color);
    font-size: 1em;
    margin: 1em 0.5em;
    max-width: 60%;
}

text-box.nvl [data-spoke] > span {
    display: none;
}

At this point, you should already be seeing the chat interface when using the NVL mode, but all the chat bubbles will have the same color and all will appear on the left side. We want to be able to specify the color of the bubble depending on the character speaking and probably, show the dialogs of the "main/player" character on the right side as it would appear on a real chat.

Doing that is also quite simple, for any character you want to specify a custom styling, you just need to add a block like this one, replacing the <character_id> part with the identifier of the character you're making this style for.

text-box.nvl [data-spoke="<character_id>"] {
    background: #00bcd4;
}

Should this dialog appear on the right? That just needs adding one more property!

text-box.nvl [data-spoke="<character_id>"] {
    background: #00bcd4;
    align-self: flex-end;
}

And that's it! You now have an amazing chat look and feel.