Hey all,
I have been a-playing and a thought occurred to me about borders and stuff.

I have used this snippet of code to make a sort-of 3D location banner, but was wondering if I could actually make it more personal.

JS.setCss ("#status", "border: dimgrey ridge 8px;border-radius: 8px;background:darkgrey;")

For instance I have 2 picture files - "rusty_bolt_head.png" and "rusted_plate.png" (I think you may see where I am going with this?) - I was wondering if it is possible to make the rusted bolts surround the rusted plate with the location text inside it?

So where the 'ridged dimgrey border' is = "rusty_bolt_head.png"
and the 'background darkgrey' = "rusted_plate.png"

regards,
-=Darchy=-

You have to play around with the widths and positions, but you can make the big image the background image of an element with the smaller one an actual image tag inside of that.

For example, put this into a "Print a message":

<div id='back-pic' style="background:url('https://i.imgur.com/mBf7TBeb.png');background-repeat:no-repeat;height:192px"><image width='10%' style='margin-top:42px;margin-left:42px' src='https://i.imgur.com/Q1Yd2jRb.jpg' /></div>

OR in code view:

msg ("<div id='back-pic' style=\"background:url('https://i.imgur.com/mBf7TBeb.png');background-repeat:no-repeat;height:192px\"><image width='10%' style='margin-top:42px;margin-left:42px' src='https://i.imgur.com/Q1Yd2jRb.jpg' /></div>")

Note that it doesn't look right on this page, but it does in the desktop player and in this post's preview.

I think the trick is to use percentages instead of pixels...

Surely someone more knowledgeable will chime in shortly.

I did a customer border for Deeper(it is not that fancy!):
http://textadventures.co.uk/games/view/em15b32xd0o-y-ysvgrtcg/deeper

Quest uses HTML, so you are restricted to what works in that context, so I did it as background images, as KV suggests, one at the top for the top border, and a repeating one just a few pixels high that goes down the page.

Ah! now you've both added another ingredient to the pot which would make what I am trying to achieve, visually, more relevant. My html and css skills are somewhat limited.

What I have here (below) may clarify the 'bolted on' panels effect: Specifically the 'location bar' at the top. I thought it may be possible to change the border from ridged to an image and the background also to an image.

Sorry to be a pain.

-=Darchy=-

<asl version="550">
  <include ref="English.aslx" />
  <include ref="Core.aslx" />
  <game name="border_tests">
    <gameid>37379068-e939-437e-8ce1-5d7665ce0ebb</gameid>
    <version>1.0</version>
    <firstpublished>2018</firstpublished>
    <start type="script">
      JS.setCss ("#status", "border: dimgrey ridge 8px;border-radius: 8px;background:darkgrey;")
      JS.setCss ("#gamePanes", "margin-top: 16px")
      JS.eval ("$('#gamePanes').width(227);")
    </start>
  </game>
  <object name="room">
    <inherit name="editor_room" />
    <object name="player">
      <inherit name="editor_object" />
      <inherit name="editor_player" />
    </object>
  </object>
