:root–ast-post-nav-space:0;–ast-container-default-xlg-padding:3em;–ast-container-default-lg-padding:3em;–ast-container-default-slg-padding:2em;–ast-container-default-md-padding:3em;–ast-container-default-sm-padding:3em;–ast-container-default-xs-pad

:root–ast-post-nav-space:0;–ast-container-default-xlg-padding:3em;–ast-container-default-lg-padding:3em;–ast-container-default-slg-padding:2em;–ast-container-default-md-padding:3em;–ast-container-default-sm-padding:3em;–ast-container-default-xs-pad

/ Pflegeblog / Von

CSS Custom Properties im Astra Theme: So nutzt du die :root-Variablen für dein Webdesign

Wenn du deine Webseite mit dem Astra Theme gestaltest, bist du sicher schon auf die vielen CSS Custom Properties gestoßen, die das Theme mitbringt. Diese sogenannten CSS-Variablen (z.B. --ast-container-default-xlg-padding: 3em;) steuern zentrale Design-Parameter – von Abständen über Farben bis hin zu Schriftgrößen. In diesem Blogartikel zeige ich dir, wie du diese Variablen praktisch nutzt, um dein Astra-Theme individuell und flexibel anzupassen.

Was sind CSS Custom Properties (Variablen)?

CSS Custom Properties sind Variablen, die in CSS definiert und im Stylesheet mehrfach verwendet werden können. Sie beginnen immer mit -- und werden meist im :root-Selektor deklariert, damit sie global verfügbar sind. Beispiel:

css

:root {

  --ast-container-default-xlg-padding: 3em;

  --ast-global-color-primary: #ffffff;

}

Diese Variablen kannst du dann überall im CSS mit der Funktion var() aufrufen:

css

.container {

  padding: var(--ast-container-default-xlg-padding);

  background-color: var(--ast-global-color-primary);

}

Das hat den Vorteil, dass du zentrale Werte an einer Stelle änderst und diese Änderung automatisch überall übernommen wird. So sparst du Zeit und vermeidest Fehler durch doppelte Werte dynamiccss/“>[2].

So passt du Astra-Variablen praktisch an

1. Eigene CSS-Datei oder Customizer nutzen

Für eigene Anpassungen solltest du die Variablen im Custom CSS-Bereich deines WordPress Customizers oder in einer eigenen CSS-Datei überschreiben:

css

:root {

  --ast-container-default-xlg-padding: 4em; / mehr Innenabstand /

  --ast-global-color-primary: #ff6600;      / neue Primärfarbe /

  --ast-code-block-background: #f0f0f0;     / hellerer Code-Hintergrund /

}

2. Responsive Werte beachten

Astra setzt viele Variablen für verschiedene Bildschirmgrößen (z.B. --ast-container-default-xs-padding). Du kannst diese gezielt anpassen, um dein Design auf Smartphones oder Tablets zu optimieren:

css

@media (max-width: 544px) {

  :root {

    --ast-container-default-xs-padding: 1.5em;

  }

}

3. Farbvariablen sinnvoll verlinken

Viele Farbvariablen sind verkettet, z.B. --ast-global-color-primary nutzt var(--ast-global-color-5). Wenn du eine Farbe ändern möchtest, kannst du entweder die Basisvariable oder die alias-Variable überschreiben, je nachdem wie tief du eingreifen willst.

Beispiel: Container-Padding anpassen

Angenommen, du möchtest den Innenabstand der Container auf großen Bildschirmen vergrößern, damit dein Inhalt mehr Luft hat:

css

:root {

  --ast-container-default-xlg-padding: 5em;

  --ast-container-default-lg-padding: 4em;

}

Das wirkt sich direkt auf alle Container aus, die diese Variablen nutzen. So kannst du mit wenigen Zeilen großen Einfluss auf das Layout nehmen.

Checkliste: So nutzt du Astra CSS-Variablen optimal

  • [ ] Verschaffe dir einen Überblick über die vorhandenen Variablen (z.B. in der style.css deines Themes)

  • [ ] Nutze :root für globale Anpassungen

  • [ ] Passe Variablen für verschiedene Bildschirmgrößen mit Media Queries an

  • [ ] Verändere Farbvariablen gezielt, um das Design stimmig zu halten

  • [ ] Teste deine Änderungen in verschiedenen Browsern und Geräten

  • [ ] Nutze den WordPress Customizer oder ein Child-Theme, um Updatesicher zu bleiben

Warum CSS-Variablen so praktisch sind

  • Wiederverwendbarkeit: Ein Wert wird an vielen Stellen genutzt, du änderst ihn nur einmal.

  • Flexibilität: Du kannst Variablen dynamisch in Media Queries oder sogar mit JavaScript anpassen.

  • Übersichtlichkeit: Dein CSS bleibt sauber und gut wartbar.

  • Performance: Browser können CSS-Variablen effizient verarbeiten.

Fazit

Astra nutzt CSS Custom Properties, um viele Designparameter zentral zu steuern. Du kannst diese Variablen einfach überschreiben, um dein Theme individuell anzupassen – ohne komplizierte CSS-Regeln neu zu schreiben. Mit etwas Übung hast du so ein mächtiges Werkzeug, um Layout, Farben und Abstände flexibel und update-sicher zu gestalten.

Das Wichtigste: CSS-Variablen im Astra Theme sind deine zentralen Stellschrauben für Design und Layout. Nutze sie, um schnell und übersichtlich deine Webseite an deine Wünsche anzupassen!

Weiterführende Links

  • MDN CSS Custom Properties Guide: https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Cascadingvariables/Usingcustomproperties [[1]]

  • Astra Theme Developer Docs zu Dynamic CSS: https://developers.wpastra.com/astra-theme/reference/classes/astradynamiccss/ [[2]]

  • Blog zu CSS Variablen für Theme Customisation: https://dev.to/dualitedev/using-css-variables-for-theme-customisation-5aoj [[3]]

Wenn du Fragen hast, wie du die Variablen in deinem Projekt am besten einsetzt, schau gerne auch in die Astra-Dokumentation oder frage in Foren und Communities nach. Viel Erfolg beim Gestalten!