Directly editing extensions. templates, and CSS
In rare cases, we may want to edit the default CSS for our projects. Perhaps we want to apply a change to every one of our projects without having to code it every time. Perhaps, on the other hand, we need to add something that is too complex for a css-set-fast string to handle.
In the first case, my own default CSS contains this setting for honoring white space.
For instance, I customize the amount of extra .play area reserved on-screen. If the screen is not at least a specific width, it cuts out the .play gutters altogether.
As a reminder, most game-specifc CSS is located where user documents are located here: Inform/Templates/Bisquixe/glkote.css. If we are usingifsitegen.py, we will need to update the same file within our bisquixe.zip, too.
/* ATTEMPT TO PERFORM MEDIA QUERY */
@media screen and (max-width: 900px) {
#gameport {
left: 0%;
right: 0%;
bottom: 0%;
top: 0%;
}
.BufferWindow {
padding: 20px;
}
}
@media screen and (min-width: 901px) {
#gameport {
left: 18%;
right: 18%;
bottom: 0%;
top: 0%;
}
.BufferWindow {
padding: 20px;
}
}
If we haven’t looked at CSS before, this can be daunting! However, because CSS is so well-documented, finding examples and sample code is usually easy. The top snippet specifies behavior for windows with widths of 900px or less. The second specifies anything larger.
When editing CSS, we should comment out original entries rather than deleting them, just in case we need a way back. CSS comments are bracketed between /* and */.
As many examples in this thread demonstrate, there are many cases where honoring white-space is desirable. This can be set globally by editing the CSS:
/* configuring white space */
.BufferLine {
white-space: pre-wrap !important;
}
Because so much of the Simple Multimedia Effects extension uses Inform 6, a lot of it is beyond my—I speak only for myself—understanding. However, we still might have good reason to edit it. As previously discussed, Inform can only accept .ogg , .midi , .mod , and .aiff files. Meanwhile, mobile Safari browsers only accomodate bisquixe sounds formatted as .MP3s.
By default, Bisquixe is hard-coded to affix an .mp3 extension to a sound file. If for some reason authors wish to disable this, Simple Multimedia Eeffects can be edited. IDE users will edit extensions there. Simply select File->Open Installed Extension and then browse to the desired file. In this case, the code has been altered in this way:
To upload-audio (Temp - a text) with internal name (Temp1 - a sound name):
let tempid be the Glulx resource ID of Temp1;
[ let tempname be "[temp].mp3";]
let tempname be "[temp]";
add-audio tempname with id tempid;
Note that the original code has been commented out rather than deleted. This is always a good practice!
In practice, editing the building blocks of our web games is seldom necessary, and care should be taken to consider the implications of making global changes to our authoring environment.