I've been studying this:

http://docs.textadventures.co.uk/quest/ ... nced_.html

And I've used JQuery in InitUserInterface to rearrange the Status, Compass, Inventory, and Object panes.

Is there a way to change the background color of the panes? Specifically, I'd like to make it transparent so that the background image shows through.

Thanks.

Edit: I'll explain more.



I need to make the compass, inventory, and object windows look like the status window (black background, peru text).

I also need the status, compass, etc. labels and borders changed the same way.

I also need the background of the pane area to have an opacity of 0.

This is how I changed the status window:

JS.eval ("$('#statusVars').css('background-color', 'black')")
JS.eval ("$('#statusVars').css('color', 'peru')")

But I can't seem to guess what the others are. There must be a way to do this.

All I need are the IDs for those things. Can anyone provide them?

Not perfect, but it's a first step:

JS.eval ("$('#compassAccordion.ui-widget-content').css('background', 'black')")
JS.eval ("$('#inventoryAccordion.ui-widget-content').css('background', 'black')")

Oh, thank you!

With that, I've found another:

JS.eval ("$('#inventoryAccordion.ui-widget-content').css('color', 'peru')")

Can we find more?

When you are playing your game, click on HTML tools. You can jump around the different elements, clicking on the triangles at the left to dig deeper, to find all the element names.

Thanks a lot, Pixie.

I've gotten a lot done:



But I'm still stumped on where to find the names of the borders, the highlighted text, and the buttons.

Any ideas?

Also, when this is done, I'll be posting all of the code here for anyone else who wants to do this in the future. I just want to get this finished first.

Just as an update: I've found where to edit the compass buttons, but I still haven't figured out how to change the color of the borders or the arrows. Working on it!

borders:
JS.eval ("$('.ui-state-active').css('border', '1px solid black')")
JS.eval ("$('.ui-widget-content').css('border', '1px solid black')")

Oh! Thank you so much!

I never would've guessed that.

This is what I have now:



The buttons and the highlighted text are left.

You guys have been wonderfully helpful so far. I can't wait for this to be done so I can post the code and give back to the community!

Edit: I figured out how to change the color of the borders for the compass buttons.

The arrows, highlighted text, and inventory/object window buttons still elude me, though.

Edit 2: The inventory/object window buttons are changed.

The blue arrows and highlighted text are all that are left.

Okay, so a few things.

This is what I have so far:



Does anyone know of a way to change the color of the highlighted text? Also, can someone help me make the black background transparent?

I removed the compass altogether. The compass arrows are an image located in Quest 5/images. I never figured out how to change it from inside Quest.

But I removed the compass because I felt it was immersion breaking. The player needs to shift his/her eyes to the right every time they want to move. It takes their mind out of the game, and they stop paying attention to the room descriptions.

It's necessary to leave the Inventory and Object panes because drop-down menus don't work if a timer is switched on, and my game uses a lot of timers. I also think it helps keep the game organized.

Finally, here's the code to change the colors. Most of it should be pretty self-explanatory on what it does. Stuff like ".ui-widget-content" changes the color globally. Here:

JS.eval ("$('#gamePanes').css('background-color', 'black')")
JS.eval ("$('#statusVars').css('background-color', 'black')")
JS.eval ("$('#statusVars').css('color', 'peru')")
JS.eval ("$('#inventoryAccordion.ui-widget-content').css('background', 'black')")
JS.eval ("$('#inventoryAccordion.ui-widget-content').css('color', 'peru')")
JS.eval ("$('#statusVarsLabel').css('background', 'black')")
JS.eval ("$('#statusVarsLabel').css('color', 'peru')")
JS.eval ("$('#inventoryLabel').css('background', 'black')")
JS.eval ("$('#inventoryLabel').css('color', 'peru')")
JS.eval ("$('#placesObjectsLabel').css('background', 'black')")
JS.eval ("$('#placesObjectsLabel').css('color', 'peru')")
JS.eval ("$('#placesObjectsAccordion.ui-widget-content').css('background', 'black')")
JS.eval ("$('#placesObjectsAccordion.ui-widget-content').css('color', 'peru')")
JS.eval ("$('.ui-state-active').css('border', '1px solid darkgoldenrod')")
JS.eval ("$('.ui-widget-content').css('border', '1px solid peru')")
JS.eval ("$('.ui-button').css('background', 'black')")
JS.eval ("$('.ui-button').css('border', '1px solid peru')")
JS.eval ("$('.ui-button-text').css('color', 'peru')")
JS.eval ("$('#compassLabel').css('display', 'none')")
JS.eval ("$('#compassAccordion').css('display', 'none')")

