How do you change the colour of input text in Parchment?

I’m just about to publish a game that uses Parchment and realised that the text colour does not change the colour of the prompt and input text. So, I have white text on a black background, but the input text is still black on a black background. Not exactly very user friendly.

I can’t find anything that looks promising in the parchment.css stylesheet. Help please!

1 Like

In such cases, it’s often helpful to use the web browser’s inspection tools (usually accessible by pressing F12). In the top left corner of those tools, there’s a button which allows you to inspect any element on the web page. Using that to check out the input field, you can see that it’s an input element with class “LineInput”, and there’s a corresponding section in the CSS file:

.LineInput input
{
	background: none;
	border: 0;
	font: inherit;
	outline: 0;
	padding: 0;
}

Adding color: green; (etc.) to that block seems to do the trick.

EDITED TO ADD:
As discussed below, it turns out that I looked at an older version of Parchment. The principle still applies, but the role of the specific sections changed a little. Currently, the correct section to modify is:

input.Input {
  background: none;
  border: none;
  font-weight: 700;
  left: -10000px;
  margin: 0;
  padding: 0;
  position: absolute;
  outline-style: none;
  outline-width: 0px;
  width: 5px;
}
3 Likes

Thank you. By a process of trial and error, I came to the same conclusion.

I was getting a bit worried because I had just submitted two games to the Text Adventure Literacy Jam 2022. The deadline was extended by two days, so I thought I’d use the time to get the Parchment stuff working so that I could have a browser-based version, as well as the downloadable z5 file. It’s something that I’ve been meaning to do for ages. Oh, what a nightmare that was. (Your earlier help in another thread was very useful for this.)

Anyway, after submitting, I realised that the input text was invisible. In case it’s not obvious, I did this in a bit of a hurry and I haven’t tested the Parchment versions yet, so I hope to goodness that they don’t break. I’ll give them a test tomorrow.

3 Likes

You’re welcome!

As a player, I usually prefer playing in an offline interpreter, but I think it’s definitely a good idea to offer an online browser-based version with Parchment, too.

Kudos for submitting two games! Good luck!

3 Likes

The answer depends on whether you’re compiling to Glulx or Z-code.

For Glulx, just use Glulx Text Effects to set the colour for “input-style”.

For Z-code, well if you’re changing text colours with Basic Screen Effects, those colours should be applied to the input already. It would be a bug I haven’t seen before if they’re not.

Sorry, I didn’t say. These are Inform 6 games written using the PunyInform library, not Inform 7. They’re compiled to z3 and z5.

The html page is my own based on @zarf’s OneColumn template. All the colours outside the game proper are defined in zarf’s style.css stylesheet, whereas the colours in the game are defined in Parchment’s parchment.css stylesheet. I didn’t do any colours in the game’s source code, as this only allows for primary colours and you can’t do colours in z3. (The z3 file is for retro platform support, but I haven’t built those yet.)

Wait a minute. The css class definition that you provided is for LineInput, but there is no LineInput in my parchment.css. It’s Input. I added color:white to that and it looks fine for me, but someone is playing it with a Safari browser on Mac and the input colour is yucky brown. The element properties are input#win102_input.Input.LineInput. What’s going on?

Elements can have multiple classes and that one has both Input and LineInput so both .Input and .LineInput CSS rules target it equally.

If you post a link to the game, I can check it with Safari’s dev tools to see which rule causes the brown color.

Thanks for looking into this. I know that an element can use multiple classes. My question is where is the LineInput class meant to be defined? The only reference I can find in parchment-for-inform7.zip (downloaded yesterday) is in main.js.

I checked the game and the issue is that past commands in the scrollback are brown because they’re not active input anymore so they don’t have Input or LineInput classes. The current input looks correct.

vampire

If you want to edit the existing rule to fix it, it’s this one:

span.Style_input {
    font-weight: 700;
    color: #300000;
}

or if you want to override it, use this:

.BufferLine span.Style_input {
    color: white;
}

(parent class added to make sure the rule is more specific than the existing one)

Not sure I quite understand the question… the interpreter adds classes to the elements as it builds the layout for the output. It’s not really relevant how and where it does it if you just want to change the styles.

2 Likes

Thanks. I’ll give that a try.

By “where is it meant to be defined?”, I thought that the LineInput class may have been missing from the stylesheet, but the (somewhat hard to read) Javascript looked like it may have been defined dynamically. From what you’ve said, it sounds like that is the case.

If you’re using the current parchment-for-inform7, the LineInput is just for a currently active input box, and is used for layout, not styling with colours etc. Juhana has identified the classes that are used for styling. Though for Z-Code, I didn’t think it actually used the input style… colours were meant to be set through the Z-Code colour opcodes instead. Anyways, try editing the classes Juhana suggested.

Ah, sorry! When I wrote my post, I had just opened a random Z-code game from the current Spring Thing (Wry) and used the F12 tools as described. The game must be using an older version of Parchment, I didn’t pay attention to that.

The method still applies, of course, and as you said, the corresponding section for the active prompt is now input.Input. (LineInput, too, but it’s used a bit differently now.)

I’ll add a note to my post above.