Basic CSS with Vorple in itch.io

Authoring Inform 7
1

I’ve figured out how to get an Inform 7 project into itch.io with Vorple to run, but I cannot for the life of me figure out how to tie it to a css file. I have no css experience, so I am googling everything I am trying to do, but I can’t even get font colors to respond to tests.

All I really want is an all-black background (not just text), all text in green with monospace font (ideally Google’s “VT323” font). Can anyone help me walk through that? I greatly appreciate all help, big or small.

I tried initially to do this with Borogrove but it doesn’t seem to be setup for use with CSS files.

2 Likes
2

The Vorple docs have a chapter on CSS: Styling the game with CSS · Vorple

The bit about inclusion:

CSS stylesheets can be included in an Inform 7 project by placing the files to the Materials folder and using the release instruction “Release along with the style sheet”:

Release along with the style sheet "myCustomStyles.css".
3 Likes
3

For the contents of the CSS file, I haven’t tried it but this should help:

@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');

#output {
  color: green;
  background-color: black;
  font-family: VT323, monospace;
}
3 Likes
4

A useful tool when messing with CSS is to run your game in the browser, and open the developer console. F12 might do that, depending on your browser. You can test it right now on this forum page.

A side bar will appear; pull it out so you can see tabs across the top, Elements, Console, etc and make sure Elements is selected. This will show the HTML structure of the document - your game. Hover over an element in the console to highlight it on the web page. Click the triangles to expand an element, so you can dig down to the exact element you want. You can then get the ID of the element for your CSS. For Florian’s example above, it might look like this:

<div id="output">

In the section below you can see the CSS rules that are applied to the element and where they come from.

4 Likes
5

Thanks @CrocMiam for pointing me in the right direction. I was using a website output from Borogrove which does not create a “materials” folder, and so I couldn’t follow the instructions. Now I can see what Inform is telling me about releases, and how to implement them in itch.io. It’s not perfect yet (the font’s are right and the template page is black, but the game background is white when loaded in the browser), but I think I can get closer now, especially with @The_Pixie 's pointers.

Thank you both!

1 Like