Hi guys. I have a few questions regarding advanced GUI customizations that don't seem to be possible using the basic interface. Any help and/or references you can provide for the following topics is appreciated.

1. Moving the static picture frame to a different location. Is there a way to move the static picture from the top of the screen to the area below the compass in the side panel? There's a bunch of dead space down there that I would like to make use of.

2. Can you use an image for rooms in the directional map/grid instead of specifying box color/dimensions? I was thinking about using aerial photography as an "overhead map" that the player jumps around on based on their location.

3. Certain cosmetic GUI options are missing entirely. I can change the font and backgrounds in the text area but the side pane is always default? How can I change the background color over there?

4. Menu/title fonts never seem to change. How can I match these to the text font?

5. I though editing the images would be enough to change the color of the window borders but it doesn't seem to do anything. I can change the compass arrow colors this way but stuff like the window borders, text box light colors (in inventory pane for example) and command window borders remain unchanged. Any idea how to edit these elements?

Thanks in advance.

I didn't look through it too closely, but check these links out.

http://textadventures.co.uk/forum/samples/topic/4410/black-gui

http://docs.textadventures.co.uk/quest/guides/modifying_the_ui__advanced_.html

Hope it helps.

I am building a set of tutorials and libraries, with eleven pages on changing the UI (partly expanding on what I wrote in XanMag's second link). They are listed at the end of this page:
https://github.com/ThePix/quest/wiki

None of these (including XanMag's links) cover 1 and 2, but they do should the basic techniques so you might be able to work it out for yourself. 1 will be fairly easy, 2 should be doable, but not at all easy.

Thanks for the replies.

I've tried using the black-gui but it doesn't work and I haven't poured through the code to see if anything can be salvaged (I don't really have the skillset to do that anyway).

Pixie - those are some great tutorials. They explain things better than most others do. However, upon trying to do the first step, creating a InitUserInterface function, I get the message that "An element called 'InitUserInterface' already exists in this game". I am using the newest version of the desktop offline editor and I don't see anything under the 'Functions' tree. I've been pasting code into the start script as a workaround.

Finally, is there an easy way to find a list of all the element IDs?

However, upon trying to do the first step, creating a InitUserInterface function, I get the message that "An element called 'InitUserInterface' already exists in this game". I am using the newest version of the desktop offline editor and I don't see anything under the 'Functions' tree.

There is a built-in function called InitUserInterface, and sometimes Quest will let you override that way and sometimes it will not, and I have yet to work out when that is. The 'proper' way to do it is described here:
https://github.com/ThePix/quest/wiki/Overriding-Functions

Finally, is there an easy way to find a list of all the element IDs?

Not quite, but when playing the game, click on HTML tools and explore the window that appears. Expand the sections, and see what gets highlighted in the game as your put your mouse point over it. That will tell you which section is what. You need the IDs.

Thanks Pixie. I've been able to do a ton of stuff because of your help. Only a couple issues remain:

REFERENCE IMAGE: http://imgur.com/a/rSiER

1. I have customized the compass a bit per your instructions in the tutorial. However, by doing so I seem to have limited the area that a background image would cover. There is a large area right of the buttons that doesn't get filled in with the background image/color (see #1 in the reference image). The black bar covers up the rest of the image. (SOLVED: Created a new row with empty spaces to push the compass area out to the border.) Looks like this:

<td>
   &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
</td>

2. Inside the inventory panel I have two issues that I can't resolve. First is the highlight bar that shows when you click on an item in your inventory (see #2 in the reference image). I'm trying to change the color from orange/yellow to something that matches the object menu hover colors seen to the left. I think the ID is ui-selecting and ui-selected. (UNSOLVED)
   Also, I'm at a lost for the scroll bar. I would like to remove it entirely or at least change the color but nothing I do seems to matter (see #3 in the reference image). I think the ID is elementListWrapper. (SOLVED: Included the following line in the InitUserInterface function)

JS.eval ("$('#inventoryWrapper').css('overflow-y', 'hidden');")

3. Finally, I would like to remove the border to the command bar. I have read other threads on the matter and even made a game with Jay's code to verify it works but when I copy the relevant code into my game the only thing I get is no more "Type here..." text. What's weird is it actually worked once (randomly, when it failed moments before) but reverted back to a bordered bar when I switched rooms. Also, I seem to get a "reference to unidentified entity '&nbsp'" error. (SOLVED - kind of: I transferred my game code over to this working code piece by piece but when I transfer over my 'object' sections the game reverts to the command box border. Some sort of conflict. I've decided the border contributes to playability enough to keep it in but I would like to change both the color of the border and the color of the "focus box" that highlights the last element you clicked on. Haven't figured it out yet.)

Updated my last post with resolutions I've discovered but two issues remain:

1. The highlight bar that shows when you click on an item in your inventory (see #2 in the reference image). I'm trying to change the color from orange/yellow to something that matches the object menu hover colors seen to the left. I think the ID is ui-selecting and ui-selected.

2. I would like to change the border color for the command box and the border color of the "focus box" that highlights the last selected UI element. As of yet I've been unsuccessful.

Inside the inventory panel I have two issues that I can't resolve. First is the highlight bar that shows when you click on an item in your inventory (see #2 in the reference image). I'm trying to change the color from orange/yellow to something that matches the object menu hover colors seen to the left. I think the ID is ui-selecting and ui-selected.

They do not seem to have IDs, they uses classes instead, ui-selectee (for all objects in the list), uiselected (for the selected one) and ui-selecting (for the selected one whilst clicked). The difference is that only one element on the page can have a specific ID but any number can have a class. In theory you can change a class by using a ., rather than a #, like the:

msg ("<span class=\"ui-selected\">Some text</span>")
JS.eval ("$('.ui-selected').css('background-color', 'blue');")

The "Some text" will have a blue background... but not the selected item in the inventory. The "Some text" also does not change if you have the msg command after the JS.eval. I have no idea why that should be so.

The input box has an ID, txtCommand but again does not seem to work like the rest. And you need to alter its outline attribute as well as the border attribute.

However, there is a way around. If you go into full code view (press F9), you can add an attribute to the XL of the game object that includes CSS.

    <css><![CDATA[
      <style>
        #txtCommand {
          outline:none;
          border: none;
        }
        .ui-selected {
          background-color: darkblue;
          color: white;
        }
        .ui-selecting {
          background-color: blue;
          color: white;
        }
      </style>
    ]]></css>

Be careful how you do that; I would suggest pasting it below this line:

    <firstpublished>2016</firstpublished>

You can output that in game.start, and it will affect the selected item.

JS.addText (game.css)

I have only just discovered JS.addText but it is the best way to output CSS and JavaScript as it is the most basic output; everything else has stuff added to it.