WikilyWIKILY
All games9 Wikis · pick your game
9
Menu

Documentation

Ein Element mit CSS gestalten

Updated 2026-07-23

Jedes Element, das du auswählen kannst, hat einen eigenen Custom-CSS-Bereich. Da kommt das Styling rein, das die normalen Regler nicht hergeben.

Seitenblöcke und Seitenleisten-Elemente benutzen exakt dasselbe Panel. Einmal lernen, überall anwenden.

Das Panel öffnen

An einem Seitenblock:

  1. Öffne den Layout-Editor und klicke den Block an.
  2. Rechts im Inspector findest du den eingeklappten Bereich „Custom CSS“.
  3. Klapp ihn auf. Die Zahl im Titel zeigt, wie viele Regeln aktiv sind.

An einem Seitenleisten-Element:

  1. Wechsle zum Sidebar-Tab und klicke das Element in der Vorschau an.
  2. Öffne den Style-Tab. Weiter unten steht derselbe Bereich.

Custom CSS gewinnt gegen die Tabs darüber. Wenn eine Regel hier etwas anderes sagt als ein Regler, sehen die Leser deine Regel.

Auswählen, was du gestaltest

Ein Block besteht meist aus mehreren Teilen. Ein Button ist eine Box mit einer Pille darin, eine Karte hat Titel, Bild und Rahmen. Die erste Frage ist also immer: Was gestalte ich hier?

Jedes Ziel hat seine eigene Gruppe. Diese beiden Regeln gelten für die Button-Pille, nicht für die Box drumherum. Mit „+ Add property“ fügst du der Gruppe Regeln hinzu, mit „+ Add another target“ startest du eine neue.

Klicke auf + Choose what to style und wähle das ganze Element oder einen seiner Teile. Jedes Ziel bekommt seine eigene Gruppe, und jede Regel gehört zu genau einer.

Deshalb färbt background in der Gruppe „Button“ nur die Pille ein und nicht die Box dahinter.

Fields-Modus: Regeln bauen, ohne CSS zu schreiben

Der Standard, ganz ohne CSS-Wissen. Klicke auf + Add property, und der Katalog öffnet sich, gruppiert nach dem, was du erreichen willst.

Klick in ein Eigenschaftsfeld, und der ganze Katalog öffnet sich, gruppiert und verständlich erklärt. Tippen filtert die Liste. Eigenschaften, die in der Gruppe schon benutzt werden, sind durchgestrichen.

Das Wertefeld passt sich an die Eigenschaft an:

FarbenEin echter Farbwähler.
Feste SchlüsselwörterEin Dropdown.
TransparenzEin Schieberegler.
FreitextPassende Vorschläge und ein Beispiel für die Schreibweise.
Werte sind vorausgefülltWählst du eine Eigenschaft, die die Tabs schon setzen, startet das Feld mit dem aktuellen Wert. Du passt nur an.
Ganze Blöcke einfügenKopiertes CSS wie border-radius: 12px; box-shadow: ... wird automatisch in einzelne Zeilen aufgeteilt.

Jede Zeile wird live geprüft:

GültigZählt als aktiv.
Wert fehlt nochGilt als unfertig, nicht als Fehler.
Würde verworfenRot, immer mit einer Begründung.
Zweimal gesetztMarkiert, mit Hinweis auf die vorhandene Zeile.

Die Fußzeile zählt mit: aktive Regeln, ignorierte Regeln, und wie viel von den 1.000 Zeichen verbraucht ist.

Text-Modus: CSS direkt schreiben

Stell den Schalter oben von Fields auf Text und du bekommst einen echten Code-Editor mit Zeilennummern, Syntax-Farben und Autovervollständigung. Pro Zeile ein Eigenschaft: Wert;.

Der Text-Modus zeigt dieselben Regeln als freien Text: eine Zeile pro „Eigenschaft: Wert;“, geprüft während du tippst. Mit den Chips wechselst du das Ziel, und Format räumt die Zeilen auf.

Mit den Chips wechselst du das Ziel, ein Punkt markiert Ziele mit Regeln. Format räumt auf, das Vergrößern-Symbol öffnet Vollbild.

Fields und Text sind zwei Ansichten derselben Regeln. Du kannst jederzeit wechseln, es geht nichts verloren.

Der Live-Spiegel: starte mit dem, was schon da ist

Ganz unten im Fields-Modus zeigt „From the tabs above“ live, welche Stile deine normalen Regler gerade anwenden, inklusive Ziel.

„From the tabs above“ zeigt live, was deine normalen Regler anwenden. Klick auf eine Zeile, und sie wird zu einer Custom-CSS-Regel, die du anpassen kannst.

Klick auf eine Zeile und sie wird in dein Custom CSS kopiert. Ein paar Werte, etwa Bild-URLs und Schriftnamen in Anführungszeichen, sind abgedunkelt und nur zur Info da.

Der Spiegel funktioniert absichtlich nur in eine Richtung. Er füllt dein Custom CSS, nie umgekehrt, damit es genau einen Ort für deine Anpassungen gibt.

Das wikiweite StylesheetCustom CSS
Die SeitenleisteWiki- und Seitenleisten-CSS
Meistens ganz ohne CSSDie Eigenschaften