intfiction.org

Hello, I wonder if anyone can walk me through the process of getting a vorple game to work with styling from a css file. I am not very experienced with css, or vorple. Here's what I've got to work so far:

Setting up a local server and getting the vorple interpreter to work.

Including Vorple Screen Effects and being able to use built-in vorple styles.

What I haven't figured out:

How to set up a css file so I can style the whole game at once.

I followed the docs to try to make my own vorple style with css, but the style didn't have any effect, and I don't know whether I'm doing something wrong in vorple or in css.

Thanks!

Could you post the I7 code and the CSS file? If it doesn't work, the most likely explanation is that there are problems with the CSS rules. You can also validate the CSS file at https://jigsaw.w3.org/css-validator/#validate_by_upload.

_________________
Blog — Texture — Vorple

"Testing Cave" by Caleb Wilson.

Include Vorple by Juhana Leinonen.
Include Vorple Screen Effects by Juhana Leinonen.

Release along with the "Vorple" interpreter.

When play begins: say "Midway through life's journey you find yourself in a dark cave."

Cave is a room.

Unfortunately now I'm stuck -- in setting up this new code to test with a simple case, I can't get the vorple interpreter to work at all: on trying to release I get a message saying "You asked to release along with a copy of the 'Vorple' in-browser interpreter, but this can't handle story files which use the Glulx story file format. (The format can be changed on Inform's Settings panel for a project.)" As far as I know I installed the same version of vorple both times: both this new project, and the old one that worked, are v 3/170429

(I'll be away from my computer for a while but will be able to see any response to this in a few hours. Thanks!)

Ooh, I figured at least one part out just now: stupid css error on my part (I had an extra space in there messing everything up.) So the creating a new style part I understand, and how to apply it in one area, with

[new style]blah blah[end style]

.

What I still can't see quite how to do is how to apply the style to the whole page.

Either I'm using this phrase wrong,

apply (Vorple style) style to the entire page;

, or I don't know where to put it in the code, or something else. Thanks!

I've figured a few things out, but I'm still not sure how to apply my css to the entire game.

This is all that's in my css file right now:

body {
   color: black;
   background-color: #ffe6ff;
   font-size: larger;
   font-family: "Times New Roman", Times, serif;
}

It applies to almost everything, but not the prompt or player input. There must be a different element for that?

You should also change the input and label elements:

body, input, label {
   color: black;
   background-color: #ffe6ff;
   font-size: larger;
   font-family: "Times New Roman", Times, serif;
}

In case it help, you can right-click on an element on a web page and choose "Inspect element" (or something like that). You can then experiment with the CSS directly in the browser and see what CSS already applies to what elements.

As for the "apply (Vorple style) style to the entire page" phrase, I think it's not yet implemented, so you have to add the CSS with a CSS file like you did (which is in my opinion better if what you want is to change the overall appearance of the page, not dynamically change it during play).

Sorry about the late response. CSS rules work similar to I7 rules in that the most specific rule applies. The rule on the body element applies if there isn't anything more specific. To target the prompt you can do this:

body, #lineinput-prefix, #lineinput-field {
   color: black;
   background-color: #ffe6ff;
   font-size: larger;
   font-family: "Times New Roman", Times, serif;
}

#lineinput-prefix is the caret and #lineinput-field is the prompt input field.

_________________
Blog — Texture — Vorple

Awesome, thanks! This is enough to get me going for now.