Styling

Cascading Style Sheets (CSS)

A Quest 6 game is essentially just a web page, and like all web pages you can use Cascading Style Sheets (CSS) to add styling. CSS is a vast topic - think of all the fancy web pages you have ever seen, most of that was done (at least in part) with CSS. There are plenty of resources on the internet about CSS, however this page gives an overview. Here we look specifically at how Quest 6 relates to CSS.

Files

CSS information can put in various places, but in most instances it is best done in a file. In fact, Quest uses several files to set up the view. the first is assets/css/default.css, which sets all the default values.

The second is the built-in theme. Currently there are only two, "sans-serif" is the default, and "serif" is the alternative. Both set the fonts to something fairly plain and hopefully easy to read. You will see this already in your settings.js file.

settings.themes = ['sans-serif']

The third is game/style.css. Generally this is the file you should be editing. As this is applied last, settings here will over-ride other settings. By default it is empty.

Working with CSS

The best way to use CSS with Quest 6 is to make a few changes at a time in game/style.css, then view it in your game (click reload/refresh to see changes). If you open the "developer tools" window with F12 and go to the "Elements" tab, you can get a better idea of what is happening if it does not look as you expected. It will show you the hierarchy of elements at the top or left, and if you click on one, the rules governing is style will appear at the bottom or right, and you can see if you rule is there and what might over-riding it.

This example sets two fonts, one for titles and the side panes, the other for text. It then sets the background colour for the individual side panes.

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

body {
  font-family: 'Gruppo', sans-serif;
}

.default-h {
  font-family: 'Ranchers', cursive;
} 

.pane-div {
  font-family: 'Ranchers', cursive;
  background-color: aliceblue;
}  

Supporting Dark Mode

Users with some visual impairment may find it easier to see light text on a dark background, and Quest 6 offers the DARK command to handle that. However we do need to setup the CSS accordingly.

The way dark mode works is that an additional set of CSS instructions gets added, a class called ".dark-body". Each CSS element that changes the colour needs to also have a dark mode version. The above CSS would be better like this:

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

body {
  font-family: 'Gruppo', sans-serif;
}

.default-h {
  font-family: 'Ranchers', cursive;
} 

.pane-div {
  font-family: 'Ranchers', cursive;
  background-color: aliceblue;
}

.dark-body .pane-div {
  background-color: darkblue;
}

In normal mode the text is black, when the ".dark-body" is added, that overrides the default, and the text is white. For the side panes, the modified background colour is "aliceblue", but now when dark mode is enabled it becomes "darkblue".

NOTE: The ".dark-body .pane-div" selector says apply this to any element that has the "pane-div" class itself and "dark-body" class in one of its parent elements.

Making old text more obvious

If some commands can produce a lot of text, you might want to signal to the player where it starts. You can use CSS to do that, as Quest will add the "old-text" class to all the previous text. This example will make the old text grey (if you choose to change the colour, do test in dark mode).

.old-text {
  color:grey;
}

This example makes the old text smaller.

.old-text {
  font-size:80%;
}

This example, which could be used with one of the above, hides meta, parser and error messages.

.old-text.meta, .old-text.error, .old-text.parser {
  display:none;
}

NOTE: The ".old-text.meta" selector says apply this to any element that has both "old-text" class and the "meta" class - compare to the selector we used for dark mode, where the space indicated one class was in the parent. A comma is used to separate all that are allowed, so the whole selector is saying apply to any element that has both "old-text" class and the "meta" class OR has both "old-text" class and the "error" class OR has both "old-text" class and the "parser" class.

Quest 6 Elements

For reference:

Element	Comment
body	Everything on the page is inside the body element
#main	The main page, i.e., everything but the side panel
.default-p	Standard output from the game
.default-h	All headings
.default-h2	Heading, the game title
.default-h3	Heading, the game sub-title
.default-h4	Heading, the location name
.input-text	Text the player has typed will be echoed back to the screen with this
#textbox	The widget the player types into
.meta	Output that is about the game, rather than of the game (used by HELP and ABOUT).
.parser	Messages from the parser saying it does not understand
.error	Errors in the code will be reported with this
.debug	A message for debugging only
.old-text	This class gets added to output once a new command is handled
-	-
.side-panes	The side panel
.pane-div	Each panel in the side panel
.pane-div-finished	A single panel in the side panel that appears when the game ends
.side-pane-heading	The titles for the panes
#compass-table	The compass (which uses a table to lay out the buttons)
td.compass-button	The compass button
span.compass-button	The text on the compass button
#status-pane	The status pane
.item	The item entry
.sub-item	An item in a container
.item-action	The verb the player can click on.
-	-
.cmdlink	Links in the text that run parser command
.menu-title, .menu-option	For menu text in showMenu()
.continue	Text telling the player to click to continue
#dialog	The character creation dialog

A Note About Colours

See here for how colours should be used.

A Note About Fonts

As with Quest 5, you can use Google fonts. You can add as many as you like, though from an aesthetic point-of-view I would suggest you limit it! Go here to select the fonts. Select the ones you want by clicking the font family one the front page, and then clicking the plus sign at the top right of the font (called something like "Select Regular 400"). The web site will remember each selection. When you have all that you want, click the bar at the right, to see the list. If that has disappeared, go back to the Google fonts home page and start again. It should remember your selections, and have the panel on the right.

About half way down the box you should see "@IMPORT", click on that and something like this should appear:

<style>
@import url('https://fonts.googleapis.com/css?family=Charm|Lato');
</style>

You just need that middle line (which should include all the fonts you picked). Copy that one line to the top of the "style.css" file.

Go back to the web page, and a bit lower down you will see a number of lines like this (one line for each font you picked):

font-family: 'Lato', sans-serif;
font-family: 'Charm', cursive;

You need to copy these to the styles you want them to apply to. Here is an example of the first few lines of the "styles.css" file adding two new fonts, and applying one to the default to the body element and the side panes, and the other to headings:

@import url('https://fonts.googleapis.com/css2?family=Edu+VIC+WA+NT+Beginner&family=Rye&display=swap');

body, .pane-div {
  font-family: 'Edu VIC WA NT Beginner', cursive;
}

.default-h {
  font-family: 'Rye', cursive;
}

The important elements are probably:

• body for the main text
• .pane-div for the side panes
• #input input for where the player types
• .default-h for the headings (you can use , .default-h3 and .default-h4

Ensure you select fonts that are easy to read, and, for the side panes, reasonably compact.

Look at assets/css/sans-serf.css for an example. If you are using different fonts, you should remove this from the settings.themes list to prevent the unused fonts getting downloaded needlessly.