Trying To Make Each Room With Individual Background

I want each room to have it's own background color scheme but cannot seem to override the general game settings. Any ideas would be greatly appreciated.


I figured out how to change the page itself but still stuck on changing the margin.


Io

I know I have the code around here somewhere... aha!

game.marginscolour = "DarkGray"

I think that only works on game startup. As far as I can tell, marginscolour is only sent to the frontend during UI Initialisation.

If you want to change it during the game:

JS.setCss ("body", "background-color: blue")

I have some loose code that might help.
This code updates a progress bar, if you had one.

JS.eval ("var val = "+val+";$('#progressbar').progressbar({ value: val });")

(I think these are apostrophes. I'll change the code as soon as possible.)

This code is supposed to go with the function UpdateProgressBar (example above). This makes a health bar.

UpdateProgressBar (integer_value)
max_hitpoints = 20
mutiplier = 20/max_hitpoints

This code both hides and shows an inventory label.

JS.uiHide ("#inventoryLabel,#inventoryAccordion")
// /nd
JS.uiShow ("#inventoryLabel,#inventoryAccordion")
msg ("What is your name?")

THIS code contains different colored and different sized panes! They look weird though.

backandborder = "border: darkgrey outset 6px;background:grey"
button = "padding:5px;background:silver;border:outset darkgrey 1px;"
text = "color:black;font-family:georgia, serif"
JS.setCss ("#status", backandborder)
JS.setCss (".ui-accordion-header", "border-radius: 0px;" + backandborder)
JS.setCss (".ui-accordion-content", "border-radius: 0px;" + backandborder + ";border-top:none")
JS.setCss (".accordion-header-text", text)
JS.setCss ("#commandPane", text + ";" + backandborder)
JS.setCss ("#verblinkwait", button)
JS.setCss ("#verblinklook", button)
JS.setCss ("#gamePanes", "margin-top: 16px")
JS.eval ("$('#gamePanes').width(227);")

THIS code has different colored, black and white borders!

backandborder = "border: white outset 6px;background:black"
button = "padding:5px;background:black;border:outset white 2px;"
text = "color:black;font-family:georgia, serif"

Thanks so much for the feedback. I will take these ideas and continue to work on a solution.


Where can I find the CSS file


Where can I find the CSS file

The CSS file for Quest is found in PlayerController/playercore.css in the Quest source. I'm not sure if there's a copy of it in the distribution, but you wouldn't want to edit it in any case as it's shared between all games.

If you want to modify the CSS within a game, you normally do that by using javascript to add style information.

The command JS.setCss(element, style) allows you to add custom style information.
AddExternalStylesheet(url) allows you to load an external stylesheet to override Quest's styling.


This topic is now closed. Topics are closed after 60 days of inactivity.

Support

Forums