I see lots of older posts referring to a CSS block, but for the life of me I can't figure out where and how to add CSS without the game throwing an error. Thanks for the help.

Open up your game code (top of browser window, second icon from right) >> find <firstpublished>2016</firstpublished> >> add the CSS block below, immediately after that line:

<css><![CDATA[
    
<style type="text/css">  
       
STYLING GOES HERE
        
</style>
        
]]></css>

Ah. I realize that I missed the ]]>, and that's why it was throwing an error. Thanks!

Bare in mind, though, that the online player for Quest games seems to have an issue/bug seeing the CSS on resume of a save.

Alex or Jay will be able to shed more light on the matter, but I like to hide the command box on my games, and while my CSS does this successfully on first load, the command box returns if your resume from a save point.

You also have to actually output the game.css block, typically using OutputTextNoBr (Print Message without break). And clearing the screen will lose it, as the style element will be lost. Just keep that in mind.

You typically want to output the css block in an InitUserInterface function. That is called by the Quest engine at startup and when loading a saved game - though there is a current bug with that in the web player, as OurJud can attest to.

jaynabonne wrote:
You typically want to output the css block in an InitUserInterface function. That is called by the Quest engine at startup and when loading a saved game - though there is a current bug with that in the web player, as OurJud can attest to.

So, I would add a function named InitUserInterface and it's called automatically, or is there already one in here somewhere?

You can manually add one in Code View. It will supersede the one in the core libraries (which does nothing by default).

Or in the editor, you can click the Filter button at the bottom left and select "Show Library Elements". Then look for the Functions group and search down within it for InitUserInterface (ah, if only alphabetical!). Click on that function, and should see it has no scripts.

It's not editable at this point, so...

Click "Copy" in the top right corner, and it will make a copy in your game that you can edit. You can then add script through the editor or switch to Code View and add code there.

jaynabonne wrote:Or in the editor, you can click the Filter button at the bottom left and select "Show Library Elements". Then look for the Functions group and search down within it for InitUserInterface (ah, if only alphabetical!).

Am I missing something, or isn't that what the little search box at the top of the left pane is for?

Close, but still no cigar. Can't figure out what I've got going wrong now. I'm sure it's a typo somewhere that I'm not catching.

    <function name="InitUserInterface">    
      OutputTextNoBr ("
        <css><![CDATA[        
          <style type="text/css">          
            body {font-size: 50px;}        
          </style>      
        ]]></css>    
      ")
    </function>

Failed to load game.
The following errors occurred:
Invalid XML: 'Element' is an invalid XmlNodeType.

OurJud wrote:Am I missing something, or isn't that what the little search box at the top of the left pane is for?

Well, there you go! I never even noticed before. Much easier.

writtenhigh, doing it inline is much tougher, as you'll have to escape the quotes inside the string, and you can't have line breaks. It would be something like:

   <function name="InitUserInterface">
   <![CDATA[     
      OutputTextNoBr ("<css><style type=\"text/css\">  body {font-size: 50px;} </style></css>")
      ]]>
    </function>

If you plan to add more CSS (especially if it has any complexity), I'd recommend creating a "css" string attribute on the game object (or somewhere), and then just doing

OutputTextNoBr(game.css)

Editing that string attribute will be much easier than an inline string, and you'll have a lot more leeway in terms of line breaks and quotes.

jaynabonne wrote:

"OurJud"

Am I missing something, or isn't that what the little search box at the top of the left pane is for?

Well, there you go! I never even noticed before. Much easier.

Yay! I imparted some wisdom. You should be able to sort out all my problems much easier now

Success! Mostly...

I noticed that Quest doesn't use the <span> tag properly, and prints the room descriptions as <span> with <br> inside. So, basically, CSS text-indents and psuedo-elements won't work as designed. Realistically, it should be printing all of the <span> as <div> or <p>. But since it doesn't, does anyone have a workaround? You know, other than adding a bunch of &nbsp; to the room description? Is there a library somewhere I can hack to turn all of the <span> into <p>?