Trying to change the foreground of the command bar...

[vurt834]

Howdy, I'm attempting to change the color of the foreground used by the command bar to lawngreen. Some stylings I've applied work fine, but the foreground has not. I've dug into the ResetCommandBarFormat function and messed with it, and also tested some changes in the initialization script, but nothing works...I've listed it here...there are a couple of commented out sections that adjust the stylings, but just because they didn't work really, they were more for styling it a different way. Any help would be much appreciated. Thanks! code:

// CommandPrompt ("hide")
JS.panesVisible (false)
JS.ShowGrid (0)
cursor = GetFileURL("Normal pixelated green.cur")
JS.eval ("$('<style>').text('*::-webkit-scrollbar { height: 10px; width: 10px !important; } *::-webkit-scrollbar-track { border-radius: 5px !important; background-color: #000000 !important; border: 2px solid #00F300 !important; } *::-webkit-scrollbar-thumb { border-radius: 5px !important; background-color: #00F300 !important; } ::-webkit-scrollbar-button { display: none !important; }').appendTo('head');")
JS.eval ("document.body.style.cursor = 'url("" + cursor + ""), auto';")
JS.eval ("var el = document.getElementById('txtCommand');el.placeholder = ' ';var css = '::-webkit-input-placeholder {color: green;}' + ':-moz-placeholder {color: green;}' + '::-moz-placeholder {color: green;}' + ':-ms-input-placeholder {color: green;}' + '::placeholder {color: green;}';var style = document.createElement('style');style.type = 'text/css';style.innerHTML = css;el.appendChild(style);")
text = "color:lawngreen;font-family:'" + game.defaultwebfont + "';font-size: 9px"
savetext = "color:lawngreen;font-family:'" + game.defaultwebfont + "';font-size: 8px"
background = "background:black"
button = "padding:2px;background:black;border:ridge lawngreen 1px;border-radius: 9px;"
JS.setCommands ("Explore;Help;Room;Save")
JS.setCss ("#verblinkexplore", button + ";" + text)
JS.setCss ("#verblinkhelp", button + ";" + text)
JS.setCss ("#verblinkroom", button + ";" + text)
JS.setCss ("#verblinksave", button + ";" + text)
JS.setCustomStatus ("
[Pills taken]: [" + player.pills + "/99]

")
request (SetInterfaceString, "PlacesObjectsLabel=[Objects in Room]")
request (SetInterfaceString, "CompassLabel=[Go Direction]")
JS.setCss (".ui-accordion-header", "border:ridge lawngreen;" + background + ";" + text)
JS.setCss (".ui-accordion-content", "border:ridge lawngreen;" + background + ";" + text)
JS.eval ("$('head').append('<style>.ui-accordion-content .ui-button { " + text + " !important; " + button + " !important; }</style>');")
JS.setCss (".accordion-header-text", text)
JS.eval ("$('#gamePanes').width(280);")
JS.setCss ("#cmdCompassU", "display:none")
JS.setCss ("#cmdCompassD", "display:none")
JS.setCss ("#cmdCompassIn", "display:none")
JS.setCss ("#cmdCompassOut", "display:none")
JS.setCss ("#compassAccordion", "width: 150px;border:ridge #000000 1px")
JS.setInterfaceString ("ContinueLabel", "")
JS.eval ("var style = document.createElement('style'); style.textContent = "li.ui-selected { background-color: lawngreen !important; color: black !important; font-weight: bold !important; font-size: 120% !important; }"; document.head.appendChild(style);")
JS.eval ("document.head.appendChild(document.createElement('style')).textContent = '.ui-button:active, .ui-icon:active { background-color: lawngreen !important; color: black !important; } .ui-button:active span, .ui-icon:active span { color: black !important; } .ui-button:focus, .ui-icon:focus { outline: none; color: black; }';")
JS.eval ("document.head.appendChild(document.createElement('style')).textContent = '#commandPane:active { background-color: lawngreen !important; color: black !important; } #commandPane:focus { outline: none; color: black; }';")
JS.eval ("$('head').append('<style>#customLocation { display: flex; justify-content: center; align-items: center; background-color: green; color: lawngreen; font-family: "Press Start 2P"; font-size: 10pt; text-align: center; line-height: normal; height: 100%; border: solid lawngreen; }</style>');")
JS.eval ("var customBarHTML = '<table width="100%" style="height: 100%;"><tr style="height: 100%;"><td id="customLocation" style="display: flex; justify-content: center; align-items: center; height: 100%;">Briarwood Hospital<td id="altlocation" align="right">'; $('#location').parent().html(customBarHTML);")
JS.eval ("$('head').append('<style>.ui-button {padding: 2px !important;background: black !important;border: ridge lawngreen 1px !important;border-radius: 9px !important;}.ui-button span {color: lawngreen !important;font-family: "" + game.defaultwebfont + "" !important;font-size: 10px !important;}</style>')")
// mouse pointer and link selector code
cursor = GetFileURL ("Normal pixelated green.cur")
selectCursor = GetFileURL ("Link Select.cur")
JS.eval ("document.body.style.cursor = 'url("" + cursor + ""), auto';")
JS.eval ("document.body.addEventListener('mouseover', function(event) { if(event.target.tagName === 'A') { event.target.style.cursor = 'url("" + selectCursor + ""), pointer'; } else { event.target.style.cursor = 'url("" + cursor + ""), auto'; } }, true);")
JS.eval ("var css = '::-webkit-scrollbar { height: 10px; width: 10px !important; } *::-webkit-scrollbar-track { border-radius: 5px !important; background-color: #000000 !important; border: 2px solid #00F300 !important; } *::-webkit-scrollbar-thumb { border-radius: 5px !important; background-color: #00F300 !important; } *::-webkit-scrollbar-button { display: none !important; }'; var style = document.createElement('style'); style.type = 'text/css'; if (style.styleSheet){ style.styleSheet.cssText = css; } else { style.appendChild(document.createTextNode(css)); } document.head.appendChild(style);")
JS.eval ("$('.ui-icon').css('background-image', 'url(" + GetFileURL("ui-icons_02560_256x240.png") + ")')")
TurnOffTitleBar
// JS.eval ("var el = document.getElementById('txtCommand'); el.style.color = 'forestgreen'; $('head').append('<style>#txtCommand::-webkit-input-placeholder{color:forestgreen;}#txtCommand:-moz-placeholder{color:forestgreen;}#txtCommand::-moz-placeholder{color:forestgreen;}#txtCommand:-ms-input-placeholder{color:forestgreen;}#txtCommand::placeholder{color:forestgreen;}</style>');")
// JS.eval ("$('#txtCommandDiv').css({'color':'lawngreen','font-family':'"Press Start 2P", monospace','font-size':'8pt'});")
// JS.eval("$('#txtCommandDiv').css({'display':'inline-block','vertical-align':'middle','white-space':'nowrap'});$('#txtCommand').css({'display':'inline-block','vertical-align':'middle','white-space':'nowrap'});")
// Type comment
// JS.setCss ("#txtCommandDiv", "border: ridge lawngreen 1px !important; border-radius: 9px !important; color: lawngreen !important; outline: none !important; box-shadow: none !important;")

[KVonGit]

Hello. =)