I have the compassLabel and Accordion disabled.

This is how you change the compass background and border colors:

JS.eval ("$('#cmdCompassN').css('background', 'black')")
JS.eval ("$('#cmdCompassE').css('background', 'black')")
JS.eval ("$('#cmdCompassS').css('background', 'black')")
JS.eval ("$('#cmdCompassW').css('background', 'black')")
JS.eval ("$('#cmdCompassNW').css('background', 'black')")
JS.eval ("$('#cmdCompassNE').css('background', 'black')")
JS.eval ("$('#cmdCompassSW').css('background', 'black')")
JS.eval ("$('#cmdCompassSE').css('background', 'black')")
JS.eval ("$('#cmdCompassU').css('background', 'black')")
JS.eval ("$('#cmdCompassIn').css('background', 'black')")
JS.eval ("$('#cmdCompassD').css('background', 'black')")
JS.eval ("$('#cmdCompassOut').css('background', 'black')")

JS.eval ("$('#cmdCompassN').css('border', '1px solid peru')")
JS.eval ("$('#cmdCompassE').css('border', '1px solid peru')")
JS.eval ("$('#cmdCompassW').css('border', '1px solid peru')")
JS.eval ("$('#cmdCompassS').css('border', '1px solid peru')")
JS.eval ("$('#cmdCompassNW').css('border', '1px solid peru')")
JS.eval ("$('#cmdCompassNE').css('border', '1px solid peru')")
JS.eval ("$('#cmdCompassSE').css('border', '1px solid peru')")
JS.eval ("$('#cmdCompassSW').css('border', '1px solid peru')")
JS.eval ("$('#cmdCompassIn').css('border', '1px solid peru')")
JS.eval ("$('#cmdCompassOut').css('border', '1px solid peru')")
JS.eval ("$('#cmdCompassU').css('border', '1px solid peru')")
JS.eval ("$('#cmdCompassD').css('border', '1px solid peru')")

For anyone who may not know where to put this code: Under Functions, copy InitUserInterface and insert this code next to "Scripts" under "Code View."

Thank you, Pertex and Pixie.

I managed to make the background of the UI transparent. Here's how:

JS.eval ("$('#gamePanes').css('background-color', 'rgba(0, 0, 0, 0)')")

Can't believe I got it.

Now all I need is to fix the highlighted text.

I don't mean to bump this thread, but I am really stumped.

Can anyone help me?



At this point, all I'm trying to do is make that white text black.

I have no idea if I use .effect or what the div IDs even are.

I contacted a friend of mine and asked him how to animate the verb buttons. This code changes the color of the verb buttons when they're clicked. Credit for this goes to Jon Costa.

JS.eval ("$('.ui-button').mousedown(function() { $(this).css('background-color', 'peru'); } )")
JS.eval ("$('.ui-button-text').mousedown(function() { $(this).css('color', 'black'); } )")
JS.eval ("$('#gameBorder').mouseup(function() { $('.ui-button-text').css('color', 'peru'); } )")
JS.eval ("$('#gameBorder').mouseup(function() { $('.ui-button').css('background-color', 'black'); } )")

We still haven't figured out how to change the highlighted text, but hopefully this thread will be useful to somebody in the future.

Just putting this out there. I figured out how to change the highlighted text.

JS.eval ("$('#gamePanes').mousedown(function() { $('.ui-selecting').css('color', 'black'); } )")
JS.eval ("$('#gamePanes').mousedown(function() { $('.ui-selecting').css('background-color', 'peru'); } )")
JS.eval ("$('#gamePanes').mousedown(function() { $('.ui-unselecting').css('color', 'peru'); } )")
JS.eval ("$('#gamePanes').mousedown(function() { $('.ui-unselecting').css('background-color', 'black'); } )")

