I need to link an external stylesheet to my game. I've tried many options, but I can't edit EVERY element, only some.

Oh my god, I've been trying for weeks.


I'm a big fan of web development, but my skills really only amount to formatting and styles. I can code in Quest, that's no problem, but for some reason I just can't figure out how to globally (and I mean GLOBALLY) edit my CSS. I'm currently using code view, which I guess is the only option for this kind of thing.

Here's what I've already tried.


I tried putting this code:

<css><![CDATA[
  <style>
        
  </style>
]]></css>

into the game object, and putting JS.addText (game.css) into the start script.

This doesn't allow me to edit the map background, or any other element that has an inline style="" attribute within the HTML.

I also tried putting THIS code:

<object name="interface_obj">
  <cssOverride><![CDATA[
    <style>
        
    </style>
  ]]></cssOverride>
</object>

into the game object, then putting JS.addText (interface_obj.cssOverride) into my inituserinterface script (I followed these instructions on overriding InitUserInterface.

This still doesn't let me edit ALL elements, only some of them, like #txtCommand or #status. The others had no effect. Pesky inline style attributes!!

I even tried following Quest's documentation tutorial on customizing the UI, but I don't like how tedious it is. I also failed to edit those pesky aforementioned elements.

Lastly, I tried putting AddExternalStylesheet(GetFileURL("Stylesheet.css")) AND AddStylesheet(GetFileURL("Stylesheet.css")) (on separate occasions) while having Stylesheet.css in my game's main folder.

My Stylesheet.css is the EXACT same CSS that I used in my other attempts above, but they don't work. However, when I try to save Stylesheet.css while the game is running, it says I don't have permission. So it's reading the file, but not... using it...? What the hell am I missing?!


What I wish would happen:

I link an external stylesheet to my game and have any element, ID, or class respond to that CSS. I'm able to change the grid map's background, customize the panels completely, or even make the game look like an outdated government website if I wanted to.
I have full control, just like I do with any old HTML file on my hard drive, and I can just look up elements with HTML tools.

I have read countless other posts on here regarding external stylesheets.

Some of them say they got it to work, but I just can't get mine working, for some reason. I even tried downloading that one stylesheet library that's supposed to extract the CSS and let you edit it, but I guess it's built for the newest version of Quest, which crashes upon loading any file. Even when making a new game.


Any and all help is greatly appreciated. Suggestions needed. How did YOU get yours to work?

Update.

Destroyed game file by deleting StyleSheet.aslx from included libraries, saving, and reloading the game file. I was just trying to fucking unload it. I don't know what I'm doing. My game is gone until I figure out how to fix this error.
Failed to load game due to the following errors:
* Error: Error adding type 'cssextern' to element 'game': No element 'cssextern' of type 'ObjectType'

Anyone know how to fix this?


Just kidding. I fixed it with a text editor.


, but I guess it's built for the newest version of Quest, which crashes upon loading any file. Even when making a new game.

I'm still on Q 5.7.w and I'm using that lib.
Why it crashes your game.... I honestly have no idea. If you do manage to get it to work though there's a big window on that tab where you can just paste all your CSS in.


This doesn't allow me to edit the map background, or any other element that has an inline style="" attribute within the HTML

Inline style attributes override stylesheets.

If you want to override the inline style attribute, you need to change the inline style.
Like this:

JS.eval("$('#elementId').css('background-color', 'green');")

That will modify one CSS property of the specified element or class, leaving all others as they are. Note that this finds all currently-existing elements which match the selector'#elementId', and adds style="color: green" to them (as well as removing any 'color' properties from any existing style="" attributes). Therefore it will not affect an element which is created after the script is run.


You should also be able to use the CSS !important declaration.
For example:

#txtCommand {
  color: red !important;
}

This tells the browser that this rule cannot be overruled by a style="" attribute.


Holy shit, thank you!
That is exactly what I needed! You're a life saver.


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

Support

Forums