Skip to content

Stylesheets

Jump to bottom
Mackenzie McClane edited this page Aug 10, 2020 · 9 revisions

You can add new stylesheets to Wayward in order to make your UI appear the exact way you want it to, or to tweak Wayward's existing UI.

Generating CSS stylesheet templates with +mod create

In a console, simply run a command to set up a stylesheet in your mod. For more information on this command, see this guide.

cd "C:/Program Files (x86)/Steam/steamapps/common/Wayward/mods"
..\wayward.cmd +mod create HelloWorld +stylesheet

Table of Contents

  1. CSS Starter Guide
  2. Wayward's CSS Variables

CSS Starter Guide

You'll probably want to understand a bit about how CSS works before attempting this. Some basic hints, if you want to give it a whirl anyway:

  1. Open the DevTools by enabling Developer Mode (in the Developer section of the Options menu) and hitting "Toggle Developer Tools".

  2. In the top-left corner of the DevTools, there's a little icon that looks like a mouse pointer over a rectangle. Click that, and then click a UI element.

  3. Look at the Elements panel. The highlighted part should be the HTML definition of the UI element you clicked. Basically, the entire UI for the game is made up of these HTML elements, and then the HTML is "styled" with CSS.

  4. Look at the Styles panel. The rule that appear in this panel are the ones applied to the HTML element you have highlighted in the Elements panel. Here's an example of a style rule you might see:

.screen {
    position: fixed;
    width: 100vw;
    height: 100vh;
    z-index: 100;
}
  • Everything within the curly brackets {} are the "properties". Properties are formatted like: <property>: <value>;
  • .screen is the "selector". This is how it chooses which HTML elements each rule should apply to.

  1. Try adding a new property, for example background-color: red; should set the background colour of the HTML element to red.

    • If you add it to a rule that targets multiple elements, all the matching elements will gain a red background.
    • If you add it to the rule of the element.style selector at the top of the list, only that single element will gain the red background.

  2. One thing that can be useful for figuring out the styles you want to add without having to reload the game is to use the "Inspector Stylesheet" feature of the DevTools. Click the "New Style Rule" button in the Style panel of the DevTools, it's a plus icon in the upper-right corner.

  3. Edit the selector and add new properties to your rule, until everything's working as you like. Then click where it says "inspector-stylesheet:n" on the right of your selector. This will bring you to the "Sources" panel, which contains a fully-formatted CSS file that you can copy and paste into a .css file in your mod!

  4. Create a CSS Stylesheet for your mod by creating a .css file in your mod directory and adding the path to the "stylesheets" array in your mod.json.

  5. Add a rule to your stylesheet.

* {
    font-family: "Comic Sans" !important; /* yep, I went there */
}

For more information see Mozilla Developer Network's CSS Guide and CSS Reference.

CSS Variables

Most of the CSS variables that get reused over our stylesheets are defined on :root, which in this case is the <html> element.

Colors

We have a lot of base colors defined for Wayward, split up between our color palette and what we call "reference colors". See: Viewing a full list of CSS variables

Color Palette

Each color definition in the color palette also comes with an associated -r, -g, and -b variable for the individual channels. Generally, you should not override the color palette colors, because the game and other mods can depend on certain colors being the way they are.

Reference Colors

Other colors that get reused between multiple components (for example, the background color of an interactable element), we also will have a CSS variable for. These generally do not have -r, -g, and -b variables defined.

If you need to override colors of elements, override these! (If an element's color does not have a reference variable, the best practice is to override the color with a ruleset targeting the element itself.)

Scale

Have you ever wondered how Wayward's UI scaling is done? These variables are the key! When you resize the viewport, Wayward figures out whether the UI scale should be adjusted, and then stores the scales as CSS variables on <html>.

Variables

  • --scale — the current scale. This has no lower or upper bound.
  • --scale-floor — the current scale, at minimum 1.
  • --scale-floor-quarter — the current scale, at minimum 0.75.
  • --scale-floor-half — the current scale, at minimum 0.5.

Usage example:

  • width: calc(10px * var(--scale)) — By default, this element will be 10 pixels wide. If the UI scale is set to 2, the element will be 20 pixels wide. If the UI scale is set to 0.5, the element will be 5 pixels wide.
  • height: calc(100px * var(--scale-floor)) — By default, this element will be 100 pixels tall. If the UI scale is set to 2, the element will be 200 pixels tall. If the UI scale is set to 0.5, the element's size will be clamped at 100 pixels tall.
  • left: calc(1000px * var(--scale-floor-quarter)) — By default, this element will be offset by 1000 pixels away from the left side. If the UI scale is set to 2, the element will be offset by 2000 pixels instead. If the UI scale is set to 0.5, the offset will be clamped at 750 pixels.

Other Notable Variables

  • --text-size-normal — 16 pixels, clamped. (Can't get smaller)
  • --text-size-heading — 32 pixels, clamped at 16 pixels.
  • --text-size-giant — 48 pixels, clamped at 24 pixels.
  • --transition-speed-out, --transition-speed-slow — 0.3 seconds
  • --transition-speed-in, --transition-speed-fast — 0.1 seconds
  • --transition-speed-0 — 0 seconds

Viewing a full list of CSS variables

  1. Open the DevTools by enabling Developer Mode (in the Developer section of the Options menu) and hitting "Toggle Developer Tools".

  2. Go to the "Elements" panel.

  3. Find the <html> element. Click on it.

  4. In the "Styles" panel, which should be viewable at the same time as the "Elements" panel, find all rules that target :root.

    • Any CSS variables in here that have a little colored square next to them are color variables.

Full Example: Debug Tools

Next:

Getting Started

Mod Content

Script Documentation

(apologies for all the missing guides, we'll get to them at some point)

Clone this wiki locally