Change colors mid-game

I wanted to change colors of background+text to signal that in-game its either day or its night.

I'm just not sure how you change the background as well as all the text color in the game.
(Also if anyone has recommendations for colors for the day/night feel free to throw them in. I just want them to be pretty without making it illegible.)


There is a list of possible actions if you press the plus sign when the tabs are set to "run script". In the first uppermost list is "change background colour" and "change foreground (meaning text) colour". Choose those both one at a time, and press add. Then, in the drop down menu in each script, choose a colour, one for each.
You can see how they are written, afterwards, by switching from tabs to script mode by clicking the box in the script tab with arrows in it. Click it again and you are back in tabs.
Maybe, you know most of that, or maybe I can't explain it well, but that is how you change the colours.
Colour blends will not change and change back, or else I haven't found out how, but solid backgrounds and text change just like that.


What Jennifer recommended above will work in most cases, but if you want even more customization than what the Quest editor gives you by default, I found it easiest to edit the html directly:

// Update UI theme
    JS.setCss ("#endWaitLink", "color:"+game.defaultlinkforeground)
    JS.setCss ("#txtCommandDiv", "color:"+game.defaultlinkforeground)
    JS.setCss ("#mapLabel", "color:"+panestextlabelcolor+";background:"+paneslabelcolor+";border:1px solid "+panesbordercolor)
    JS.setCss ("#mapAccordion", "background:"+panesacordiancolor+";border:1px solid "+panesbordercolor)
    JS.setCss ("#inventoryLabel", "color:"+panestextlabelcolor+";background:"+paneslabelcolor+";border:1px solid "+panesbordercolor)
    JS.setCss ("#inventoryAccordion", "color:"+panestextcolor+";background:"+panesacordiancolor+";border:1px solid "+panesbordercolor)
    JS.setCss ("#statusVarsLabel", "color:"+panestextlabelcolor+";background:"+paneslabelcolor+";border:1px solid "+panesbordercolor)
    JS.setCss ("#statusVarsAccordion", "color:"+panestextcolor+";background:"+panesacordiancolor+";border:1px solid "+panesbordercolor)
    JS.setCss ("#placesObjectsLabel", "color:"+panestextlabelcolor+";background:"+paneslabelcolor+";border:1px solid "+panesbordercolor)
    JS.setCss ("#placesObjectsAccordion", "color:"+panestextcolor+";background:"+panesacordiancolor+";border:1px solid "+panesbordercolor)
    JS.setCss ("#compassLabel", "color:"+panestextlabelcolor+";background:"+paneslabelcolor+";border:1px solid "+panesbordercolor)
    JS.setCss ("#compassAccordion", "background:"+panesacordiancolor+";border:1px solid "+panesbordercolor)
    JS.eval ("$('.ui-state-default').css('background','"+panescolor+"')")
    JS.eval ("$('.ui-button-text').css('color','"+panesverbcolor+"')")
    JS.eval ("$('button').css('border-color', '"+panesbordercolor+"')")
   
    // Change color of ALL text currently onscreen
    JS.setCss ("div#divOutput span", "color:"+game.defaultforeground)
    JS.setCss ("div#divOutput a", "color:"+game.defaultlinkforeground)

    // Edit Pop-Up Modal Theming (if you have it)
    JS.eval ("$('.ui-widget-content').css({'background': '"+panesacordiancolor+"', 'color': '"+panestextcolor+"'});")
    JS.eval ("$('.ui-dialog-buttonpane').css({'background': '"+panesacordiancolor+"', 'color': '"+panestextcolor+"'});")
    JS.eval ("$('textarea').css({'background': '"+game.defaultbackground+"', 'color': '"+game.defaultforeground+"'});")
    if (not game.questplatform="webplayer") {
      JS.eval ("$('button.ui-dialog-titlebar-close').css({'background' : '#dfeffc url(\"images/ui-bg_glass_85_dfeffc_1x400.png\") 50% 50% repeat-x', 'border-color' : '#a6c9e2'});")
    }
    else {
      // Remove image calls and default just to colors so no errors are thrown in web player version
      JS.eval ("$('button.ui-dialog-titlebar-close').css({'background' : '#dfeffc', 'border-color' : '#a6c9e2'});")
    }
    
    // Hover & Active Rules:
    JS.eval ("$('button').not('ui-button-disabled').hover(function(){$(this).css({'background' : '"+buttonHoverColor+"'});}, function(){$(this).css({'background' : '"+panescolor+"'});});")
    JS.eval ("$('button').mousedown(function(){$(this).css({'border-style' : 'inset', 'background' : '"+buttonActiveColor+"', 'color' : '"+buttontextclickcolor+"'});});")
    JS.eval ("$('button').mouseup(function(){$(this).css({'border-style' : 'solid', 'background' : '"+buttonHoverColor+"', 'color' : '"+panesverbcolor+"'});});")
    JS.eval ("$('button').mouseleave(function(){$(this).css({'border-style' : 'solid', 'background' : '"+panescolor+"', 'color' : '"+panesverbcolor+"'});});")
    if (not game.questplatform="webplayer") {
      JS.eval ("$('button.ui-dialog-titlebar-close').hover(function(){$(this).css({'background' : '#d0e5f5 url(\"images/ui-bg_glass_75_d0e5f5_1x400.png\") 50% 50% repeat-x'});}, function(){$(this).css({'background' : '#dfeffc url(\"images/ui-bg_glass_85_dfeffc_1x400.png\") 50% 50% repeat-x'});});")
    }
    else {
      // Remove image calls and default just to colors so no errors are thrown in web player version
      JS.eval ("$('button.ui-dialog-titlebar-close').hover(function(){$(this).css({'background' : '#d0e5f5'});}, function(){$(this).css({'background' : '#dfeffc'});});")
    }
    JS.eval ("$('div#compassAccordion button').click(function(){$(this).css({'background' : '"+panescolor+"'});});")
    JS.eval ("$('div#gamePanesRunning h3').hover(function(){$(this).css({'background' : '"+labelHoverColor+"'});}, function(){$(this).css({'background' : '"+paneslabelcolor+"'});});")

    // Edit .hoverlinkclass color value to change hover color of links
    JS.eval ("$('#hoverlinkID').remove()")
    JS.eval ("$('<style id=hoverlinkID>').prop('type','text/css').html('.hoverlinkclass {color: "+game.linkHoverColor+" !important;}').appendTo('head')")
    JS.eval ("$('.cmdlink').hover(function(){$(this).addClass('hoverlinkclass');}, function(){$(this).removeClass('hoverlinkclass');});")

