So I was wondering if it was possible to prevent the white borders from returning when the player loads there game. The code I have for the borders currently makes them black, but after saving and loading the game back up (download) it turns the borders white again. Is there a way to prevent this? Here's the code.

JS.eval ("$('#dialog_window_1').css('background-color', 'black');")
JS.eval ("$('body').css('background-color', 'black');")
JS.eval ("$('#gameBorder').css('background-color', 'black');")

All this, gives my game it's current look. And the previous Function from HaganeSteel and Jon..

JS.eval ("$('#statusVarsLabel').insertBefore('#inventoryLabel')")
JS.eval ("$('#statusVarsAccordion').insertBefore('#inventoryLabel')")
JS.eval ("$('#compassLabel').insertBefore('#inventoryLabel')")
JS.eval ("$('#compassAccordion').insertBefore('#inventoryLabel')")
JS.eval ("$('#placesObjectsLabel').insertBefore('#inventoryLabel')")
JS.eval ("$('#placesObjectsAccordion').insertBefore('#inventoryLabel')")
JS.eval ("$('#gamePanes').css('background-color', 'rgba(0, 0, 0, 0)')")
JS.eval ("$('#statusVars').css('background-color', 'black')")
JS.eval ("$('#statusVars').css('color', 'grey')")
request (SetInterfaceString, "PlacesObjectsLabel=Objects")
JS.eval ("$('#inventoryAccordion.ui-widget-content').css('background', 'black')")
JS.eval ("$('#inventoryAccordion.ui-widget-content').css('color', 'grey')")
JS.eval ("$('#statusVarsLabel').css('background', 'black')")
JS.eval ("$('#statusVarsLabel').css('color', 'grey')")
JS.eval ("$('#inventoryLabel').css('background', 'black')")
JS.eval ("$('#inventoryLabel').css('color', 'grey')")
JS.eval ("$('#placesObjectsLabel').css('background', 'black')")
JS.eval ("$('#placesObjectsLabel').css('color', 'grey')")
JS.eval ("$('#placesObjectsAccordion.ui-widget-content').css('background', 'black')")
JS.eval ("$('#placesObjectsAccordion.ui-widget-content').css('color', 'grey')")
JS.eval ("$('.ui-state-active').css('border', '1px solid lightgrey')")
JS.eval ("$('.ui-widget-content').css('border', '1px solid grey')")
JS.eval ("$('#gamePanesFinished').html('<h2></h2>')")
JS.eval ("$('.ui-button').css('background', 'black')")
JS.eval ("$('.ui-button').css('border', '1px solid grey')")
JS.eval ("$('.ui-button-text').css('color', 'grey')")
JS.eval ("$('.ui-button').mousedown(function() { $(this).css('background-color', 'grey'); } )")
JS.eval ("$('.ui-button-text').mousedown(function() { $(this).css('color', 'black'); } )")
JS.eval ("$('#gameBorder').mouseup(function() { $('.ui-button-text').css('color', 'grey'); } )")
JS.eval ("$('#gameBorder').mouseup(function() { $('.ui-button').css('background-color', 'black'); } )")
JS.eval ("var styleSelecting = $('<style>.ui-selecting { color: black; background-color: grey;}</style>'); $('html > head').append(styleSelecting)")
JS.eval ("var styleUnselecting = $('<style>.ui-unselecting { color: grey; background-color: black;}</style>'); $('html > head').append(styleUnselecting)")
JS.eval ("var styleSelected = $('<style>.ui-selected { color: black; background-color: grey;}</style>'); $('html > head').append(styleSelected)")
JS.eval (" var arrowUrl = 'images/ui-icons_f9bd01_256x240.png'; var styleArrow = $('<style>.ui-state-default .ui-icon { background-image: url('+ arrowUrl +'); }</style>'); $('html > head').append(styleArrow) ")
JS.eval ("$('#cmdCompassN').css('background', 'black')")
JS.eval ("$('#cmdCompassE').css('background', 'black')")
JS.eval ("$('#cmdCompassS').css('background', 'black')")
JS.eval ("$('#cmdCompassW').css('background', 'black')")
JS.eval ("$('#cmdCompassNW').css('background', 'black')")
JS.eval ("$('#cmdCompassNE').css('background', 'black')")
JS.eval ("$('#cmdCompassSW').css('background', 'black')")
JS.eval ("$('#cmdCompassSE').css('background', 'black')")
JS.eval ("$('#cmdCompassU').css('background', 'black')")
JS.eval ("$('#cmdCompassIn').css('background', 'black')")
JS.eval ("$('#cmdCompassD').css('background', 'black')")
JS.eval ("$('#cmdCompassOut').css('background', 'black')")
JS.eval ("$('#cmdCompassN').css('border', '2px solid grey')")
JS.eval ("$('#cmdCompassE').css('border', '2px solid grey')")
JS.eval ("$('#cmdCompassW').css('border', '2px solid grey')")
JS.eval ("$('#cmdCompassS').css('border', '2px solid grey')")
JS.eval ("$('#cmdCompassNW').css('border', '2px solid grey')")
JS.eval ("$('#cmdCompassNE').css('border', '2px solid grey')")
JS.eval ("$('#cmdCompassSE').css('border', '2px solid grey')")
JS.eval ("$('#cmdCompassSW').css('border', '2px solid grey')")
JS.eval ("$('#cmdCompassIn').css('border', '2px solid grey')")
JS.eval ("$('#cmdCompassOut').css('border', '2px solid grey')")
JS.eval ("$('#cmdCompassU').css('border', '2px solid grey')")
JS.eval ("$('#cmdCompassD').css('border', '2px solid grey')")
JS.eval ("$('#compassLabel').css('background', 'black')")
JS.eval ("$('#compassLabel').css('color', 'grey')")
JS.eval ("$('#compassAccordion').css('background', 'black')")
JS.eval ("$('#status').css('background-image', 'none')")
JS.eval ("$('#status').css('background-color', 'black')")

