Custom CSS

Mithilfe des Editors für Custom CSS kannst du das Erscheinungsbild deines Themes anpassen ohne ein Child-Theme erstellen oder dir Sorgen um Überschreibungen deiner Anpassungen aufgrund von Theme-Aktualisierungen machen zu müssen.

Hinzufügen von Custom CSS

Aktiviere das Custom CSS Modul in deinem Jetpack Dashboard. Nun kannst du über Design → CSS bearbeiten auf den CSS-Editor zugreifen.

Wenn du den CSS-Editor zum ersten Mal benutzt (oder du bisher noch keinen eigenen CSS-Code hinzugefügt hast), so wirst du im Bearbeitungsfenster eine Platzhalternachricht (umschlossen mit /* und */) sehen. Bitte lese dir die Nachricht genau durch, denn diese enthält wichtige Informationen über das Upgrade. Sie beginnt wie folgt:

/* Willkommen beim benutzerdefinierten CSS!

CSS (Cascading Style Sheets) ist eine Art Code, der dem Browser sagt, wie eine Webseite dargestellt werden soll. Du kannst diese Kommentare löschen und mit deinen Anpassungen beginnen.

Sobald du bereit bist deinen benutzerdefinierten CSS-Code hinzuzufügen, entferne einfach die Nachricht oder füge deinen Code unterhalb dieser ein.

Bearbeitungsoptionen

Bei Bearbeitung deines Stylesheets kannst du von einigen Optionen, die du unmittelbar rechts neben dem Bearbeitungsfenster findest, Gebrauch machen:

• Vorverarbeitung: Der CSS-Editor unterstützt die Präprozessoren LESS und Sass (SCSS-Syntax). Dies ist eine fortgeschrittene Option für Benutzer, die gerne die Vorzüge von CSS-Erweiterungen, wie Variablen oder Mixins, genießen möchten. Besuche die LESS- und Sass-Website, um hierzu weitere Informationen zu erhalten.
• Ergänzende CSS-Stile: Möchtest du Veränderungen am Aussehen deiner Seite vornehmen, so kannst du entweder auf dem bestehenden Stylesheet deines Themes aufbauen (Add-on CSS) oder das Stylesheet des bestehenden Themes mit deinem eigenen CSS-Code ersetzten. Die zweite Möglichkeit solltest du nutzen, wenn du mit lediglich der HTML-Struktur deines Themes beginnen und CSS von Grund auf neu bestimmen möchtest. Orientiere dich am Original-Stylesheet deines Themes und versichere, dass du alle Regeln und Stile berücksichtigt hast. Fehlen Elemente, so wird die öffentliche Ansicht des Blogs möglicherweise verzerrt dargestellt. Mit dieser Option wird nur der CSS-Code im Bearbeitungsfenster auf deinen Blog angewendet.
• Kompatibilität mit Mobilgeräten: Wenn du von Jetpacks Mobile Theme Gebrauch machst, so möchtest du sicherlich, dass die vorgenommenen Veränderungen sich auch im Mobile Theme reflektieren.
• Breite des Inhalts: Diese Option solltest du wählen, wenn du die Breite des Hauptinhalts mittels CSS verändert hast. Die Einstellung „Breite des Inhalts“ dient als Standardgröße für Bilder und Videos in voller Auflösung sowie die Breite einiger Shortcode-Anwendungen, wenn diese in deinen Blog eingefügt werden. Beachte, dass sich die Größe einiger Bilder und Videos, die du noch vor Änderung dieser Einstellung hinzugefügt hast, dadurch nicht verändert. Dies hängt davon ab, wie diese eingefügt wurden und es ist möglich, dass du einige Bilder und Videos nach Änderung dieser Einstellung erneut einfügen musst.

Vorschau und Speicherung

Bei der Bearbeitung von CSS ist es stets ratsam, dass du die Änderungen – unabhängig davon wie erfahren du bist – in der Vorschau überprüfst, bevor du diese tatsächlich übernimmst. Klicke nach Vornehmen einiger Änderungen auf die Schaltfläche Vorschau.

Daraufhin öffnet sich ein neues Browser-Fenster bzw. eine neue Registerkarte und du kannst deinen Blog nun anschauen, als wäre der benutzerdefinierte CSS-Code bereits angewendet worden. Im oberen Bereich deines Blogs, unmittelbar unter der grauen Adminleiste, siehst du folgende Nachricht:

Wenn du mit den Änderungen zufrieden bist und diese gerne speichern möchtest, dann wechsle zurück zu deinem geöffneten CSS-Editor-Fenster und klicke auf Stylesheet speichern.

CSS Revisionen

Im Modul CSS Revisionen kannst du alle Sicherungskopien deines eigenen CSS-Codes einsehen. Jedes Mal, wenn du auf “Stylesheet speichern” klickst, wird eine Revision abgespeichert. Jetpack bewahrt die letzten 25 Revisionen für jeden Beitrag deines Blogs auf. Die CSS-Revisionen ermöglichen dir erneut einen Blick auf kürzlich vorgenommene Veränderungen zu werfen und bei Bedarf eine frühere Version wiederherzustellen.

Du kannst CSS-Revisionen miteinander vergleichen, indem du das Datum einer Revision im Bereich “CSS Revisionen” unter dem Editor auswählst. Wähle ein weiteres Datum aus der Revisionsliste aus und klicke auf Revisionen vergleichen. Nun werden die beiden CSS-Versionen nebeneinander und mit hervorgehobenen Veränderungen angezeigt und du kannst diese überprüfen.

Um zu einer früheren CSS-Version zurückzukehren, klicke für das jeweilige Datum auf Wiederherstellen und der benutzerdefinierte CSS-Code wird zurückgesetzt.