But when I click on the "Look" verb button or change rooms, it reverts back to white on orange.

.ui-selected seems to be what controls that, but:

JS.eval ("$('.ui-selected').css('background-color', 'peru'); } )")
JS.eval ("$('.ui-selected').css('color', 'black'); } )")

That doesn't work. I'm confused.

Jon came through for me again.

He said .css was the wrong method.

JS.eval ("var styleInv = $('<style>.ui-selected { color: black;}</style>');  $('html > head').append(styleInv)" )
JS.eval ("var styleInv = $('<style>.ui-selected { background-color: peru;}</style>');  $('html > head').append(styleInv)" )

This permanently changes the style of the highlighted text.

My final code is this:

JS.eval ("$('#statusVarsLabel').insertBefore('#inventoryLabel')")
JS.eval ("$('#statusVarsAccordion').insertBefore('#inventoryLabel')")
JS.eval ("$('#compassLabel').insertBefore('#inventoryLabel')")
JS.eval ("$('#compassAccordion').insertBefore('#inventoryLabel')")
JS.eval ("$('#placesObjectsLabel').insertBefore('#inventoryLabel')")
JS.eval ("$('#placesObjectsAccordion').insertBefore('#inventoryLabel')")
JS.eval ("$('#gamePanes').css('background-color', 'rgba(0, 0, 0, 0)')")
JS.eval ("$('#statusVars').css('background-color', 'black')")
JS.eval ("$('#statusVars').css('color', 'peru')")
request (SetInterfaceString, "PlacesObjectsLabel=Objects")
JS.eval ("$('#inventoryAccordion.ui-widget-content').css('background', 'black')")
JS.eval ("$('#inventoryAccordion.ui-widget-content').css('color', 'peru')")
JS.eval ("$('#statusVarsLabel').css('background', 'black')")
JS.eval ("$('#statusVarsLabel').css('color', 'peru')")
JS.eval ("$('#inventoryLabel').css('background', 'black')")
JS.eval ("$('#inventoryLabel').css('color', 'peru')")
JS.eval ("$('#placesObjectsLabel').css('background', 'black')")
JS.eval ("$('#placesObjectsLabel').css('color', 'peru')")
JS.eval ("$('#placesObjectsAccordion.ui-widget-content').css('background', 'black')")
JS.eval ("$('#placesObjectsAccordion.ui-widget-content').css('color', 'peru')")
JS.eval ("$('.ui-state-active').css('border', '1px solid darkgoldenrod')")
JS.eval ("$('.ui-widget-content').css('border', '1px solid peru')")
JS.eval ("$('#compassLabel').css('display', 'none')")
JS.eval ("$('#compassAccordion').css('display', 'none')")
JS.eval ("$('#gamePanesFinished').html('<h2></h2>')")
JS.eval ("$('.ui-button').css('background', 'black')")
JS.eval ("$('.ui-button').css('border', '1px solid peru')")
JS.eval ("$('.ui-button-text').css('color', 'peru')")
JS.eval ("$('.ui-button').mousedown(function() { $(this).css('background-color', 'peru'); } )")
JS.eval ("$('.ui-button-text').mousedown(function() { $(this).css('color', 'black'); } )")
JS.eval ("$('#gameBorder').mouseup(function() { $('.ui-button-text').css('color', 'peru'); } )")
JS.eval ("$('#gameBorder').mouseup(function() { $('.ui-button').css('background-color', 'black'); } )")
JS.eval ("$('#gamePanes').mousedown(function() { $('.ui-selecting').css('color', 'black'); } )")
JS.eval ("$('#gamePanes').mousedown(function() { $('.ui-selecting').css('background-color', 'peru'); } )")
JS.eval ("$('#gamePanes').mousedown(function() { $('.ui-unselecting').css('color', 'peru'); } )")
JS.eval ("$('#gamePanes').mousedown(function() { $('.ui-unselecting').css('background-color', 'black'); } )")
JS.eval ("var styleInv = $('<style>.ui-selected { color: black;}</style>');  $('html > head').append(styleInv)" )
JS.eval ("var styleInv = $('<style>.ui-selected { background-color: peru;}</style>');  $('html > head').append(styleInv)" )

