Editing HTML and CSS Layout

cybernetsurfer7
By default, the Quest game interface is set up to a ~1000px wide screen as far as I can tell. I'm pretty knowledgeable in HTML and CSS and could easily change it to what I want, I'm just not sure how to get to where those are set. I'm trying to redesign it so that it fits based on percentages (for a reactive site) rather than on set pixels. I've already tried it through the HTML tools and got it to do exactly what I wanted, but again, not sure how to actually make this a permanent change. If anyone could point me in the right direction that'd be great.

cybernetsurfer7
Ah! Well, if I'd have looked around a little more in the wiki I'd not have had to post. For anyone looking for this in the future, check out this page: http://quest5.net/wiki/Modifying_the_UI_(Advanced)

cybernetsurfer7
Well, I may have to go back on my previous post. I've followed what they suggested but it doesn't really seem to be working. Any ideas?

george
I think the problem is that as of 5.4 you're not supposed to insert HTML, but use msg. See http://quest5.net/wiki/Upgrade_Notes#Up ... _Quest_5.4

the insert script command is obsolete, as you can directly write HTML with msg



If you look around on the forum for CSS, msg, etc. you'll see how to modify stuff.

edit: OK, this should help, viewtopic.php?f=10&t=3682#p24555

cybernetsurfer7
Ah! There it is then. Foiled by out of date wiki information (well, out of date if you're using the latest version anyway). Thanks for that tip about msg. The fix I ended up going with was writing a .js file to overwrite the styling information of the document. I got it to work the way I wanted which serves the purpose. Now it's set up to use percentages for my reactive website! Thanks again for the help.

Liam315
I had a bit of trouble getting this to work at first as well. You should double check that your solution continues to work on the startup of a saved game, and (if you use or intend to use it anywhere in your game) after running the ClearScreen function.

cybernetsurfer7
Thanks Liam for double checking me on this. Yes, it works after the ClearScreen function is run (I run that every time you enter a new room). However, you are correct that it does reset to the standard layout after it gets loaded from a save (predictably because the start up script doesn't run). I'll look into this.

Edit: Nailed it! I knew that some function had to initiate before the game could load, whether it was from the start script or from somewhere else. Turns out I was right. The function "InitInterface" (presumably short for "Initiate Interface") is the code which runs the setup for the whole interface section (don't you love the obvious!) I have this code set up as a .js file:

function setUI() {
elm1 = document.getElementById("gameBorder");
elm1.style.width = "100%";
elm1.style.border = "none";
elm2 = document.getElementById("gameContent");
elm2.style.width = "96%";
elm2.style.padding = "20px 2% 0px 2%";
elm3 = document.getElementById("status");
elm3.style.width = "100%";
elm3.style.position = "relative";
elm3.style.border = "none";
}


Essentially this just changes various attributes of the html and css to make the page percentage based. Useful if you're implementing this into a website, as I am (woot <object> tag). Then I just went into the InitInterface function, went all the way to the bottom after it's done setting everything up and added this:

NOTE: If you use this .js code, it's intended for a total fill, 100% of whatever tag/window it is in and it also assumes there are no side panels. If you are using side panels or want different percentage fill you'll need to set up the percentages differently.

request (RunScript, "setUI")


It works like a charm no matter if it's loaded fresh or from a save. Thanks again for pointing that out Liam!

Liam315
Cool, glad you got it working :) I thought it was probably InitInterface but it's been a while since I did it and I couldn't remember if you needed another step after that. I'd be interested to play your game when it's finished, it sounds like there might be a few things in there that I'm going to wish that I had thought of to implement in my own game. When you get to the beta testing stage let me know and I'd be happy to help out.

Pertex
In Q5.5 you can overwrite the empty function InitUserInterface, so you don't have to overwrite the core function InitInterface.

cybernetsurfer7
Ok, so I made a switch to Q5.5 and am kind of regretting it now. The interface is no longer working correctly. I have my .js running through the InitUserInterface function now, which works when I play it on my computer. However, when I publish it and play it online, it no longer works correctly. The top bar no longer shows and neither does the room name. Unsure what's happening here.

EDIT: To an even greater degree, if I publish it and play it on my computer it doesn't work correctly. It works if I play it from the Quest program but not by itself.

cybernetsurfer7
Further Update:

What is happening is the .js file which is being run under InitUserInterface is running before the css page for playercore.css is loaded in. The playercore.css is then overwriting the styling rules of the .js. It needs to be added in after. How do I get that to work?

cybernetsurfer7
Dang... Well I'm not totally sure that I can call myself a "techie" person anymore. Once I closed Quest and restarted it, everything worked like a charm. Well.. there you go ladies and gentlemen. Once again, the magical restart fixes everything.

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

Support

Forums