https://archive.textadventures.co.uk/forum/quest/topic/4211.html

OutputTextRaw

Copy it into your game file, then comment out the line that calls ResetCommandBarFormat.

---

Some of that stuff needs to be applied to #txtCommandDiv > input for it to do anything.

<!--Saved by Quest 5.9.9166.36226-->
<asl version="580">
  <include ref="English.aslx" />
  <include ref="Core.aslx" />
  <game name="Leave My Command Bar Style ALONE!">
    <gameid>9925b7a1-0535-4f04-b345-bb658f91dea3</gameid>
    <version>1.0</version>
    <firstpublished>2025</firstpublished>
    <start type="script"><![CDATA[
      JS.eval ("var el = document.getElementById('txtCommand'); el.style.color = 'forestgreen'; $('head').append('<style>#txtCommand::-webkit-input-placeholder{color:forestgreen;}#txtCommand:-moz-placeholder{color:forestgreen;}#txtCommand::-moz-placeholder{color:forestgreen;}#txtCommand:-ms-input-placeholder{color:forestgreen;}#txtCommand::placeholder{color:forestgreen;}</style>');")
      JS.eval ("$('#txtCommand').css({'color':'lawngreen','font-family':'\"Press Start 2P\", monospace','font-size':'8pt'});")
      JS.eval ("$('#txtCommandDiv').css({'display':'inline-block','vertical-align':'middle','white-space':'nowrap'});$('#txtCommand').css({'display':'inline-block','vertical-align':'middle','white-space':'nowrap'});")
      JS.eval ("$('#txtCommandDiv > input').css({'border':'ridge lawngreen 1px','border-radius':'9px','color':'lawngreen','outline':'none','box-shadow':'none'})")
    ]]></start>
  </game>
  <object name="room">
    <inherit name="editor_room" />
    <object name="player">
      <inherit name="editor_object" />
      <inherit name="editor_player" />
    </object>
  </object>
  <function name="OutputTextRaw" parameters="text"><![CDATA[
    format = GetCurrentTextFormat("")
    JS.addText ("<span style=\"" + format + "\">" + text + "</span><br/>")
    if (GetString(game, "commandbarformat") <> format) {
      // ResetCommandBarFormat
    }
    RequestSpeak (text)
  ]]></function>
</asl>

---

I changed a few things in there while trying to make different things work, but I'm sure you'll see what's different and be able to make it do what you want now.

One thing was it didn't like !important being there when using eval("$('element').css({'color':'orange'}). It didn't like spaces in a few places when using JS.setCss either. (NOTE: I try to avoid using setCss because it changes other elements if you change specific elements' style settings.)

[KVonGit]

Note

I probably have mistakes in that code somewhere. I'm terrible with CSS.

[vurt834]

That worked great...I've done so much to the interface it can get really confusing...especially since I haven't messed with the it for like a year. Thanks for your help! I put that in the initialization script and it worked well.