Anyone know? Or having problem?

This rang a bell from a post quite a while back. Searched for quite a while but eventually found it so I hope it's helpful!!

viewtopic.php?f=10&t=5754

That's a lot of code to sift through. If I'm not mistaken though, Alex has or has to solve the error first. My game is the desktop version too, not online. I probably only have to add a little tiny thing to it, but there's so much code on that page I don't know which one to add! xD BTW Xan, I appreciate you taking the time to look for that for me! Thank you! Now I just have to figure out which part I need to add lol.

That thread was about the border on the command box. Is that what you are talking about too, Neonayon?

Is your code that should be setting the border inside a function called InitUserInterface? That function is run when the player loads a game, so all styling needs to go in there.

You have this:

JS.eval ("$('body').css('background-color', 'black');")
JS.eval ("$('#gameBorder').css('background-color', 'black');")

The first line sets the colour of the margins. Despite the name, the second line sets the colour of the rest of the screen, where the text appears, the panes, etc. I suspect what you want is the border of that element (so the border of the border!) to be black, so adding this line maybe what you need:

JS.eval ("$('#gameBorder').css('border-color', 'black');")

You should add a function InitUserInterface to your game (Best way is to activate Filter/Show Library Elements and search for InitUserInterface. Then you can copy the function into your game). Into this functions you can copy all off your JS commands.

You should add a function InitUserInterface to your game (Best way is to activate Filter/Show Library Elements and search for InitUserInterface. Then you can copy the function into your game). Into this functions you can copy all off your JS commands.

I already have the InitUserInterface Function. That big chunk of code I posted from the open of the discussion came from that and the few lines of code above it are on my "start-up" script of the game.

My specific problem was...let's say you download my game. You have the Quest file and load it. It appears as it's supposed to, but eventually you have to "save" and go somewhere. Well, when you come back to "load" that game file again, the outside/side-panes change back to white. I was just wondering if there was a way to stop that from happening.

The first line sets the colour of the margins. Despite the name, the second line sets the colour of the rest of the screen, where the text appears, the panes, etc. I suspect what you want is the border of that element (so the border of the border!) to be black, so adding this line maybe what you need:

Not quite what I was talking about...but cool!

Could you upload screen shots of before and after so we can see exactly what is happening?

Right, and perhaps you can post your complete InitUserInterface function and your startup script. By the way the function InitUserInterface is called at game start so you don't need JS commands in an extra startup script

Could you upload screen shots of before and after so we can see exactly what is happening?

