Customizing Abstract Play

Abstract Play lets you tune how games look on your account: player piece colours, board drawing colours, optional board layout tweaks, and (advanced) per-game CSS. Settings are saved to your profile and follow you across devices when you are logged in.

Questions? Join Discord in #customization (pinned posts have extra links).

• From a game page, click the paintbrush icon on the board toolbar.
• Or open https://play.abstractplay.com/customize/GAMEUID (replace GAMEUID with the game’s meta id, e.g. complica).

The page shows a live preview of a sample board for that game (loaded from the site’s thumbnail JSON when available).

Use the scope control at the top:

• Global Defaults — applies to every game that does not have its own saved customization. Good for a default preferred colour or shared board colours; not every option works globally (board style is per game type).
• This game — overrides global defaults for one meta game only.

Build a palette of colours used for player pieces:

• Pick a colour, then Add Colour, or click a default swatch.
• Quick fills: Select default colours, Select colour blind colours, or Select patterns (pattern fills for pieces).
• Clear colours removes your palette; the game’s built-in defaults are used again.

Some games show Developer hints under the palette (which slot maps to which player). Those come from the game author, not from wiki palette tables.

Choose My preferred colour so your pieces use that slot when the game allows. You can set a global default or override it for the current game only.

Under Board Colours, pick a property (background, board, strokes, borders, labels, annotations, fill) and set its colour. Help text under each property explains what it affects in the renderer.

These map to the drawing colour context used when the board is rendered.

Expand Board and pieces for renderer overrides:

• Board style — when the game supports it, swap among compatible styles (e.g. checkered squares vs vertex grid). Stacked boards cannot take incompatible styles; the UI will block invalid saves.
• Line weight and Coordinate label size — adjust grid lines and row/column labels (prefer label size over hacking label CSS).
• Render options — e.g. hide coordinate labels or star points, when supported by the preview.
• Glyph replacements — replace one piece glyph with another from the contact sheet, optionally at a scale.

Fix any preflight errors before saving. The saved render block has a size limit (~8 KiB); trim glyph maps if save is rejected.

Reset board layout overrides clears render overrides for the current scope without deleting your colours.

Expand Custom CSS on the Customize screen to add CSS scoped to this game’s board. Saved CSS is stored on your account when you click Save Settings. Scope selectors to the board wrapper, e.g. div.board._meta_complica (replace complica with the game’s meta id).

• CSS from the old board toolbar (device-only) may be imported into this editor the first time you open Customize; save to move it to your account.
• Toggle Active to turn account CSS on or off without deleting it.

Audience: You should already be comfortable with HTML/CSS and your browser’s developer tools. The board DOM is not a stable API — class names, ids, and SVG structure can change as the renderer evolves. Prefer Player colours, Board colours, coordinate label size, and glyph replacements on the Customize screen before reaching for CSS.

• For piece colours, use the palette on Customize (especially games with many glyphs, e.g. Looney Pyramid games). Let the renderer assign player colours, then use CSS only for fine tuning.
• Each board type is different; some styles (e.g. plain squares boards) do not expose separate light/dark cell targets like checkered boards.
• Boards are mostly SVG. Typical top-level groups inside svg#theBoardSVG:
  • defs / symbol — reusable glyphs (ids like aprender-glyph-…; opaque but stable per glyph). Customize used piece instances in g#pieces; to restyle a glyph everywhere, target the symbol.
  • g#labels — row/column labels (often easier to adjust with Coordinate label size on Customize).
  • g#gridlines — grid lines and some markers.
  • g#tiles — tile-based boards.
  • g#pieces — piece instances (usually use elements pointing at symbols).
  • Markers/annotations use class names like aprender-marker-… / aprender-annotation-….
• Elements meant to follow player colour often have data-playerfill=true and/or data-playerstroke=true — target those when overriding fills/strokes on complex glyphs.

A second SVG (svg#theStackSVG) appears for some stacking renderers; most games only use theBoardSVG.

CSS variables you may set on the board container (names may change over time):

• –svg-label-color — label and some chrome text/lines
• –svg-gridline-color — gridlines and related strokes
• –svg-default-fill — default filled cells (e.g. blocked squares)
• –svg-volcano-caps — Volcano cap colour (dark-mode visibility)

Do not paste CSS you do not understand. Abstract Play is not responsible for broken layouts from custom CSS. For help, use #customization on Discord.

Paste snippets into the Custom CSS box on Customize, then Save Settings. Adjust selectors for your game and inspect the live board if something does not match.

Change a piece colour (find the symbol id via devtools — inspect a piece → follow href to defs):

symbol#aprender-glyph-82ae1f37b40e1 *[data-playerfill=true] {
    fill: #0f0;
}

Labels (prefer Coordinate label size when opacity/font size is enough):

g#labels text {
    opacity: 0.5;
    stroke: black;
    fill: white;
    font-family: cursive;
}

Gridlines:

g#gridlines line {
    stroke: red;
    stroke-width: 3;
}

Background image (on the board wrapper or the SVG — test which fits your layout):

div.board._meta_complica {
    background-image: url(https://example.com/your-texture.jpg);
}

svg#theBoardSVG {
    background-image: url(https://example.com/your-texture.jpg);
}

This is separate from site theme colours (light/dark chrome), which you can adjust from the navbar theme control — that changes page chrome, not the game board palette.

Implementation details (how CSS is loaded in React, account vs localStorage, renderer wiring): https://docs.abstractplay.com/front/subsystems/customize/

• Save Settings — writes to your account (requires login).
• Reset to Defaults — removes your customization for this scope.
• Delete Customization — removes the saved blob for this game (or global entry).
• Apply to other games… — after saving, copy selected sections (player colours, board colours, renderer, preferred colour, custom CSS) to other games you pick.

Power users can edit Settings JSON directly (including render.board, render.glyphmap, render.options) and paste a full blob, then save.