Styling

The whole interface is themed from a single file: html/config.css. It contains nothing but CSS variables — the compiled UI does not define a single colour of its own, so every colour, size and font you see comes from this file.

<!-- html/index.html -->
<link rel="stylesheet" href="./config.css">   <!-- your theme -->
<link rel="stylesheet" href="./assets/…css">  <!-- the UI, uses the variables -->

Restart the resource after editing (restart x-creatorpanel), then reopen the panel.

Two value formats

This is the one thing that breaks themes, so read it before you change anything.

1. Normal CSS values — hex, rgba(), gradients. Use them as you would anywhere else:

--accent: #ffffff;
--border: rgba(255, 255, 255, 0.19);
--tp-gradient: linear-gradient(180deg, #2f6fd0 0%, #1d4a94 100%);

2. Bare RGB triplets — three numbers, no rgb() around them. The UI inserts them into rgba(var(--x), 0.6) so it can reuse the same colour at different opacities:

--text: 255, 255, 255;   /* correct   */
--text: #ffffff;         /* breaks it */
--text: rgb(255,255,255);/* breaks it */

These variables are triplets and must stay in that form:

--accent-text · --glow · --text · --stat-total · --stat-online · --stat-alive · --stat-total-active · --stat-online-active · --stat-alive-active · --kf-bg · --hp-high · --hp-mid · --hp-low · --cmenu-danger · --dot-online · --dot-offline

Never delete or rename a line. A variable that no longer exists leaves the element with no value at all, which usually means invisible text or a missing background. Change values only.

Core

Header

Faction list

Statistics

The three counters (total members, online, alive) each have a normal and an active colour, the active one being used while the faction row is selected.

Search, chips and settings

Member cards

HP bar

Teleport buttons

There are two: the wide button on a player card and the compact button in a member row.

Killfeed

Creator menu

Layout and sizing

Every size is given in vw — one percent of the screen width — so the interface scales with the player's resolution instead of becoming tiny on 1440p or 4K. Keep that unit when you change a value.

The paddings and font sizes inside the panel are fixed values as well, so they do not scale along with --menu-width and --menu-height. Adjust the panel size in small steps and check the result in game.

Fonts

The four Binaria weights live in html/fonts/. To use your own font, drop the file next to them and declare it at the top of config.css — the files { 'html/**' } entry in fxmanifest.lua already ships anything you add to that folder:

@font-face {
    font-family: "MyFont";
    src: url("./fonts/MyFont.ttf");
}

:root {
    --font-title: "MyFont";
    --font-sub:   "MyFont";
    --font-text:  "MyFont";
    --font-name:  "MyFont";
}

Recipes

Match the panel to your server colour

Four variables carry most of the look:

--accent: #7c5cff;            /* buttons, active rows      */
--accent-text: 255, 255, 255; /* text on top of the accent */
--glow: 124, 92, 255;         /* background glow           */
--title-glow: rgba(124, 92, 255, 0.3);

A flatter, less glossy panel

--glow-opacity: 0;
--radius: 0;
--radius-inner: 0;

A killfeed that stays out of the way on stream

--kf-opacity: 0.55;
--kf-border: rgba(255, 255, 255, 0.08);

Combine it with CreatorPanel.Killfeed.position and maxEntries in config.lua.