Sure can! Here they are.

BEFORE


SAVING


LOAD

Right, and perhaps you can post your complete InitUserInterface function and your startup script. By the way the function InitUserInterface is called at game start so you don't need JS commands in an extra startup script.

Will do

Here's my Modified InitUserInterface Function

JS.eval ("$('#statusVarsLabel').insertBefore('#inventoryLabel')")
JS.eval ("$('#statusVarsAccordion').insertBefore('#inventoryLabel')")
JS.eval ("$('#compassLabel').insertBefore('#inventoryLabel')")
JS.eval ("$('#compassAccordion').insertBefore('#inventoryLabel')")
JS.eval ("$('#placesObjectsLabel').insertBefore('#inventoryLabel')")
JS.eval ("$('#placesObjectsAccordion').insertBefore('#inventoryLabel')")
JS.eval ("$('#gamePanes').css('background-color', 'rgba(0, 0, 0, 0)')")
JS.eval ("$('#statusVars').css('background-color', 'black')")
JS.eval ("$('#statusVars').css('color', 'grey')")
request (SetInterfaceString, "PlacesObjectsLabel=Objects")
JS.eval ("$('#inventoryAccordion.ui-widget-content').css('background', 'black')")
JS.eval ("$('#inventoryAccordion.ui-widget-content').css('color', 'grey')")
JS.eval ("$('#statusVarsLabel').css('background', 'black')")
JS.eval ("$('#statusVarsLabel').css('color', 'grey')")
JS.eval ("$('#inventoryLabel').css('background', 'black')")
JS.eval ("$('#inventoryLabel').css('color', 'grey')")
JS.eval ("$('#placesObjectsLabel').css('background', 'black')")
JS.eval ("$('#placesObjectsLabel').css('color', 'grey')")
JS.eval ("$('#placesObjectsAccordion.ui-widget-content').css('background', 'black')")
JS.eval ("$('#placesObjectsAccordion.ui-widget-content').css('color', 'grey')")
JS.eval ("$('.ui-state-active').css('border', '1px solid lightgrey')")
JS.eval ("$('.ui-widget-content').css('border', '1px solid grey')")
JS.eval ("$('#gamePanesFinished').html('<h2></h2>')")
JS.eval ("$('.ui-button').css('background', 'black')")
JS.eval ("$('.ui-button').css('border', '1px solid grey')")
JS.eval ("$('.ui-button-text').css('color', 'grey')")
JS.eval ("$('.ui-button').mousedown(function() { $(this).css('background-color', 'grey'); } )")
JS.eval ("$('.ui-button-text').mousedown(function() { $(this).css('color', 'black'); } )")
JS.eval ("$('#gameBorder').mouseup(function() { $('.ui-button-text').css('color', 'grey'); } )")
JS.eval ("$('#gameBorder').mouseup(function() { $('.ui-button').css('background-color', 'black'); } )")
JS.eval ("var styleSelecting = $('<style>.ui-selecting { color: black; background-color: grey;}</style>');  $('html > head').append(styleSelecting)")
JS.eval ("var styleUnselecting = $('<style>.ui-unselecting { color: grey; background-color: black;}</style>');  $('html > head').append(styleUnselecting)")
JS.eval ("var styleSelected = $('<style>.ui-selected { color: black; background-color: grey;}</style>');  $('html > head').append(styleSelected)")
JS.eval (" var arrowUrl = 'images/ui-icons_f9bd01_256x240.png'; var styleArrow = $('<style>.ui-state-default .ui-icon { background-image: url('+ arrowUrl +'); }</style>');  $('html > head').append(styleArrow) ")
JS.eval ("$('#cmdCompassN').css('background', 'black')")
JS.eval ("$('#cmdCompassE').css('background', 'black')")
JS.eval ("$('#cmdCompassS').css('background', 'black')")
JS.eval ("$('#cmdCompassW').css('background', 'black')")
JS.eval ("$('#cmdCompassNW').css('background', 'black')")
JS.eval ("$('#cmdCompassNE').css('background', 'black')")
JS.eval ("$('#cmdCompassSW').css('background', 'black')")
JS.eval ("$('#cmdCompassSE').css('background', 'black')")
JS.eval ("$('#cmdCompassU').css('background', 'black')")
JS.eval ("$('#cmdCompassIn').css('background', 'black')")
JS.eval ("$('#cmdCompassD').css('background', 'black')")
JS.eval ("$('#cmdCompassOut').css('background', 'black')")
JS.eval ("$('#cmdCompassN').css('border', '2px solid grey')")
JS.eval ("$('#cmdCompassE').css('border', '2px solid grey')")
JS.eval ("$('#cmdCompassW').css('border', '2px solid grey')")
JS.eval ("$('#cmdCompassS').css('border', '2px solid grey')")
JS.eval ("$('#cmdCompassNW').css('border', '2px solid grey')")
JS.eval ("$('#cmdCompassNE').css('border', '2px solid grey')")
JS.eval ("$('#cmdCompassSE').css('border', '2px solid grey')")
JS.eval ("$('#cmdCompassSW').css('border', '2px solid grey')")
JS.eval ("$('#cmdCompassIn').css('border', '2px solid grey')")
JS.eval ("$('#cmdCompassOut').css('border', '2px solid grey')")
JS.eval ("$('#cmdCompassU').css('border', '2px solid grey')")
JS.eval ("$('#cmdCompassD').css('border', '2px solid grey')")
JS.eval ("$('#compassLabel').css('background', 'black')")
JS.eval ("$('#compassLabel').css('color', 'grey')")
JS.eval ("$('#compassAccordion').css('background', 'black')")
JS.eval ("$('#status').css('background-image', 'none')")
JS.eval ("$('#status').css('background-color', 'black')")