Not all of this is used to change the colors, but most of it is.

The final result is this:



I am, of course, holding the "look" button down to demonstrate that it animates.

Thanks for putting up with me, guys.

Lastly, this is how you change the image of the arrows on the compass:

JS.eval (" var arrowUrl = 'images/ui-icons_cd0a0a_256x240.png'; var styleArrow = $('<style>.ui-state-default .ui-icon { background-image: url('+ arrowUrl +'); }</style>');  $('html > head').append(styleArrow) ")

This is courtesy of Jon Costa.



Now I'm officially done.

Jon revised some of the code to correct some bugs that occurred when you clicked and dragged in the Inventory and Object panes. It now looks like this:

JS.eval ("$('#statusVarsLabel').insertBefore('#inventoryLabel')")
JS.eval ("$('#statusVarsAccordion').insertBefore('#inventoryLabel')")
JS.eval ("$('#compassLabel').insertBefore('#inventoryLabel')")
JS.eval ("$('#compassAccordion').insertBefore('#inventoryLabel')")
JS.eval ("$('#placesObjectsLabel').insertBefore('#inventoryLabel')")
JS.eval ("$('#placesObjectsAccordion').insertBefore('#inventoryLabel')")
JS.eval ("$('#gamePanes').css('background-color', 'rgba(0, 0, 0, 0)')")
JS.eval ("$('#statusVars').css('background-color', 'black')")
JS.eval ("$('#statusVars').css('color', 'peru')")
request (SetInterfaceString, "PlacesObjectsLabel=Objects")
JS.eval ("$('#inventoryAccordion.ui-widget-content').css('background', 'black')")
JS.eval ("$('#inventoryAccordion.ui-widget-content').css('color', 'peru')")
JS.eval ("$('#statusVarsLabel').css('background', 'black')")
JS.eval ("$('#statusVarsLabel').css('color', 'peru')")
JS.eval ("$('#inventoryLabel').css('background', 'black')")
JS.eval ("$('#inventoryLabel').css('color', 'peru')")
JS.eval ("$('#placesObjectsLabel').css('background', 'black')")
JS.eval ("$('#placesObjectsLabel').css('color', 'peru')")
JS.eval ("$('#placesObjectsAccordion.ui-widget-content').css('background', 'black')")
JS.eval ("$('#placesObjectsAccordion.ui-widget-content').css('color', 'peru')")
JS.eval ("$('.ui-state-active').css('border', '1px solid darkgoldenrod')")
JS.eval ("$('.ui-widget-content').css('border', '1px solid peru')")
JS.eval ("$('#gamePanesFinished').html('<h2></h2>')")
JS.eval ("$('.ui-button').css('background', 'black')")
JS.eval ("$('.ui-button').css('border', '1px solid peru')")
JS.eval ("$('.ui-button-text').css('color', 'peru')")
JS.eval ("$('.ui-button').mousedown(function() { $(this).css('background-color', 'peru'); } )")
JS.eval ("$('.ui-button-text').mousedown(function() { $(this).css('color', 'black'); } )")
JS.eval ("$('#gameBorder').mouseup(function() { $('.ui-button-text').css('color', 'peru'); } )")
JS.eval ("$('#gameBorder').mouseup(function() { $('.ui-button').css('background-color', 'black'); } )")
JS.eval ("var styleSelecting = $('<style>.ui-selecting { color: black; background-color: peru;}</style>');  $('html > head').append(styleSelecting)")
JS.eval ("var styleUnselecting = $('<style>.ui-unselecting { color: peru; background-color: black;}</style>');  $('html > head').append(styleUnselecting)")
JS.eval ("var styleSelected = $('<style>.ui-selected { color: black; background-color: peru;}</style>');  $('html > head').append(styleSelected)")
JS.eval (" var arrowUrl = 'images/ui-icons_f9bd01_256x240.png'; var styleArrow = $('<style>.ui-state-default .ui-icon { background-image: url('+ arrowUrl +'); }</style>');  $('html > head').append(styleArrow) ")
JS.eval ("$('#cmdCompassN').css('background', 'black')")
JS.eval ("$('#cmdCompassE').css('background', 'black')")
JS.eval ("$('#cmdCompassS').css('background', 'black')")
JS.eval ("$('#cmdCompassW').css('background', 'black')")
JS.eval ("$('#cmdCompassNW').css('background', 'black')")
JS.eval ("$('#cmdCompassNE').css('background', 'black')")
JS.eval ("$('#cmdCompassSW').css('background', 'black')")
JS.eval ("$('#cmdCompassSE').css('background', 'black')")
JS.eval ("$('#cmdCompassU').css('background', 'black')")
JS.eval ("$('#cmdCompassIn').css('background', 'black')")
JS.eval ("$('#cmdCompassD').css('background', 'black')")
JS.eval ("$('#cmdCompassOut').css('background', 'black')")
JS.eval ("$('#cmdCompassN').css('border', '2px solid peru')")
JS.eval ("$('#cmdCompassE').css('border', '2px solid peru')")
JS.eval ("$('#cmdCompassW').css('border', '2px solid peru')")
JS.eval ("$('#cmdCompassS').css('border', '2px solid peru')")
JS.eval ("$('#cmdCompassNW').css('border', '2px solid peru')")
JS.eval ("$('#cmdCompassNE').css('border', '2px solid peru')")
JS.eval ("$('#cmdCompassSE').css('border', '2px solid peru')")
JS.eval ("$('#cmdCompassSW').css('border', '2px solid peru')")
JS.eval ("$('#cmdCompassIn').css('border', '2px solid peru')")
JS.eval ("$('#cmdCompassOut').css('border', '2px solid peru')")
JS.eval ("$('#cmdCompassU').css('border', '2px solid peru')")
JS.eval ("$('#cmdCompassD').css('border', '2px solid peru')")
JS.eval ("$('#compassLabel').css('background', 'black')")
JS.eval ("$('#compassLabel').css('color', 'peru')")
JS.eval ("$('#compassAccordion').css('background', 'black')")