To revert the theme back to Quest's default theming, use the following variables for the script above:

game.defaultbackground = "SeaShell"
game.MapBGColor = "White"
game.defaultforeground = "Black"
game.marginscolour = "White"
game.defaultlinkforeground = "Blue"
panestextcolor = "black"
panestextlabelcolor = "#e17009"
panesverbcolor = "#2e6e9e"
buttontextclickcolor = "#e17009"
panesbordercolor = "#a6c9e2"
if (not game.questplatform="webplayer") {
        // If not webplayer, use more detailed buttons that come by default
        panescolor = "#dfeffc url(\"images/ui-bg_glass_85_dfeffc_1x400.png\") 50% 50% repeat-x"
        panesacordiancolor = "#fcfdfd url(\"images/ui-bg_inset-hard_100_fcfdfd_1x100.png\") 50% bottom repeat-x"
        paneslabelcolor = "#f5f8f9 url(\"images/ui-bg_inset-hard_100_f5f8f9_1x100.png\") 50% 50% repeat-x"
        buttonHoverColor = "#d0e5f5 url(\"images/ui-bg_glass_75_d0e5f5_1x400.png\") 50% 50% repeat-x"
        buttonActiveColor = "#f5f8f9 url(\"images/ui-bg_inset-hard_100_f5f8f9_1x100.png\") 50% 50% repeat-x"
        labelHoverColor = "#d0e5f5 url(\"images/ui-bg_glass_75_d0e5f5_1x400.png\") 50% 50% repeat-x"
}
else {
        // Remove image calls and default just to colors so no errors are thrown in web player version
        panescolor = "#dfeffc"
        panesacordiancolor = "#fcfdfd"
        paneslabelcolor = "#f5f8f9"
        buttonHoverColor = "#d0e5f5"
        buttonActiveColor = "#f5f8f9"
        labelHoverColor = "#d0e5f5"
 }
game.linkHoverColor = "#0066FF"

You can pick whatever colors you like for the variables above to change the UI around as you please. If there's something you want to change that I missed, use the "HTML Tools" button when playing on the Desktop Version (or F12 on the web version) to bring up the Inspect Element interface where you can click around and find what other HTML you'd like to change.

As for what colors to use, I find the following HTML color reference helpful: https://www.w3schools.com/colors/colors_names.asp


This topic is now closed. Topics are closed after 60 days of inactivity.

Support

Forums