and the game.object, Start-Script

JS.eval ("$('#dialog_window_1').css('background-color', 'black');")
JS.eval ("$('body').css('background-color', 'black');")
JS.eval ("$('#gameBorder').css('background-color', 'black');")

:O

Could you try to set the background colour black in the Display tab of game?

Just had a player around, and I found setting the textfield background in either game.start or InitUserInterface has no effect. It does work in a room script however. I would guess either some is setting it back to white after game.start and InitUserInterface have both done, or the text field is only added after game.start and InitUserInterface have both done, and they fail to do anything as it just does not exist when trying to set it.

None of which helps with a solution. I have submitted a bug report, but if you want it resolved quickly, you could try contacting Alex.
https://github.com/textadventures/quest/issues/857

Thanks Pix, Pertex. I'll try to email Alex, but he didn't respond to my last email...so either he didn't get it or he did and ignored it, haha. Should I just copy and paste a link to this board or copy paste what Pix said?

Oh and I already have the "Display" tab button set to "Black"

Last try: add this to InitUserInterface

    format=GetString(game, "commandbarformat")
    if (format <> null){
    	JS.setCommandBarStyle(format)
    }	

Last try: add this to InitUserInterface

    format=GetString(game, "commandbarformat")
    if (format <> null){
       JS.setCommandBarStyle(format)
    }   

Oh! This actually fixed the "load game" command bar. It was perfect. I guess if we (probably you) could figure out how to restore the game's black side-bars, we'd be back in business!

Would adding this do that?

    format=GetString(game, "gameBorder")
    if (format <> null){
       JS.setCommandBarStyle(format)
    }   

Upps, I didn't notice that there is a problem with the side-bars
Just do a trick. Create a small picture with the colour black and use it as a background image in the "Display" tab of game

Upps, I didn't notice that there is a problem with the side-bars
Just do a trick. Create a small picture with the colour black and use it as a background image in the "Display" tab of game

I'd rather use a code for it since that doesn't take up nearly as much game-size! xD That game.border thing won't work? What if we do...

format=GetString(game, "gameBorder")
if (format <> null){
JS.setGameBorder(format)
}

game size? a 1 black pixel sized picture needs 34 Bytes on disc. The code needs 88 Bytes. Did you test the code? Is it working?

I just tested it. It didn't seem to work. :/

I just tested it without a picture and I don't have problems with the colour in sidebars in loaded games at all. Did you put this commands

JS.eval ("$('body').css('background-color', 'black');")
JS.eval ("$('#gameBorder').css('background-color', 'black');")

into InitUserInterface, too?

Nope! That did it though! Hurrah! Thank you, Pertex! You were so incredibly helpful!

Thank you as well Xan and Pix! I appreciate it.