intfiction.org

The Interactive Fiction Community Forum
It is currently Fri Dec 15, 2017 3:29 am

All times are UTC - 6 hours [ DST ]




Post new topic Reply to topic  [ 8 posts ] 
Author Message
PostPosted: Sun Oct 08, 2017 8:23 am 
Offline

Joined: Thu Apr 03, 2014 9:44 am
Posts: 127
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!


Top
 Profile Send private message  
Reply with quote  
PostPosted: Sun Oct 08, 2017 12:09 pm 
Offline

Joined: Tue Dec 25, 2007 10:06 am
Posts: 1526
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.

_________________
BlogTextureVorple


Top
 Profile Send private message  
Reply with quote  
PostPosted: Sun Oct 08, 2017 12:38 pm 
Offline

Joined: Thu Apr 03, 2014 9:44 am
Posts: 127
Code:
"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!)


Top
 Profile Send private message  
Reply with quote  
PostPosted: Sun Oct 08, 2017 12:49 pm 
Offline

Joined: Thu Apr 03, 2014 9:44 am
Posts: 127
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
Code:
[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,
Code:
apply (Vorple style) style to the entire page;
, or I don't know where to put it in the code, or something else. Thanks!


Top
 Profile Send private message  
Reply with quote  
PostPosted: Mon Oct 09, 2017 8:27 am 
Offline

Joined: Thu Apr 03, 2014 9:44 am
Posts: 127
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:

Code:
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?


Top
 Profile Send private message  
Reply with quote  
PostPosted: Wed Oct 11, 2017 7:55 pm 
Offline
User avatar

Joined: Fri Jul 11, 2014 12:50 pm
Posts: 83
You should also change the input and label elements:
Code:
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).


Top
 Profile Send private message  
Reply with quote  
PostPosted: Tue Oct 17, 2017 3:25 am 
Offline

Joined: Tue Dec 25, 2007 10:06 am
Posts: 1526
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:

Code:
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.

_________________
BlogTextureVorple


Top
 Profile Send private message  
Reply with quote  
PostPosted: Tue Oct 17, 2017 9:07 am 
Offline

Joined: Thu Apr 03, 2014 9:44 am
Posts: 127
Awesome, thanks! This is enough to get me going for now.


Top
 Profile Send private message  
Reply with quote  
Display posts from previous:  Sort by  
Post new topic Reply to topic  [ 8 posts ] 

All times are UTC - 6 hours [ DST ]


Who is online

Users browsing this forum: Bing [Bot] and 2 guests


You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot post attachments in this forum

Search for:
Jump to:  
Powered by phpBB® Forum Software © phpBB Group