This is great coding! Thank you very much.

I had a question though, how do you make the arrows red? (The ones you click on to open and close the inventory screen, for example)

The arows are images and we have not found a way to change them

Edit: Oops. I misread.

I'm not sure entirely how to change them. By default, the code I originally posted changes them to red when clicked. The code that's there now keeps them yellow.

The compass and the arrows that appear when the panes are closed use the same arrow URL. When the panes are open, it uses a different arrow URL.

It has to do with the style used, but I had no reason to change them from yellow in my game, so I never asked Jon to figure it out. Playing around with this code:

JS.eval (" var arrowUrl = 'images/ui-icons_f9bd01_256x240.png'; var styleArrow = $('<style>.ui-state-default .ui-icon { background-image: url('+ arrowUrl +'); }</style>'); $('html > head').append(styleArrow) ")

That's where you need to start.

Pertex wrote:The arows are images and we have not found a way to change them

Get an image file with the right colours, from here:
http://download.jqueryui.com/themerolle ... 56x240.png

You can change the number 800080 to the RGB colour what you want (I guess the file server creates the images on the fly, and will accept any value, but that may not be the case), this is a dark purple I was trying. Save that in your game folder.

Then you just need to do this to get the new icons in your game (again, modifying the number for your downloaded file):

    JS.eval ("$('.ui-icon').css('background-image', 'url(" + GetFileURL("ui-icons_800080_256x240.png") + ")')")

When I get around to learning html~JS coding for the UI, this is going to be extremely helpful for my studying~learning, so thank you very much HaganeSteel and your friend Jon (send my thanks to Jon too!) and Pertex and Pixie !!!

Thanks, Pixie!

HegemonKhan wrote:When I get around to learning html~JS coding for the UI, this is going to be extremely helpful for my studying~learning, so thank you very much HaganeSteel and your friend Jon (send my thanks to Jon too!) and Pertex and Pixie !!!

I should be thanking you for your awesome tutorials on how to program stats and a battle system.