Customization

Preset Themes

Seven presets ship with the app. Each dresses the whole page: the ground it sits on, the art behind it, the top bar, the sidebar, the canvas, the type it is set in, and the blocks inside an article.

Astronomer is the app's own look, and the only preset that uses the starfield, the sun, the moon and the astronomer. Every other preset states its own backdrop, so choosing one replaces that look instead of sitting on top of it. A campaign that picks no preset is shown Astronomer, following each reader's own light or dark setting.

A preset with one mode holds your view in that mode, so the light and dark toggle stops applying while you read.

Applying a Theme

• Campaign theme (the Creator's choice, applies to everyone): under Theme in campaign Settings.

• Personal theme (each member's own view): under Personal theme, behind your username in the top navigation.

Priority

Where two sources set the same variable, the higher priority wins:

Assets

Left alone, every campaign renders its article types and its map markers identically: a character article and a location article look the same in lists, and every pin on a map is the same generic dot. Icons give each type and each pin its own image, and a built-in starter set works before you upload anything.

Background and Corners

Three pictures sit behind a campaign: one tiled across the whole page, and one in each bottom corner. The app's own are a starfield, a sun that becomes a moon after dark, and an astronomer — the Astronomer preset, which is what a campaign that has chosen nothing is shown.

Each is a variable, so each is the Creator's to replace:

Name an uploaded asset with url(asset:name), or write none for an empty slot:

Because there are two boxes, one per mode, a slot can hold a different picture by day and by night. That is how the app's own sun becomes a moon.

The corners stay in their corners. A picture is drawn to its own proportions, though, so each slot has a width and an offset to place it by — --gm-corner-left-width, --gm-corner-left-offset-x and --gm-corner-left-offset-y, and the same three for the right. A seal that sits too low or too large is these three, not the image file.

Only an asset name or a path within GMTales is accepted. A picture fetched from somewhere else could tell that site who is reading the campaign and when, so an outside address is a validation error.

Advanced: Custom CSS Variables

The Creator can go beyond presets in Settings → Advanced: custom CSS variables. There are two boxes, one for light mode and one for dark, and each applies only to its own mode. A variable set in one box does nothing while the other mode is showing. Assignments take effect last and can extend or override any preset.

Each box takes a list of assignments and nothing else. A selector, a rule or a name that is not one of the variables below is a validation error naming the offender.