Posts

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:

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

Choices Variables

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.