• The AP front end defines two <div> tags where the board lives.
  • svg is the main board
  • stack is only used for the stacking-expanding renderer (the old Volcano renderer)
• Each of the SVGs also have unique IDs:
  • theBoardSVG
  • theStackSVG

The expanding stack is not described in further detail right now. If it becomes more widely used in the future, we'll expand this documentation.

While there will be similarities across games, some games are highly customized and may require additional effort to tweak. Each board type is also unique. For example, SVGs rendered with the `squares` board style will not have light and dark squares you can target.

Most boards have the same overall structure, with a few top-level tags:

• <defs> include all the defined and reused assets. Because of how SVG works, you can't customize the “used” copies of these assets. You have to target the symbol itself.
  • Most glyphs share a similar id attribute: aprender-glyph-XXXXXXXXXXXXX. The 13-character id is opaque but consistent and deterministic. The same piece should have the same id across all games.
  • Glyphs can be very complex, and not all elements are intended to be filled with colour. Elements that should be changed based on player colour are flagged with one or both of the following attributes: data-playerfill=true and data-playerstroke=true. Your custom CSS code should target these specific elements when tweaking colours.
• <g id=“board”> encompasses the various elements that make up the field itself.
  • <g id=“labels”> contains the <text> elements that make up the board labels.
  • <g id=“gridlines> contains the various lines that make up the board, including some of the marker types, like shading.
  • <g id=“tiles”> contains the tiles, for boards composed of tiles.
• <g id=“pieces”> contains the pieces themselves. This is almost always just a series of <use> tags that you can't customize.
• <g id=“annotations”> contains any last-move annotations. Markers and annotations are flagged with the class attribute instead of id, though they share a similar structure: aprender-marker-XXXXXXXXXXXXX and aprender-annotation-XXXXXXXXXXXXX.

Basically, that's all you need to know. With a little exploration, you should be able to make any number of tweaks to the final board image.

There are also some predefined CSS variables you can use or change in your CSS:

• –svg-label-color: Colours the board row/column labels, labels of “areas” below the game board, and button bars.
• –svg-gridline-color: Colours of the gridlines and also used for things like borders around button bars and other things.
• –svg-default-fill: The default colour when a cell is fully filled in (like a blocked cell in Amazons).
• –svg-volcano-caps: Colours the volcano caps in Volcano games. Black caps don't appear in dark mode, so they are changed to something a little lighter.

Until the custom CSS UI is finalized, you should be able to insert these snippets through your developer console. If you encounter any issues, feel free to reach out through Discord.

It takes a little work to track down the correct target.

• First inspect the piece itself. It will take you to the <use> statement for that particular piece.
• Note the href attribute (e.g,, #A).
• Go to the <defs> section and find the SVG with the matching id attribute.
• Expand that SVG and look for the single glyph inside. This is what you need to target.
• Remember to target the data-playerfill and data-playerstroke attributes if the glyph is composed of multiple elements.

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

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

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

Two options: you can target the div itself if you want a larger image, or the SVG itself if you want the image just to extend to the edge of the labels.

div#svg {
    background-image: url(https://i.ibb.co/t2ghNcR/light-wood.jpg);
}

svg#theBoardSVG {
    background-image: url(https://i.ibb.co/t2ghNcR/light-wood.jpg);
}