</asl>```

Oh, I didn't read carefully.

This will set a background image in your status bar:

JS.eval("$('#status').css('background-image',\"url('https://i.imgur.com/mBf7TBeb.png')\")")

Brilliant! thanks K.V and I am assuming from this, that if I use 'border-image' instead of 'background-image', thus:

JS.eval("$('#status').css('border-image',\"url('https://i.imgur.com/mBf7TBeb.png')\")")

it will now do the same for the border? (sorry can't get to my laptop at the moment to test it out)

-=Darchy=-

This:

JS.setCss ("#status", "border: dimgrey ridge 8px;border-radius: 8px;background:darkgrey;")
JS.eval ("$('#status').css('background-image',\"url('http://soundimage.org/wp-content/uploads/2018/01/P1030524_Standard.jpg')\")")

Will produce this:

I'm just now about to play with the border, but I have no clue if an image can be used or not (but it looks like you've got it).

JS.setCss ("#status", "border: dimgrey ridge 8px;border-radius: 8px;background:darkgrey;")
JS.eval ("$('#status').css({'background-image':\"url('http://soundimage.org/wp-content/uploads/2018/01/P1030524_Standard.jpg')\",\"border-image\":\"url('http://soundimage.org/wp-content/uploads/2017/10/P1030368_Standard.jpg') 50 round\"})")

I'm stupid, ignore me

JS.eval ("$('#status, #compassLabel, #compassAccordion, #placesObjectsLabel, #placesObjectsAccordion, #inventoryLabel, #inventoryAccordion, #compassTable, .compassbutton').css({'color':'white','background-image':\"url('http://soundimage.org/wp-content/uploads/2018/01/P1030524_Standard.jpg')\",\"border-image\":\"url('http://soundimage.org/wp-content/uploads/2017/10/P1030368_Standard.jpg') 50 round\"})")
JS.eval ("$('.ui-icon').css(\"background-image\", \"url('" + GetFileURL("ui-icon-white.png") + "')\");")

http://docs.textadventures.co.uk/quest/ui-javascript3.html

http://download.jqueryui.com/themeroller/

What mrangel said is probably easier. I've been playing around while adding to my posts and just now saw his post.

This is fun!

Here's my last one:

JS.eval ("$('#status, #compassLabel, #compassAccordion, #placesObjectsLabel, #placesObjectsAccordion, #inventoryLabel, #inventoryAccordion, #compassTable, .compassbutton').css({'color':'white','background-image':\"url('http://soundimage.org/wp-content/uploads/2018/01/P1030524_Standard.jpg')\",\"border-image\":\"url('http://soundimage.org/wp-content/uploads/2017/10/P1030368_Standard.jpg') 50 round\"})")
JS.eval ("$('.compassbutton').css('background',\"url('http://soundimage.org/wp-content/uploads/2017/10/P1030368_Standard.jpg')\");")
JS.eval ("$('.ui-icon').css(\"background-image\", \"url('" + GetFileURL("ui-icon-white.png") + "')\");$('.ui-button-text, .accordion-header-text').css('text-shadow','2px 2px black');")

This is just BRILLIANT! Thanks a million. Off to play...

-=Darchy=-

Want to change the command bar?

https://github.com/KVonGit/QuestStuff/wiki/Command-Bar-Styling#customizing-the-command-bar

This is exactly what I was trying to achieve.

Thanks,
-=Darchy=-

So I've had some time to play and tried this use my local files:

game.loc_bk_image = ("<img src=\"" + GetFileURL("thad_bk_rust.png") + "\" />")
JS.eval("$('#status').css('background-image',\"game.loc_bk_image)\")")

Sadly it didn't work and I have the feeling it maybe something to do with my bracketting.

Thanks for your patience, I do appreciate it,

-=Darchy=-

I was playing around with this last night (cool as usual, KV). Here is the proper syntax for local files:

JS.eval ("$('#status').css('background-image',\"url(" + GetFileURL("thad_bk_rust.png") + ")\")")

Cheers Decoder!!! - Also a quick note to self (and others): Make sure all files are in the correct folder. hehehe.

The list of greets 'mentions' is getting longer :D

:D

So close!

You had:

game.loc_bk_image = ("<img src=\"" + GetFileURL("thad_bk_rust.png") + "\" />")
JS.eval("$('#status').css('background-image',\"game.loc_bk_image)\")")

This would have worked (had the file been in the folder):

game.loc_bk_image = GetFileURL("thad_bk_rust.png")
JS.eval ("$('#status').css('background-image', \"url('"+game.loc_bk_image+"')\");")

..and I think:

JS.eval ("$('#status').css('background-image',\"url(" + GetFileURL("thad_bk_rust.png") + ")\")")

...should be:

JS.eval ("$('#status').css('background-image', \"url('" + GetFileURL("thad_bk_rust.png") + "')\");")

Close, but no cigar huh? ;)

I am getting there slowly. You guys are so amazingly helpful.

-=Darchy=-

Thread copied.

Thanks.

I have always wanted the background of the game pane to be adjustable in height just like the width. I wanted to make the pane look like a scroll but can only get the sides of the scroll not the top and bottom because the pane will cover it.

I color the scroll in the margin image to match the panel. The panel covers the tears showing at the bottom which was good but I want the landscape to go across the top and bottom also showing endings of the curls of the scroll.

Hmmm... I could use your location bar script to hold the landscape and the curls of the scroll... if I change it's width and height. but it would change every time I moved.

Could this be the start of a customizable UI library/plugin request?

SoonGames came up with a great "stylesheet" game tab (Libraries and Code Samples section "StyleSheet.....") and it helped me immensly with extracting some of the panel info, but sadly I am nowhere near as talented with css as others on here.

This could possibly lead to people designing 'themes' - I am rambling, maybe I am going off topic.

-=Darchy=-