Black UI for those who want dark theme in their game now it's works in online game , thanks to Pertex



just extract the attachment file in your game folder, it's contain 5 images , online.js and style-black-offline.js

next you need set a couple code in your game, here's the step:

1. add new javascript in Advanced --> Javascript --> Add , select online.js in dropdown menu.

2. create new function in Function --> Add , give name checkOnline , return type none , add new Parameters named answer then paste this code in script section using code view

if (UCase(answer)="TRUE") {
  AddExternalStylesheet ("http://astral.zz.mu/style-black-online.css")
}
else {
  AddExternalStylesheet (GetFileUrl("style-black-offline.js"))
}

you can see that there's 2 files http://astral.zz.mu/style-black-online.css (for online version) and style-black-offline.js (for offline version), you can customize all you want but don't forget to host your online version because it'll be different from mine after you make a changes.

3. add new script in Objects --> Game --> Script --> Start script , paste this code in code view

JS.testOnline ()

4. enjoy

i already fix about vertical scrollbar in the right panel it's working fine in Quest but when you play online, the scrollbar style just works in webkit browser such as Google Chrome and Safari

wow, looks great!

Finally it's done , the code is in top post.

caberg wrote:don't know where i must put this topic on, if i'm wrong please move this thread to correct section.

this just a psd mockup but i'll make this mockup for my first new game using Quest.

i'll share the code when finished, i hope not too long. lol.

sorry for my bad english, not my mother language.

OMG! This looks amazing! Thanks for posting it.

Looks great, but is not working with published online games. The images are in the subfolder "images" and images can't be called from inside the .quest file by javascript

i'll update about this ASAP. thx for the feedback Pertex.

But if you host the images it will not work in the offline version any more
Is it possible to do something like this with css?

<div style="background-image:url(background2.gif) url(www.test.com/pictures/background2.gif); margin:0px; padding:10px">

So if it does not find the local background2.gif it would search for www.test.com/pictures/background2.gif ?

Pertex wrote:But if you host the images it will not work in the offline version any more
Is it possible to do something like this with css?

<div style="background-image:url(background2.gif) url(www.test.com/pictures/background2.gif); margin:0px; padding:10px">

So if it does not find the local background2.gif it would search for http://www.test.com/pictures/background2.gif ?

well i think i'll stick to place the images in game folder, i think that's will work in both offline and onlines games, what do you think ?

I hope you will find a solution I will test it tonight, too.

caberg wrote:

"Pertex"

But if you host the images it will not work in the offline version any more
Is it possible to do something like this with css?

<div style="background-image:url(background2.gif) url(www.test.com/pictures/background2.gif); margin:0px; padding:10px">

So if it does not find the local background2.gif it would search for http://www.test.com/pictures/background2.gif ?

well i think i'll stick to place the images in game folder, i think that's will work in both offline and onlines games, what do you think ?

Hey! I noticed a small bug. Look at my screenshot. The arrows seem to be white for some reason:

Mareus wrote:

Hey! I noticed a small bug. Look at my screenshot. The arrows seem to be white for some reason:

yeah i'll fix that's small problem after figure out how to integrate this theme into published online game, thx for the feedback btw and nice theme you got there, looks like will be a very good game

If you use something like this

AddExternalStylesheet(GetFileURL("style.css"))

Quest crashes on play. However, if you change the .css file to .js and then use

AddExternalStylesheet(GetFileURL("style.js"))

Then Quest doesn't crash, and it loads the CSS inside the file just fine. (Only in the offline version.)

well that's why my stylesheet doesn't load in published online game

found this after inspect element in published online game when using my stylesheet

<link type="text/css" rel="stylesheet" href="http://textadventures.blob.core.windows.net/gameresources/b6ac1788-fd2e-4e21-886f-614713a131a0/style-black.js">

because it's js file, that's why my stylesheet doesn't load , but if you use .css the game will crash .... damn i hope this will be fixed soon

There seems to be two problems.
1: css files are not included in .quest files
2: external style sheet files within .quest files seem to be not loaded when playing online

I can't find a crash when using .css files but perhaps it could crash when it tries to load a stlye sheet file which is not in the .quest file.

But I found a way to do both. Your offline version seems to work perfectly. For the online version you have to copy the images on an other server. Additionally you need to copy the css file and change the urls of the images towards the other server.
In your game file you can check if you are playing off- or online and load the correct css file.

Here are the game files with the images. You have to change the serveraddress in the aslx file
edit: see files in the first post

And here is the css file to be copied to the external server (with all images). You have to change the serveraddress
edit: see files in the first post

There are only some problems with scrollbars in the online version

Pertex wrote:There seems to be two problems.
1: css files are not included in .quest files
2: external style sheet files within .quest files seam to be not loaded when playing online

I can't find a crash when using .css files but perhaps it could crash when it tries to load a stlye sheet file which is not in the .quest file.

But I found a way to do both. Your offline version seems to work perfectly. For the online version you have to copy the images on an other server. Additionally you need to copy the css file and change the urls of the images towards the other server.
In your game file you can check if you are playing off- or online and load the correct css file.

Here are the game files with the images. You have to change the serveraddress in the aslx file
blackui.zip

And here is the css file to be copied to the external server (with all images). You have to change the serveraddress
style-black-online.zip

THere are only some problems with scrollbars in the online version

Wow you're genius brother, already test it online on my game, it's works perfectly ... ok then this time my turn to polish this theme again.

Hi, so I downloaded this theme and installed it and it worked great! Except I got on quest today to continue my game and I was prompted that quest had an update. I downloaded and installed it and now the side panel is the ugly white default again. Everything is implemented like you said in your posts and it worked before, so this update must have screwed it up. The update was Quest 5.6.1 by the way. I'd really like to get this side panel working again if you can help.

Also I have a quick question, lets say I decided not to update, or i were to roll back to a previous version of quest. The theme should work for me again. But if I were to finish and upload the game, would the theme work for users who have the newer version of quest? I would think not, but if I could roll back and fix this problem for everyone that would be a very easy fix. (I cant remember if quest compiles the game like java code when you finish it, if it does compile the code, I should be able to compile my game in the old version and it would work for everyone right?)