ORTSZEIT · DOKU · EIGENES CSS

Eigenes CSS

Mit Pro kann dein Blog eigenes CSS mitbringen. Es kommt auf jeder Seite des Blogs nach dem Stylesheet des Themes, sodass ein paar Zeilen Farben oder Schrift ändern können, ohne bei null anzufangen.

Wo es hingehört

1. Öffne die Einstellungen deines Blogs im Editor auf studio.ortszeit.app.
2. Füge das CSS in das Feld Eigenes CSS ein und wähle Einstellungen speichern.
3. Lade deinen Blog neu.

Zurück zum schlichten Theme kommst du, indem du das Feld leerst und speicherst. Im Gratis-Tarif wird das Feld nicht angezeigt; früher gespeichertes CSS bleibt erhalten, wird aber nicht verwendet, und kommt mit einem neuen Abo zurück. Es steht auch in deinem Export, als custom_css in blog.yaml.

Was Ortszeit entfernt

Dein CSS landet in einem <style>-Element der Seite. Vorher entfernt Ortszeit alles, was etwas von einer anderen Website laden, die Seite überdecken oder aus diesem Element ausbrechen könnte. Der Filter schneidet das Konstrukt heraus und versucht nicht, die Regel drumherum zu reparieren:

• Kommentare (/* … */) — schreib sie ruhig, Leser bekommen sie nie
• Backslashes, also keine CSS-Escapes: tippe „ statt "\201E"
• jedes < (damit auch Media Queries mit <-Bereichen; nimm max-width:)
• @import, @charset, @namespace und ganze @font-face-Blöcke — der Blog nutzt Systemschriften und lädt keine Schriften von irgendwo
• url(…), image-set(…) und src(…): keine Hintergrundbilder, keine Tracking-Pixel, auch keine data:-Adressen; Verläufe funktionieren
• expression(…), behavior: und -moz-binding:
• position: fixed, damit nichts über der Seite liegen kann

Hinter dem Filter verhindert die Content-Security-Policy des Blogs, dass der Browser etwas von einer anderen Website lädt, selbst wenn ein Konstrukt durchgerutscht ist. CSS, das nichts davon braucht, kommt genau so an, wie du es geschrieben hast.

Was du ansprechen kannst

Diese Klassen und Custom Properties sind eine stabile Schnittstelle: Wir halten sie so, wie sie sind, damit dein CSS weiter funktioniert. Muss sich doch einmal etwas ändern, kündigen wir es vorher an und tragen es unten ins Änderungsprotokoll ein. Alles im Theme, was hier nicht steht, kann sich ohne Ankündigung ändern — sprich nur an, was hier aufgeführt ist.

Farben und Schriften sind Custom Properties auf :root, und oft genügt es, sie zu setzen. Das Theme setzt sie ein zweites Mal in @media (prefers-color-scheme: dark) — setz deine dort also auch, oder entscheide dich mit color-scheme: dark für ein Schema.

Die Klassen, die du ansprechen kannst:

Farbschema und data-theme

Unter Farbschema in den Einstellungen legst du fest, wie der Blog mit hell und dunkel umgeht: wie das Gerät der Leser (der Standard), immer hell, immer dunkel, oder wie das Gerät mit einem Schalter im Kopf, den Leser bedienen können. Ein festes Schema oder die Wahl eines Lesers per Schalter steht als data-theme="light" oder data-theme="dark" am <html>-Element; entscheidet das Gerät, fehlt das Attribut. Das Theme setzt seine dunklen Farben auch für :root[data-theme="dark"], und sein Block @media (prefers-color-scheme: dark) gilt nur für :root:not([data-theme="light"]). Folgt dein Blog nicht einfach dem Gerät, gib deinen dunklen Farben dieselben beiden Selektoren:

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --paper: #0E161C; }
}
:root[data-theme="dark"] { --paper: #0E161C; }

Der Schalter ist das einzige Skript, das das Theme dafür hinzufügt. Er merkt sich die Wahl im lokalen Speicher des Browsers, setzt kein Cookie und lädt nichts nach; ohne JavaScript sehen Leser den Schalter nicht.

Ein Beispiel

Ein dunkleres Papier und ein serifenloser Text, hell und dunkel:

:root {
  --paper: #F4F1EA;
  --font-body: system-ui, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root { --paper: #0E161C; }
}
.post h2 { font-size: 1.5rem; }

Vier vollständige Stylesheets — eine Zeitung, schlichtes Monospace, ein Nacht-Theme und eine Postkarte — mit Screenshots und einer Vorschau auf einem Beispielblog liegen in ortszeit/examples auf GitHub.

Änderungsprotokoll

Änderungen an den oben aufgeführten Klassen und Custom Properties.

• 10.11.2026 — Die aufgeführten Klassen und Custom Properties werden zur stabilen Schnittstelle erklärt.
• 10.11.2026 — Neu: das Attribut data-theme am <html>-Element (light, dark oder nicht vorhanden) für das Farbschema des Blogs. Nichts Aufgeführtes hat sich geändert; CSS für prefers-color-scheme funktioniert auf Blogs, die dem Gerät folgen, weiter.