Narrat Docs
Search…
Theming the game and UI
This page explains how to use CSS to theme the game and UI
Because narrat games are built using standard web tools (HTML/CSS/JS), it is possible to customise the styling of every element in the game using custom CSS.

How CSS works

In short, CSS is a way to style web elements by giving styling properties to elements selected by a rule. For example:
1
.button {
2
background-color: red;
3
}
Copied!
This rule would give a red background color to any element with the button css class. For more info, look at the w3schools CSS intro and don't be afraid to Google how to do things in CSS

How to use CSS in Narrat

There are two ways to use CSS to customise your UI in Narrat. One is to edit CSS variables provided to override things like common colors, and the other is to write your own CSS classes to override existing ones from the engine.

CSS Variables

Introduction

How CSS Variables work
Here is a list of the CSS variables that exist in narrat:
CSS Variables available to override in Narrat
To see the most up to date list of CSS variables, look at main.css in the engine

Creating custom CSS classes

Setup

The CSS variables above allow for easy customisation of common properties, but for deeper changes the best way is to write custom CSS classes. Most of the UI elements in narrat have a specific CSS class name or id which you can use to write custom CSS for them.
For example, the .interact-button is the CSS class given to the "Continue" button in the game's dialog UI, so writing CSS for it will change how that button looks:
1
.interact-button {
2
background-image: url("img/ui/continue.png");
3
color: rgba(0, 0, 0, 0) !important;
4
}
5
6
.interact-button:hover {
7
background-image: url("img/ui/continue_hover.png") !important;
8
}
Copied!
Note the !important parameter at the end. This helps your CSS property override an existing one in the engine, as it tells CSS to make this value take priority.
To be able to add custom CSS, you need a CSS file. The template already comes with one, but if for any reason you don't have any, all you need to do is create a .css file and import it inside your index.ts.
For example:
  1. 1.
    Create a folder css in the src folder, then a file calledmain.css in it
  2. 2.
    In src/index.ts, add the following: import "./css/main.css";
  3. 3.
    Any CSS you now add in main.css will be loaded in your game

How to find CSS classes to override

Using the devtools

How to find the CSS class and id of elements to theme them

CSS class and CSS id

Once a css class or id has been found to edit an element, it's simply a matter of adding CSS for it. To create CSS for a class, the selector needs to start with . followed by the class name. For an id it's #. For example:
1
.interact-button {
2
/* This selector applies to the CSS class named "interact-button"
3
color: red !important;
4
}
5
6
#interact-button {
7
/* This selector applies to the css ID named "interact-button"
8
color: red !important;
9
}
Copied!
Be careful not to confuse CSS classes and ids, as the syntax for their selector is different.

List of useful CSS classes to override

This list is a work in progress. If you can't find something or if it's been changed, use the instructions above to find it yourself in the game

Buttons

Buttons CSS

UI Elements

Other UI Elements
General modal CSS
Specific popups CSS

Skills Screen

Skills Screen CSS