So I'm a little ways into creating my first game with Quest, and I've run into an extremely specific wall. I was toying around with customization options, including changing background colors and fonts, and everything was going well until I tried customizing the command bar. I've scoured the documentation and forums and have been unable to really find clear answers that work to the extent that I'm hoping. I've shifted my goals a few times and even tried testing things out from scratch with an empty game and still can't seem to figure this out.

The thing I would like to do is change the background color of the command bar. (I would like to do other things as well, but this is the one thing I can't seem to make any headway on in particular.) I actually have a few different levels of complexity I would be willing to pursue:

1. Set a custom background color for the default command bar.
2. Set custom styling for the default command bar.
3. Have the background color dynamically change during the game using functions.

My original goal was 3, but I can't even achieve 1 even though I know it should be possible as I've seen it in other games. I've tried setting the CSS in various ways in various places to no avail.

What I'd like to ask is not only how to achieve these things, but also what the best practices currently are for customizing the command bar. I've seen a lot of conflicting information from different years about how to manage it, and some of it seems deprecated or obsolete after 5.7 was released.

If you'd like, I can post some codes of various solutions I've tried, as well as the issues encountered with them. If I could examine code that actually works though - even just something that permanently changes the background color - I feel like I would be able to eliminate a lot of the guesswork though.

Thanks, and cheers!

Update: I've figured out a way to do what I wanted to do! The code for a short demo of it is below.

After spending some time testing various conditions and analyzing the HTML, I've figured out why all CSS-based approaches fail. Succinctly, whatever you do with CSS gets overridden by element.style. From what I can tell, each time the command bar elements need to be created, the engine uses jQuery or DOM or whatever to create it, and in the process it assigns certain style attributes to the element directly.

With a bit of testing though I determined that the background color of the command bar was based on game.defaultbackground, which does not change when you update the background through JS.setBackground. I tried changing the default background color, which sort of worked... but not on the first command bar created, for whatever reason.

Luckily in my earlier attempts I'd found that setting the CSS of #txtCommand through JS.setCss changes only the first command bar created, so I put the two methods together and it worked! I can now change the background color of the command bar on the fly, and independently of the page background if I so desire.

My original goal was to be able to use the borderless command bar and change the background color of the page without the input field looking out of place, which I was able to do in this demo:

<asl version="580">
  <include ref="English.aslx" />
  <include ref="Core.aslx" />
  <game name="Command Bar Test">
    <gameid>978bc0e7-fac8-4971-b5d9-149169a56efa</gameid>
    <version>1.0</version>
    <firstpublished>2018</firstpublished>
    <defaultbackground>White</defaultbackground>
    <feature_advancedscripts />
    <borderlesscursor />
    <commandcursor><![CDATA[>]]></commandcursor>
    <enablehyperlinks />
    <start type="script">
    </start>
    <autodescription type="boolean">false</autodescription>
  </game>
  <object name="room">
    <inherit name="editor_room" />
    <isroom />
    <description>Enter "red", "green", "blue", or "white" to change the color of the background.</description>
    <object name="player">
      <inherit name="editor_object" />
      <inherit name="editor_player" />
    </object>
  </object>
  <command name="red">
    <pattern>red</pattern>
    <script>
      JS.setBackground ("#FFC6C6")
      JS.setCss ("#txtCommand", "background:#FFC6C6")
      game.defaultbackground = "#FFC6C6"
    </script>
  </command>
  <command name="green">
    <pattern>green</pattern>
    <script>
      JS.setBackground ("#C8F7C8")
      JS.setCss ("#txtCommand", "background:#C8F7C8")
      game.defaultbackground = "#C8F7C8"
    </script>
  </command>
  <command name="blue">
    <pattern>blue</pattern>
    <script>
      JS.setBackground ("#C3E7F5")
      JS.setCss ("#txtCommand", "background:#C3E7F5")
      game.defaultbackground = "#C3E7F5"
    </script>
  </command>
  <command name="white">
    <pattern>white</pattern>
    <script>
      JS.setBackground ("white")
      JS.setCss ("body", "background:white")
      JS.setCss ("#txtCommand", "background:white")
      game.defaultbackground = "white"
    </script>
  </command>
</asl>

(There's a little redundancy in the code so you can test out different colors.)

As far as I can tell, there's no fallout to changing game.defaultbackground this way, and everything holds up even after reloading a save. Some extra confirmation would be nice, but as it stands I think I've solved my problem.

From what I can tell, each time the command bar elements need to be created, the engine uses jQuery or DOM or whatever to create it, and in the process it assigns certain style attributes to the element directly.

It's not recreated; the JS function setCommandBarStyle is just called by the quest core every turn, to reset the style attribute to its defaults. I have no idea why this is done.

Your method seems to work well. An alternative would be just doing JS.eval("setCommandBarStyle = function(style) {};") to disable the automatic reset so that you can adjust the CSS like you would for any other object.

Or you could use:
msg ("<style>#txtCommand { background:#DE3163 !important; }</style>")
or
JS.setCss ("#txtCommand", "background:#DE3163 !important")
which causes the CSS to override the element's direct style attribute.

Thanks for the clarification! I'm not sure why the styling is reset each turn either, or why it's set directly instead of referring to the #txtCommand id.

I tried out the first method you described and it worked like a charm. I think I'll go with that one since it eliminates redundancy. Thanks for the help!