WikilyWIKILY
All games8 Wikis · pick your game
8
Menu

Documentation

Style one element with CSS

Updated 2026-07-23

Every element you can select carries its own Custom CSS, for the styling the regular controls do not offer.

Page blocks and sidebar elements share the exact same panel. Learn it once and it applies to both.

Open the panel

On a page block:

  1. Open the layout editor and click the block.
  2. In the inspector on the right, find the collapsed Custom CSS section.
  3. Click it open. The number in the title is how many rules are live.

On a sidebar element:

  1. Switch to the Sidebar tab and click the element in the preview.
  2. Open the Style tab and find the same section near the bottom.

Custom CSS wins over the tabs above. If a rule here and a regular control disagree, your rule is what readers see.

Pick what to style

A block is rarely one thing. A button is a box plus the pill inside it. A card has a title, an image and a frame. So the first question is always what you are styling.

Each target gets its own group. These two rules aim at the button pill itself, not at the box around it. “+ Add property” grows the group, and “+ Add another target” starts a new one.

Click + Choose what to style and pick the whole element or one of its named parts. Each target becomes its own group, and every rule lives under exactly one.

That is how background on the Button target paints the pill and never the box behind it.

Fields mode: build rules without writing CSS

Fields mode is the default and needs no CSS knowledge. Click + Add property and the catalog opens, grouped by what you are trying to do, with every property explained in plain language.

Click a property field and the whole catalog opens, grouped and explained in plain language. Type to filter it. Properties already used in this group are crossed out.

The value side adapts to the property you picked:

ColoursA swatch with a real colour picker.
KeywordsA styled dropdown.
TransparencyA slider.
Free textCurated suggestions and an example showing the syntax.
PrefillPick a property the tabs already set and the field starts from the current value, so you tweak rather than retype.
Paste a whole blockPaste copied CSS like border-radius: 12px; box-shadow: ... into any field and it unfolds into separate rows.

Every row is checked live:

ValidCounts as active.
Waiting for a valueMarked unfinished, never as an error.
Would be droppedRed, always with a reason in plain words.
Set twiceFlagged, pointing you at the existing line.

The footer keeps score: how many rules are live, how many are ignored, and how much of the 1,000-character budget is used.

Text mode: write CSS directly

Flip the toggle at the top from Fields to Text for a real code editor with line numbers, syntax colours and autocomplete. Write one property: value; per line.

Text mode shows the same rules as free text: one “property: value;” per line, checked while you type. The chips switch which target you are writing for, and Format tidies the lines up.

The chips above switch which target you are writing for, and a dot marks targets that already have rules. Format tidies your lines, and the expand icon opens the same editor fullscreen.

Fields and Text are two views of the same rules. Switch back and forth as you like and nothing gets lost.

The live mirror: start from what is already there

At the bottom of Fields mode, “From the tabs above” lists everything your regular controls currently apply, live, with the target each value lands on.

“From the tabs above” mirrors everything your regular controls apply, live. Click a line and it becomes a Custom CSS rule you can tweak.

Click any line to copy it into your Custom CSS, ready to tweak. A few values, such as image URLs and quoted font names, show dimmed because they cannot be edited as custom CSS.

The mirror works one way only. It feeds Custom CSS and never the reverse, so there is exactly one place your overrides live.

The wiki-wide sheetCustom CSS
The sidebar sheetWiki and sidebar CSS
Usually no CSS neededThe Properties controls