iiYO Community

Full Version: Change the background textbox color of each speaking character
You're currently viewing a stripped down version of our content. View the full version with proper formatting.
Pages: 1 2 3

I am able to change the background color of all character's text boxes by editing the CSS file. Is there a way I can easily change one particular character's background text box color?

Example: Main character text box background should be blue, while the villain's should be red.

Current CSS for textbox:
.WSEStage .textbox, #NvlTb
    position: absolute;
    background: rgb(0, 0, 0);
    background: rgba(0, 0, 31, 0.8);  /* Changes all text boxes background color to blue */
    font-family: "Lucida Console", Monaco, monospace;
    padding: 10px;
    box-shadow: 10px 10px 40px black;
    /*     left: 10px; */
    border: 1px solid gray;
    border: 1px solid rgba(200, 200, 200, 0.8);
    border-left: 1px solid white;
    border-top: 1px solid white;
    border-left: 1px solid rgba(255, 255, 255, 0.8);
    border-top: 1px solid  rgba(255, 255, 255, 0.8);
    /*     width: 620px; */
    /*     height: 100px; */
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -o-user-select: none;
    user-select: none;

Thank you for your assistance,



Hi brg,

I don't think this is possible right now. But it should be just a little change to the engine, I can do that. It will add the name as a CSS class so that you can style the textbox differently by character name. I'll notify you when you can find it in the GitHub develop branch.


Hi C7N,

Thank you so much Big Grin


Hi again brg,

I have implemented that feature now. You can grab it from GitHub and tell me if this is what you need.

When a character with a display name is speaking, the textbox will have a "wse_character_[characterId]" CSS class. The character ID is the name by which the character is referenced in the line command, not the display name. If a character has no display name a "wse_no_character" CSS class is added to the textbox.


Hi C7N,

I checked but I did not find a develop branch that has been updated within the past 24 hours. Is this the correct url?

Thank you.


No, that is not the official repository. You can find it here:



Hi C7N,

Thank you, I just noticed the username on the link I sent. I downloaded the files and attempted to run the sample project on our webserver. But received the following messages:

MO5.Result is deprecated - use MO5.Promise instead!
index.html:14 Starting the game...
WebStoryEngine.js:5449 MO5.Result is deprecated - use MO5.Promise instead!
WebStoryEngine.js:8083 TypeError: Cannot read property 'getElementsByTagName' of null(…)
WebStoryEngine.js:8090 Uncaught TypeError: Cannot read property 'length' of undefined
I notice you're now using a MO5 datasheet, so getting this sample project to run should be my priority; If future WSE releases will use this method.


Weird, I don't get this error. Did you change something in the index.html file?

These errors basically mean that when the game starts the game.xml file hasn't been loaded. They occur in the .init() method of Game, but that is usually only called <i>after</i> the game file has been loaded.

Can you provide some code that reproduces the error?


No files have been modified.

index file:
        <title>WebStory Engine</title>
        <meta charset="utf-8">
        <link rel="stylesheet" href="styles/default.css" type="text/css" />
        <script src="bin/WebStoryEngine.js"></script>

            MO5("WSE.Game").run(function (Game) {
                console.log("Starting the game...");
                var game = new Game({
                    url: "game.xml",
                    host: typeof HOST === "undefined" ? false : HOST

Is at this pastebin link:

I'll check into our webserver but its been working fine with Webstory engine 3.x for over a year.


Edited Changes: Added additional source code lines for the errors. WS is null.

Using Dropbox as a webserver the sample Visual Novel loads just fine. However, with Dropbox file synchronization is slower and less reliable than local testing.

We normally used Http File Server (HFS) http://www.rejetto.com/hfs/ with Web Story Engine for years. Its very reliable and the speed is great since it is our local machines. So the problem is HFS cannot run the code without getting the line error. I found out more useful information about the error location.

WebStoryEngine.js:8083 TypeError: Cannot read property 'getElementsByTagName' of null(…)
WebStoryEngine.js:8090 Uncaught TypeError: Cannot read property 'length' of undefined

Uncaught TypeError: Cannot read property 'length' of undefinedGame.init @ WebStoryEngine.js:8090Game.load.fn @ WebStoryEngine.js:8062MO5.ajax.requestObject.onreadystatechange @ WebStoryEngine.js:430
I did several console.logs and discovered that WS is null:
var ws, stage, stageElements, stageInfo, width, height, id, self, alignFn, resizeFn;
        self = this;
        ws = this.ws; //ws is null
        /*Output: bus: EventBus
            debug: false
            host: false
            interpreter: Interpreter
            keys: Keys
            listenersSubscribed: false
            url: "game.xml"
            ws: null
            __proto__: Game*/
stageElements = ws.getElementsByTagName("stage"); // stageElements is undefined
Code for line 8083:
catch (e) {
Code for Line 8090:
if (stageElements.length < 1)  //Uncaught TypeError: Cannot read property 'length' of undefined
            throw new Error("No stage definition found!");
So on the WebStoryEngine.js:
if (done) {
                try {
                    statusOk = requestObject.status === HTTP_STATUS_OK;
                catch (error) {
                    statusOk = false;
                if (statusOk) {
                    onSuccess(requestObject); // This is line 430
                else {
The old WSE.js file that we've been running looks like this:
var http = new XMLHttpRequest();
        http.onreadystatechange = function ()
            //console.log("AJAX state change occured.");
            if (http.readyState === 4 && (http.status === 200 || http.status === 0))
                //console.log("File fetched.");
            else if (http.readyState === 4 && http.status !== 200)
                throw new Error("WSE: Cannot load XML file.");
I'm not sure what problem HFS is detecting that Dropbox and your webserver is bypassing. I'll continue to do research. But it seems that ws is never populated and that is the source of all the problems. I noticed the old WSE code uses "out.Game" to define several functions and the new WSE code uses just "Game" is used in the old code.

Thank you for your help.
Pages: 1 2 3