I was able to add an additional pane for my spell book and all is well. I have the other panes coloured "Parchment" but the new pane is white. Where would I add the code to change the colour of the new pane. Please be specific, I don't know where to look.

The code would be sweet too

Which method did you use to add the pane?

Yeah. The Pixie has a way to make panes in the tutorials.

I'll look for it myself eventually. It's it's not in the regular tutorials, search the forums.

Edit: It would be cool to know how to change the color of the pane or other objects though. Probably some small code, except the color is called #fgggg or something.
(I don't know the format, only guessing from memory.)

Used the AdditionalPane.aslx

There are numerous ways to create a pane. The way to change the color of the pane depends on how you created it.

For instance, if you make a command pane following Pixie's example, its element id is #commandPane.

If you can't remember what you set up your pane as, you can open the HTML editor during play, click the magnifying glass and hover over the pane you'd like to change. This will show you the element id.

You can see that mine is called '#commandPane', so the code to change the background color to green here would be:

JS.eval ("$('#commandPane').css('background', 'green')")

If this doesn't help, you can paste the script that sets up the pane (or a sample of the game), and I can be more specific.

http://docs.textadventures.co.uk/quest/custom_panes

https://github.com/ThePix/quest/wiki/UI-Part-02:-HTML-elements-and-CSS-attributes

If you got that from here (http://textadventures.co.uk/forum/samples/topic/3789/adding-a-second-inventory-object-pane#25387), this should change the background black and the text white (substitute your color choices):

JS.eval ("$('#Inventory2Wrapper').css('background', 'black')")
JS.eval ("$('#Inventory2Wrapper').css('color', 'white')")
JS.eval ("$('#Inventory2Label').css('background', 'black')")
JS.eval ("$('#Inventory2Label.ui-state-active a').css('color', 'white')")

NOTE:
I don't know if yours is set up identically, but 'Bag'is on top of the ui triangle in this example game, and when you change the color of the label, the triangle shows up. (Fiddling with this right now.)

This makes all the orange triangles in the pane labels disappear:

JS.eval ("$('.ui-icon').css('display', 'none')")

This only removes the triangle from the new pane:

JS.eval ("$('#Inventory2Label>span.ui-icon').css('display', 'none')")

You da man KV. I can't believe I have never thought to use my inspect element before. just never occurred to me. I don't use it that much. I used the pane from your last example. I saw how to change the labels and sizes but couldn't figure out the colour.

Thank you so much. I'll let you know how it goes when I get to it today.

Command pattern:
JS.#text#

Script:

JS.eval (text)

Now you can enter this during play and change the settings 'live':

List section background color:

JS.eval ("$('#your_element_id_here').css('background', 'black')")

List section text color:

JS.eval ("$('#your_element_id_here').css('color', 'white')")

Label background color:

JS.eval ("$('#your_element_id_here').css('background', 'black')")

Label text color:

JS.eval ("$('#your_element_id_here.ui-state-active a').css('color', 'white')")

WARNING: Playing with the settings via JS during play may crash Quest (especially if there is a formatting error).

On room player starts in, on the after entering room script, I made this script.

SetInventory2Label ("     Spell Book") \\Spell Book was over the accordion drop down arrow so I moved it over with some ;&nbsp and danged if it didn't work great!\\
ol = NewObjectList()
list add (ol, AnObject3)
list add (ol, AnObject4)
SetInventory2 (ol)
JS.eval ("$('#Inventory2Wrapper').css('background', '#FAEBD7')")
JS.eval ("$('#Inventory2Wrapper').css('color', 'black')")
JS.eval ("$('#Inventory2Label').css('background', '#FAEBD7')")
JS.eval ("$('#Inventory2Label.ui-state-active a').css('color', 'black')")
JS.eval ("$('#Inventory2Wrapper').css('border', '#493D26')")
JS.setCss ("#Inventory2Label", "border:1px solid " + game.customlocationbordercolour)
JS.setCss ("#Inventory2Wrapper", "border:1px solid " + game.customlocationbordercolour)
JS.eval ("$('#Inventory2Accordion').css('border', '#493D26')")
JS.eval ("$('#Inventory2Accordion').css('background', '#FAEBD7')")

and it made an exact copy of the others. I know I repeated some but for now it is perfect.

Had to look at the core.aslx to get the codes and mix some of yours in as well. I'll figure out what I repeated and change them all to JS.eval instead of JS.setCss. But for now I'm doing the happy dance...

"<img src="https://bobslifeblog.files.wordpress.com/2017/08/capture.jpg"+ "" style="float:left;" />"
Oh well... I still can't post an image...

Maybe someone can show me the correct code to do that...

Hey, that link works! You've just got the jpg"+""style messing you up:

<img src="https://bobslifeblog.files.wordpress.com/2017/08/capture.jpg" style="float:left;" />

<!--
NOTE: I'm adding newlines to make the post look correct:
-->

<br/><br/><br/><br/><br/>

# Of course, now the next line of text will be displayed here, due the the ```float:left```...

<br/><br/><br/><br/><br/><br/><br/>

Of course, now the next line of text will be displayed here, due the the float:left...

Here's a few more ways to post an image:

Easy image link in markdown:

![img](https://bobslifeblog.files.wordpress.com/2017/08/capture.jpg)

With title on hover:

![img](https://bobslifeblog.files.wordpress.com/2017/08/capture.jpg "Look! This is an image!")

Clickable:

[![img](https://bobslifeblog.files.wordpress.com/2017/08/capture.jpg)](https://bobslifeblog.files.wordpress.com/2017/08/capture.jpg)

Clickable with title on hover:

[![img](https://bobslifeblog.files.wordpress.com/2017/08/capture.jpg)](https://bobslifeblog.files.wordpress.com/2017/08/capture.jpg "Click here to view the original image")

or... in HTML:

Easy image (I took out the float:left to simplify things):

<img src="https://bobslifeblog.files.wordpress.com/2017/08/capture.jpg"/>

Image with title on hover:

<img alt="image" title="You are hovering over the image!" src="https://bobslifeblog.files.wordpress.com/2017/08/capture.jpg"/>

Clickable image with title on hover:

<a href="https://bobslifeblog.files.wordpress.com/2017/08/capture.jpg"><img alt="image" title="You are hovering over the image!" src="https://bobslifeblog.files.wordpress.com/2017/08/capture.jpg"/></a>

Hey, that actually looks like an interesting game, K.V.

Hey, that actually looks like an interesting game, K.V.

Hey, thanks for bringing my attention to that, jmnevil54!

Those were screenshots of a triple-dog, super-secret game! Whoops!

(Worry not, though, Text Adventurers! It's coming soon!)

@Forgewright

I advise you to keep this line in there:

JS.setCss ("#Inventory2Accordion", "border:1px solid black")

The other code doesn't seem to effect Inventory2Accordion's border...