Can't edit CSS

I've been searching online looking for where the style sheet for Quest is. I've tried adding an attribute, adding CSS code directly into my game code, and have used the HTML tools while playing my game.

I'm trying to edit 'playercore.css' which is being loaded by my game as a local object. I can't edit it in the 'source' tab of html tools or anywhere else.

I also tried revealing all hidden files in Quest and looking for stylesheet, css, or playercore.css. I've yet to find anything, I can edit the playercore.css in the html editor and see the results. But even if I click save, and close the game it resets all the changes when I relaunch it.


Went looking around at the wiki, in the guide, on pixie's site and ironically found it under "Library and Code Sample" here on this site.

Download this library, add it to your game, save and reload. Then a new tab will appear under 'game' object. Can edit CSS now.

http://textadventures.co.uk/forum/samples/topic/fusqbwm5i0__zqmmf2egzq/sg-stylesheet-extract-and-set-modified-css-code-from-the-game-interface

EDIT: This didn't work, I can't change the css. I thought it was solved, sorry about that.


There is an AddExternalStylesheet function that might do it (I have never used it). Use it like this:

AddExternalStylesheet(GetFileURL("styles.css"))

Alternatively, you can change CSS in code, as described here:
http://docs.textadventures.co.uk/quest/ui-custom.html


I've been looking at that doc, but I can't get it to work. In CSS I want to input
''''p{ text-indent:15%;}'''
so I can modify my 'object text description' to be indented automatically.

i.e. < p>This is the text for a letter the player is currently examining, if it's not formatted properly a wall of text will be unreadable. </ p>
EDIT: It turned my HTML code into actual code and hid it

I cannot get the external stylesheet to work at all, I input it under the game ui initialization area but it didn't load.
I copied the code from the Quest guide, that worked. But those are all Quest objects being modified. I don't understand how to input css code for text formatting, there's no examples in the guide.

Tried:
Entering the StyleSheet info into the players HTML tools menu (doesn't save)
Entering the css commands into an attribute named "css' or "stylesheet" in the game attributes
Added the code directly into the 'user initialization script'
Tried to use the library (above) to edit the style sheet

Dunno what else to do, the documentation is wonderful for colors, and orientation of the Quest player's objects, but not the font.


You may be on to a looser there - Quest does not use <p> for some reason.

Are you wanting to indent the first line of each paragraph? If using the desktop version, you could override OutputTextRaw with this code:

format = GetCurrentTextFormat("")
JS.addText ("<span style=\"" + format + "\">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;" + text + "</span><br/>")
if (GetString(game, "commandbarformat") <> format) {
  ResetCommandBarFormat
}
requestspeak (text)

i.e. <p>This is the text for a letter the player is currently examining, if it's not formatted properly a wall of text will be unreadable. </p>

If it's just that particular line you want to be indented, you could make the object's description: <p style="text-indent: 15%">This is the text for a letter the player is currently examining, if it's not formatted properly a wall of text will be unreadable. </p>

Using AddExternalStylesheet to add a sheet containing the rule you quoted above, p{ text-indent:15%;} should work fine.
As would putting msg ("<style>p { text-indent:15%;}</style>") in your start script.
But remember that for all the descriptions you want to have the indent, you'd have to include <p> and </p> as part of the description.

If you want all output text to be indented, you could make the CSS rule something like #divOutput * { text-indent: 15%;}; off the top of my head I think that should work.


Well the inline CSS works for the object description, but I can't get anything else to work with CSS in Quest. I'll have to keep working at it I guess. But the issue I was having (indenting text) does have a workaround now.

So thank you for your help.


If there's something that's not working for you, maybe you could link to an example game? Then it might be easier for someone to take a look and tell you what the problem is.


I dunno if this is the right way to link it, I uploaded the aslx to google drives.
https://drive.google.com/file/d/1KcdC-TKOjxMDH7QtnukqKXlkjurKZcn1/view?usp=sharing


OK ... msg ("<style> ... whatever ... </style>") will work, but will be removed when you clear the screen.

You also have AddExternalStylesheet (GetFileURL("style.css")). Does your style.css file contain the same rule?
If so, I would expect that to work fine.

Oh; just to double check. The game has an attribute
<publishfileextensions>*.jpg;*.jpeg;*.png;*.gif;*.js;*.wav;*.mp3;*.htm;*.html;*.svg</publishfileextensions>
You might need to add *.css to that list, so that your CSS file is included in the published game.


If I put the
msg("<-style>" p { text-indent:15%;} </-style>") (note the - signs in style were added so the code wouldn't default to HTML code)
in my 'Scripts when entering a room:' area of game scripts then it works, otherwise I can't get a single change to stick.

AddExternalStylesheet also seems to do absolutely nothing. Start game CSS code only effects the objects in the Quest Player(From the Quest UI guide), but not the text within the game display.

So that's the final workaround that gives you css indents 100% of the time.


Good you found something that works.

You could also do JS.eval("$('<style>').appendTo('head').text('p { text-indent:15%;}')") in your User Interface Initialisation (on the advanced scripts tab).

After a little experimenting, I'm pretty sure that the problem with AddExternalStylesheet() is that your stylesheet isn't where Quest is looking for it. (For GetFileURL to find a file, the file needs to be in your game directory and also a file type listed in game.publishfileextensions)

(note the - signs in style were added so the code wouldn't default to HTML code)

To display code on the forum, put a line of three backticks above and below it. Like this:

```
msg("<style>" p { text-indent:15%;} </style>")
```

or if you want code within a line, you can put a single backtick before and after it: `msg("<p>I can use HTML here!</p>")`

Or change the < to &lt;, which displays as < to anyone viewing the post.


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

Support

Forums