Zurück
LayerCraft Studio Logo

Custom CSS Handbuch Deutsch
Rat zur Tat

Custom CSS und LayerCraft Studio Logo

Informationen zu diesem Handbuch

Stand: 2026-05-09
Ansprache: Du
Zielgruppe: Admins, Power-User, Agenturen

Das Handbuch ist in Deutsch und in English verfügbar

LCS Custom CSS ersetzt das lange, unübersichtliche Customizer-Feld durch echte CSS-Dateien mit Ordnern, Zuordnungen und Vorschau.

Du arbeitest strukturierter, sicherer und schneller, unabhängig vom Theme.

Inhaltsverzeichnis

  • WordPress ab 6.3
  • PHP abWordPress ab 6.3
  • PHP ab 8.0
  • Schreibrechte auf `/wp-content/uploads/`
  • Keine Theme-Abhängigkeit; funktioniert auch nach Theme-Wechsel 8.0

Technische Namen:
– Plugin-Verzeichnis `lcs_custom_css`
– Hauptdatei `lcs-custom-css.php`
– Text-Domain und Admin-Slug `lcs-custom-css`

1. `Plugins > Installieren > Plugin hochladen` -> `lcs_custom_css.zip` -> Installieren -> Aktivieren

2. Alternativ per FTP/SCP nach `/wp-content/plugins/lcs_custom_css/` kopieren und im Backend aktivieren oder per WP-CLI `wp plugin activate lcs_custom_css/lcs-custom-css.php`

3. Update: gleiche Schritte, Verzeichnis überschreiben; Dateien und Einstellungen bleiben erhalten

4. Unter `LCS Custom CSS > Einstellungen` legst du fest, ob beim Löschen Tabellen und/oder Upload-Verzeichnis entfernt werden

Konfiguriere unter `LCS Custom CSS > Einstellungen` pro Rolle:
– `view` – sehen und laden
– `edit` – anlegen, bearbeiten, speichern
– `delete` – löschen
– `import` – Customizer-CSS importieren
– `snippets` – reserviert für spätere Erweiterungen
– `settings` – Einstellungen ändern
– `manage` – alles erlauben; Admin hat immer volle Konfiguriere
– Die Einstellung `Commits` kann nur von Administratoren global deaktiviert werden; die automatische Versionierung bleibt aktiv.

  1. **Rolle**: Unter Rolle wählst du die Benutzergruppe aus für welche du die Berechtigung unter ‚Berechtigungen für Rolle‘ anpassen möchtest.
    Im Standard stehen die Folgende Benutzergruppen zur Verfügung:
    Administrator; Editor; Author; Contributor; Subscriber
  2. **Plugin-Sprache**: Sprache der Plugin-Oberfläche pro Benutzer.
    Die Einstellung ist unabhängig von der WordPress-Adminsprache.
  3. **Darstellung**: Darstellung der Plugin-Adminoberfläche pro Benutzer. Verfügbar sind `Hell`, `Dunkel` und `Systemeinstellung folgen`. Standard ist `Hell`. Bei `Systemeinstellung folgen` richtet sich die Darstellung nach der Betriebssystem-/Browser-Einstellung. Diese Option betrifft nur LCS Custom CSS, nicht das restliche WordPress-Backend.
  4. **Berechtigung für Rolle**:
    – Lesen & Menü anzeigen: Kann das Custom-CSS-Menü sehen und Dateien laden.
    – Anlegen/Bearbeiten/Speichern: Darf CSS-Dateien anlegen, bearbeiten, speichern, Zuordnungen ändern.
    – Löschen: Darf CSS Dateien löschen.
    – Customizer-CSS importieren: Darf den Import aus dem Customizer starten.
    – Snippets verwalten: Für künftige Snippet-CRUD/Import-Funktionen.
    – Einstellungen: Darf diese Einstellungsseite aufrufen und Berechtigungen ändern.
    –  Alle Rechte (Legacy): Setzt alle obigen Rechte auf erlaubt.
  5. **Uninstall-Verhalten**: Nichts löschen / nur Tabellen / Tabellen plus Upload-Verzeichnis. Wirksam beim Plugin-Löschen (nicht beim Deaktivieren).
  6. **Primärfarbe**: Akzentfarbe für die Plugin-Adminoberfläche. Standard ist `#7B3FE4`. Du kannst einen HEX-Wert manuell eintragen, das Farbfeld nutzen oder per `Reset` auf den Standard zurücksetzen. Hover-, Aktiv- und Auswahlfarben werden automatisch daraus abgeleitet. Die Einstellung wird dauerhaft in WordPress gespeichert und betrifft nicht das öffentliche Frontend.
  7. **Standard-Vorschau-URL**: Default für die Live-Vorschau. Standard ist `home_url(‚/‘)`. Eigene Stage-Domain ist möglich; CORS und Mixed Content beachten.
    Vorbelegung für die Live-Vorschau bei Tabs ohne eigene URL.
    Bitte Domain/Protokoll der Vorschau-Seite verwenden, um CORS/Mixed Content zu vermeiden.

    **Versionsinfo**: Die Einstellungen zeigen Plugin-Version und Release-Datum
  • Administrator Einstellungen
  1. **global**: Basis-Styles, Tokens, Utilities; immer geladen
  2. **header**: früh in der Enqueue-Reihenfolge im `<head>`; Navigation, Above-the-Fold, kritische Fixes
  3. **footer**: spät in derselben Enqueue-Reihenfolge im `<head>`; nicht-kritische Styles und späte Overrides
  4. – 9. **page/post/archive/category/tag/custom_post_type**: kontextbezogene Dateien, steuerbar über Zuordnungen

10. **Sortierung**: Zahl pro Datei; kleiner = früher. Empfehlung: 10er-Schritte wie `10`, `20`, `30`

Allgemeines
– Der Explorer basiert auf `elFinder` und sitzt rechts im oberen Arbeitsbereich.
– Der Explorer folgt der Plugin-Darstellung. Im Dark Mode werden Toolbar, Dateiliste, Baum, Dialoge, Kontextmenüs, Hover- und Auswahlzustände dunkel dargestellt.
– Sichtbarer Root ist `wp-content/uploads/lcs-custom-css/`.
In andere, darüber liegende, Verzeichnisse kann nicht navigiert werden.
– Sichtbare Struktur: `archive`, `category`, `custom_post_type`, `footer`, `global`, `header`, `page`, `post`, `tag`, `template`
– Der Explorer ist bewusst kompakt und nicht als Fullscreen-Dateimanager ausgelegt.
– Der `(i)`-Button am Explorer-Titel enthält die Kurzinfo zu Root, Klick- und Doppelklick-Verhalten.
– Die aktive Zeile im Explorer ist bewusst kräftiger in der eingestellten Primärfarbe markiert, damit Auswahl und Symbolik klar sichtbar bleiben.

Bedienung
– Toolbar Navigation: (1) Zurück, (2) Vor, (3) Hoch
– Dateioperationen: (4) Ordner anlegen, (5) Neue CSS Datei, (8) Umbenennen, (9) Löschen
– Datentransfer: (6) Upload = Import, (7) Download = Export
– Zusatzfunktionen: Reload, (10) Suche, Info

Darstellung
– Die Toolbar nutzt vergrößerte lokale SVG-Icons; es werden keine Assets aus dem Internet geladen.

Neue Datei
– (5) `Neue Datei` ist als eigener Toolbar-Button direkt in die Explorer-Buttonleiste integriert.
– (5) `Neue Datei` legt eine neue CSS-Datei im aktuell geöffneten Explorer-Ordner an.
– Rechtsklick in den freien Bereich der rechten Explorer-Seite zeigt ebenfalls (12) `Neue CSS-Datei`.
– Beim Anlegen wirst du nach dem Dateinamen gefragt. Verwende einen Dateinamen mit Endung `.css`.
– Nach erfolgreicher Anlage erscheint die Datei sofort im Explorer und in der Dateitabelle und wird direkt in einem neuen Editor-Tab geöffnet.

Dateien öffnen
– Ein Klick auf eine Datei markiert diese.
– Ein Doppelklick auf eine CSS-Datei übernimmt den relativen Pfad und öffnet die Datei direkt im Editor.
– Rechtsklick auf eine CSS-Datei öffnet das Datei-Kontextmenü.
Dort kannst du die Datei
(16) `öffnen`, (17) `herunterladen`, (18) `umbenennen`,
(19) `löschen`, (20) `Informationen` anzeigen oder über
(21) `Zu CSS-Favoriten hinzufügen` als CSS-Dateifavorit speichern.

Favoriten:
– CSS-Dateifavoriten erscheinen links im eigenen Bereich `CSS-Favoriten`.
– Klick auf einen CSS-Dateifavoriten öffnet die Datei direkt im Editor-Tab.
– Rechtsklick auf einen CSS-Dateifavoriten bietet `Aus CSS-Favoriten entfernen`.
– CSS-Dateifavoriten werden lokal im Browser gespeichert. Sie sind eine Bedienhilfe im Admin und keine Datei-Metadaten in der Plugin-Datenbank.
– Die native elFinder-Funktion `Favoriten` bleibt für Ordner verfügbar; für Dateien nutzt das Plugin den eigenen Bereich `CSS-Favoriten`.

Ordner:
– Doppelklick auf einen Ordner öffnet den Ordner innerhalb des Explorers.

Sicherheitsrahmen:
– Nur `*.css` Dateien können erstellt, umbenannt oder hochgeladen werden
– Andere Dateitypen wie `php`, `js`, `html`, `exe`, `cmd` oder `sh` sind blockiert
– Der Root-Schutz wird serverseitig über den WordPress-Connector erzwungen

  • Datei Explorer Übersicht
  • Datei Explorer Kontextmenü leerer Bereich
  • Datei Explorer Kontextmenü Datei

Allgemeines:
– Der Block `So funktioniert es in 3 Schritten` ist standardmäßig eingeklappt und dient als optionale Schnellhilfe.
– Der Hinweis zu den Tabs sitzt als `(i)`-Button direkt neben (1) `Neue Datei anlegen`.
– Die Beschreibungen zu den Formularfeldern sitzen platzsparend in kleinen `(i)`-Buttons direkt neben dem Feldnamen.
– Tabs: `+` = neue Datei, grüner Punkt = gespeichert, roter Punkt = ungespeichert. Vorschau-URL und Selektor werden pro Tab gehalten.
– Mehrere Tabs können parallel offen bleiben. Jeder Tab hat einen eigenen Schließen-Button; Mittelklick (Mausrad Klick) schließt ihn ebenfalls.
– `Tab schließen` wirkt nur auf den gewählten Tab. Bei ungespeicherten Änderungen erscheint eine Rückfrage.
– Wird der letzte Tab geschlossen, öffnet die UI automatisch wieder einen neuen leeren Tab

Eingabefelder:
– Optionales Feld (4) `Titel`: oberhalb des Pfads, wenn eingetragen wird dieser als Bezeichnung des Tabs verwendet statt des Pfads
– (5) `Pfad (css.)`: zeigt den Pfad der CSS Datei
– (6) `Bereich`: zeigt den Bereich an in dem das CSS wirken soll,
dir stehen folgende Bereiche zur Verfügung:
global; header; footer; page; post; archive; category; tag; custom_post_type
– (7) `Status`: zeigt aktiv/inaktiv
Aktiv: CSS wird geladen
Inaktiv: CSS wird nicht geladen
– (8) `Sortierung`: hier ist der Wert für die Ladereihenfolge des CSS anzugeben, je niedriger der Wert umso höher die Priorisierung, 0 = maximale Priorität
– (9) `Zuordnung`: Listet die, dem CSS zugeordneten, Seiten auf
– (10) `Zuordnung auswählen`: Zeigt alle aktiven Seiten, Seiten können, auf denen das CSS wirken soll, einfach ausgewählt werden
– (11) `Titel oder Begriff eingeben`: hier kannst du einfach nach Schlagwörtern oder Seitentitel suchen um diese dann den Zuordnungen hinzuzufügen

  • Bereich Datei anlegen
  • Auswahl der CSS Zuordnung für Seiten
  • Suche Zuordnungen

Allgemeines:
– Monaco-Editor mit Syntax-Highlighting, Wordwrap, Multi-Cursor,
Suchen und Ersetzen (STRG/CMD + F)
– Monaco folgt der Plugin-Darstellung: im hellen Modus `vs`, im dunklen Modus `vs-dark`.
– Der Hinweis zum Editor sitzt als `(i)`-Button direkt neben `CSS-Inhalt`.

Bedienung:
– Über `CSS-Inhalt` und direkt unter der Codebox stehen dieselben drei Aktionen bereit: `Speichern`, `Speichern & Leeren`, `Leeren`
– `Speichern` speichert nur den aktiven Tab per AJAX und lässt ihn geöffnet
– `Speichern & Leeren` speichert nur den aktiven Tab per AJAX und ersetzt danach nur diesen Tab durch einen leeren Tab
– Andere offene Tabs bleiben dabei unverändert, auch wenn sie ungespeicherte Änderungen enthalten
– `Tab schließen` wirkt nur auf den gewählten Tab. Bei ungespeicherten Änderungen erscheint eine Rückfrage.
– Wird der letzte Tab geschlossen, öffnet die UI automatisch wieder einen neuen leeren Tab
– `Leeren` verwirft die aktuelle Eingabe nach Rückfrage und speichert nichts
– `Ctrl/Cmd + S` entspricht `Speichern`
– `Ctrl/Cmd + W` schließt den aktiven Tab mit derselben Dirty-Abfrage wie der Schließen-Button

  • Monaco CSS Editor
  • native Code Erklärungen

Allgemeines:
– Die Tabelle zeigt (1) `ID`, (2) `Titel`, (3) `Pfad`, (4) `Bereich`, (5) `Status`, (6) `Sortierung`, (7) `Zuordnungen`, (8) `Kommentar/Beschreibung`, (9) `Aktionen`
– Die Tabelle folgt der Plugin-Darstellung und wird im Dark Mode mit dunklen Zeilen, dunklem Tabellenkopf und passenden Hover-/Detailzeilen angezeigt.
– `Pfad` bleibt, in der Tabelle, immer sichtbar, auch wenn ein Titel vergeben wurde
– Die Spalte (7) `Zuordnungen` zeigt aus Platzgründen nur die (10) erste Zuordnung
– Gibt es (11) mehrere Zuordnungen, erscheint rechts neben der ersten Zuordnung ein Mehrfach-Icon
– Klick auf die angezeigte (11) Zuordnung (in der Tabelle) klappt die Detailzeile mit allen Zuordnungen auf und wieder zu
– Über (12) `Kommentar/Beschreibung` lässt sich eine Zusatzzeile mit Titel und mehrzeiliger Beschreibung öffnen
– Die Speicherung von (2) Titel und Beschreibung in dieser Zusatzzeile ist manuell und erzeugt keine Revision
– Dateien mit expliziter Objektzuordnung, impliziter Pfadzuordnung oder Bereichszuordnung werden in der Spalte (7) `Zuordnungen` grün angezeigt
– Nur wenn keine Zuordnung erkennbar ist, erscheint rot `nicht zugeordnet`

  • Tabellenübersicht
  • Tabellenübersicht mit den gesetzten Zuordnungen
  • Tabellenübersicht mit Titel und Kommentar

– Format: eine Zeile je Zuordnung, z. B. `page:12`, `post:34`, `category:5`, `tag:7`, `product:81`, `home:0`, `product_archive:0`
– Leer lassen = wirkt für den gesamten Bereich
– Ein Modal mit AJAX-Suche ist vorhanden
– Mehrere Zuordnungen sind möglich; in der Tabelle erscheint dann nur die erste Zuordnung plus Mehrfach-Icon
– Bereichsdateien ohne konkrete Objektzuordnung, z. B. `global`, `header` oder `footer`, gelten als zugeordnet und werden in der Tabelle grün ausgewiesen

– Der Import-Button sitzt im Editor-Bereich; dafür ist das Recht `import` nötig
– Ziel ist `global/imported-additional-css.css`
– Das Original im Customizer bleibt erhalten
– Nach dem Import solltest du Status und Sortierung prüfen und den Inhalt bei Bedarf aufteilen

Allgemeines:
– Der Hinweis zur Live-Vorschau sitzt als `(i)`-Button direkt neben `Live-Vorschau (Beta)`.
– Der Hinweis zum Picker sitzt als `(i)`-Button direkt neben `Selektor folgt Cursor`.
– Pseudo-Elemente wie `::before` und `::after` können nicht als eigener Knoten gerendert werden; es wird das Basis-Element gezeigt
– Skripte im IFrame werden entfernt, um jQuery- oder Plugin-Fehler zu vermeiden; dynamische Funktionen können dadurch fehlen
– `CSS-Inhalt` und Vorschau teilen sich eine eigene Vollbreiten-Zeile unter Formular und Explorer
– Auf breiten Ansichten steht der Editor links, die Vorschau rechts; auf schmalen Ansichten werden beide untereinander angeordnet
– Wenn die Vorschau ausgelagert ist, bleibt rechts ein schmaler Vorschau-Steuerbereich neben dem Editor stehen
– Auf breiten Ansichten nutzt der Editor dann ca. 2/3 der Breite, der Steuerbereich ca. 1/3
– Unter ca. 1280px bleibt das bestehende Stapelverhalten erhalten
– Explorer und Vorschau sind getrennte Bereiche; der Explorer bleibt oben rechts sticky und überdeckt die Vorschau nicht
– Editor- und Vorschau-Fenster können direkt in ihrer Box grösser oder kleiner gezogen werden
– CSS wird live injiziert, ohne speichern zu müssen
– Beim Andocken wird eine manuell veränderte Editor-Größe wieder auf den Standard zurückgesetzt

Funktionen:
– Modi: (3) **Seitenansicht** und (4) **Elementansicht**
– (7) **Element wählen**: Picker im Seiten-IFrame; Klick setzt den Selektor und schaltet auf Elementansicht
– (8) **Selektor folgt Cursor**: übernimmt den Selektor der aktuellen Regel im Editor
– (6) `Vorschau neu laden` lädt die URL neu
– (1) `Vorschau auslagern` öffnet die Live-Vorschau in einem separaten Fenster, z. B. für einen zweiten Bildschirm
– Solange die Vorschau ausgelagert ist, wechselt der Button auf `Vorschau andocken`
– `Andocken` holt die ausgelagerte Vorschau wieder in den Editor zurück

  • Live Vorschau

– Jede Speicherung erzeugt eine Revision
– Pro Datei gibt es eine Revisionsliste
– Wiederherstellen erzeugt selbst wieder eine neue Revision
– Verlasse dich für Vergleiche auf Zeitstempel, Benutzer und Sichtkontrolle

– Basis in `global`, Bereichs-Styles im passenden Bereich, punktuelle Fixes später mit höherer Sortierung
– Pro Bereich 10er-Schritte verwenden, damit Zwischenwerte frei bleiben
– Reihenfolge: `global` -> `header` -> `footer` -> kontextbezogene Dateien

**Neue Datei**: Im Explorer in den Zielordner wechseln -> `Neue Datei` klicken -> Dateinamen mit `.css` angeben -> Datei erscheint sofort in Explorer, Tabelle und Editor -> Bereich/Status/Sortierung prüfen -> CSS schreiben -> speichern -> Vorschau prüfen
**Neue Datei per Kontextmenü**: Im freien Bereich der rechten Explorer-Seite rechtsklicken -> `Neue CSS-Datei` wählen -> Dateinamen mit `.css` angeben -> Datei wird erstellt und im Editor geöffnet
**Seiten-CSS**: `Seiten-CSS erstellen` -> Seite wählen -> Datei entsteht als `page/slug-id.css` -> Inhalt anpassen
**Datei öffnen**: Im Explorer auf eine CSS-Datei doppelklicken -> Datei landet direkt im Editor-Tab
**CSS-Datei favorisieren**: Rechtsklick auf eine `.css`-Datei -> `Zu CSS-Favoriten hinzufügen` -> Datei erscheint links unter `CSS-Favoriten` und kann dort per Klick direkt geöffnet werden
**Header-Fix**: `header/nav.css` anlegen -> Styles schreiben -> Elementansicht auf `.site-header`
**Footer-Fix**: `footer/base.css` anlegen -> Styles schreiben -> Elementansicht auf `.site-footer`
**Customizer-Migration**: Import klicken -> Datei prüfen -> aufteilen und sortieren

– Vorschau leer oder Konsole voll: Vorschau-URL auf gleiche Domain und HTTPS setzen; Skripte im IFrame werden entfernt
– Selektor nicht gefunden: Pseudo-Element oder nicht existentes Ziel; im Picker ein reales Element anklicken
– Explorer bleibt leer: Admin-Seite hart neu laden und Browser-Konsole prüfen; häufig ist es ein Asset-Cache oder ein blockiertes Script
– Datei erscheint nicht: im Explorer `Reload` ausführen, prüfen ob der Dateiname auf `.css` endet und ob der Pfad unter `wp-content/uploads/lcs-custom-css/` liegt
– Datei ist rot als `nicht zugeordnet` markiert: Das ist nur ein Hinweis. Die UI erkennt weder eine Objekt-, Pfad- noch Bereichszuordnung; Bereich, Pfad und Feld `Zuordnungen` prüfen
– Datei wird heruntergeladen statt im Editor geöffnet: Plugin-Assets aktualisieren und Cache leeren
– `Neue CSS-Datei` fehlt im Kontextmenü: rechts in einen freien Bereich der Dateiliste klicken, nicht auf eine Datei- oder Ordnerzeile
– `Zu CSS-Favoriten hinzufügen` fehlt: prüfen, ob wirklich eine einzelne `.css`-Datei angeklickt wurde; Ordner nutzen elFinders native `Favoriten`
– CSS-Favorit erscheint nicht: Browser-Storage/LocalStorage prüfen; private Fenster oder restriktive Browser-Einstellungen können die lokale Speicherung verhindern
– CORS oder Mixed Content: Vorschau-URL auf die korrekte Domain und das korrekte Protokoll umstellen

– Nonces und Capabilities auf allen Aktionen
– Pfad- und Dateityp-Prüfung: nur `.css`, kein `..`, nur Arbeitsverzeichnis
– Upload-Ordner wird bei Bedarf angelegt; fehlende Rechte führen zu einer Fehlermeldung
– Kein Theme-Lock-in: Dateien bleiben bei Theme-Wechsel erhalten
– Empfehlung: Backups und Revisionen vor größeren Änderungen

– Die WordPress-Pluginliste liest die Version aus dem Header von `lcs-custom-css.php`
– Das Plugin selbst nutzt `LCS_CUSTOM_CSS_VERSION`; Header und Konstante müssen identisch sein
– Das Release-Datum steht in `LCS_CUSTOM_CSS_RELEASE_DATE`
– Kleine Korrekturen und UI-Verbesserungen erhöhen die Patch-Version fortlaufend, z. B. `1.0.13`, `1.0.14`, `1.0.15`.
– Größere neue Funktionen erhöhen die Minor-Version, inkompatible Änderungen die Major-Version
– `SCHEMA_VERSION` ist nur für Datenbankstruktur-Änderungen und wird unabhängig von der Plugin-Version gepflegt

– Wenige, klar benannte Dateien statt vieler Fragmente
– Kritisches CSS in `header`, nicht-kritisches später in `footer`
– Gemeinsame Styles in `global`, Varianten über Zuordnungen oder später geladene Spezialdateien

– Speichern: `Ctrl/Cmd + S`
– Aktiven Tab schliessen: `Ctrl/Cmd + W`
– Suchen: `Ctrl/Cmd + F`
– Ersetzen: `Ctrl/Cmd + H`
– Mehrfachcursor: `Alt+Klick` oder `Ctrl/Cmd + Alt + Pfeile`

1. In den Einstellungen das Uninstall-Verhalten festlegen
2. Plugin deaktivieren und `Löschen` klicken
3. Bei der Option `Tabellen + Upload` wird alles entfernt; sonst bleiben Daten erhalten

Öffne im WordPress-Backend den Menüpunkt `LCS Custom CSS`. Die Hauptseite besteht aus dem Editorbereich, dem Datei-Explorer, der Live-Vorschau und der Dateitabelle.
Arbeite im Normalfall von oben nach unten:

  • 1. Datei im Explorer anlegen oder öffnen
  • 2. Metadaten im Formular prüfen
  • 3. CSS im Editor bearbeiten
  • 4. Vorschau nutzen
  • 5. Speichern
  • 6. In der Dateitabelle Status, Zuordnung und Beschreibung kontrollieren

Die Einstellungen erreichst du über `LCS Custom CSS > Einstellungen`. Dort verwaltest du Rollen, Plugin-Sprache, Darstellung, Primärfarbe, Standard-Vorschau-URL und Uninstall-Verhalten.

Prüfe die Einstellungen vor der produktiven Arbeit einmal vollständig:

  • Rolle wählen: Wähle zuerst die Rolle aus, die du bearbeiten möchtest, und klicke auf Wechseln.
  • Plugin-Sprache wählen: Wähle die Sprache der Plugin-Oberfläche für deinen Benutzer. Andere Benutzer können eine eigene Sprache verwenden.
  • Darstellung wählen: Wähle Hell, Dunkel oder Systemeinstellung folgen. Die Auswahl wird für deinen Benutzer gespeichert. Systemeinstellung folgen wechselt automatisch entsprechend der Browser-/Betriebssystemvorgabe.
  • Berechtigungen setzen: Aktiviere die benötigten Rechte wie view, edit, delete, import oder settings.
  • Primärfarbe setzen: Trage den HEX-Wert manuell ein, nutze das Farbfeld oder klicke auf Reset, um auf #7B3FE4 zurückzugehen. Die Änderung wirkt nur auf Plugin-Adminseiten.
  • Uninstall-Verhalten festlegen: Lege fest, ob beim Löschen des Plugins nichts, nur Tabellen oder Tabellen plus Upload-Verzeichnis entfernt werden.
  • Standard-Vorschau-URL setzen: Nutze die Domain und das Protokoll der Seite, die in der Vorschau geladen werden soll.
  • Hilfetexte lesen: Nutze die runden (i)-Buttons neben den Feldern, um kurze Erläuterungen einzublenden. Bei Primärfarbe und Standard-Vorschau-URL sind die Hinweise zweizeilig aufgebaut.
  • Speichern: Klicke unten auf Speichern, damit die Änderungen dauerhaft in WordPress gespeichert werden.

Der schnellste Weg führt über den Explorer:

  1. Öffne den gewünschten Ordner, z. B. global, page, header oder footer.
  2. Klicke in der Explorer-Toolbar auf Neue Datei oder nutze im freien Bereich der Dateiliste das Kontextmenü Neue CSS-Datei.
  3. Gib einen Dateinamen mit Endung .css ein.
  4. Die Datei erscheint im Explorer, in der Tabelle und direkt im Editor-Tab.
  5. Prüfe im Formular Pfad (.css), Bereich, Status und Sortierung.
  6. Schreibe dein CSS und speichere die Datei.

Für seitenbezogene Dateien kannst du alternativ Seiten-CSS erstellen verwenden. Das Plugin erzeugt dann einen passenden Pfad im Ordner page.

Du kannst Dateien auf mehreren Wegen öffnen:

  • Doppelklick auf eine .css-Datei im Explorer öffnet sie direkt im Editor-Tab.
  • Klick auf einen CSS-Favoriten öffnet die Datei ebenfalls direkt.
  • In der Dateitabelle kannst du vorhandene Einträge prüfen und je nach Aktion wieder bearbeiten.

Beim Bearbeiten gilt:

  • Der aktive Tab ist farbig markiert; ungespeicherte Tabs zeigen einen roten Punkt.
  • Speichern speichert nur den aktiven Tab.
  • Speichern & Leeren speichert den aktiven Tab und ersetzt ihn danach durch einen leeren Tab.
  • Leeren verwirft den aktuellen Inhalt nach Rückfrage ohne Speicherung.
  • Ctrl/Cmd + S speichert den aktiven Tab.
  • Beim Schließen eines Tabs mit ungespeicherten Änderungen erscheint eine Rückfrage.

Prüfe diese drei Felder bei jeder neuen Datei:

  • Status: Nur aktiv geladene Dateien werden im öffentlichen Frontend ausgegeben. inaktiv eignet sich für Entwürfe.
  • Bereich: global, header und footer wirken breit. page, post, archive, category, tag und custom_post_type sind kontextbezogen.
  • Sortierung: Kleinere Zahlen werden früher geladen. Nutze 10er-Schritte, z. B. 10, 20, 30, damit du später Dateien dazwischen einordnen kannst.

Wenn eine Datei nicht im Frontend wirkt, prüfe zuerst Status, Bereich, Zuordnung und Sortierung.

Zuordnungen bestimmen, auf welchen Inhalten eine Datei wirken soll.

Manuelle Eingabe:

  • Schreibe je eine Zuordnung pro Zeile in das Feld Zuordnungen.
  • Beispiele: page:12, post:34, category:5, tag:7, home:0, product_archive:0.
  • Ein leeres Feld bedeutet: Die Datei gilt für den gesamten gewählten Bereich.

Auswahl per Modal:

  1. Klicke auf Zuordnungen auswählen.
  2. Suche nach Seiten oder Inhalten.
  3. Setze die gewünschten Haken.
  4. Übernimm die Auswahl.
  5. Speichere die Datei.

Die Dateitabelle zeigt die erste erkannte Zuordnung direkt an. Weitere Zuordnungen lassen sich über die Detailanzeige aufklappen.

Die Live-Vorschau hilft beim Prüfen, bevor du speicherst.

  • Live-Vorschau aktiv injiziert den aktuellen Editorinhalt in die geladene Vorschauseite.
  • Vorschau neu laden lädt die URL neu.
  • Seitenansicht zeigt die vollständige Seite.
  • Elementansicht zeigt ein ausgewähltes Element isoliert.
  • Element wählen aktiviert den Picker im Vorschau-IFrame.
  • Selektor folgt Cursor übernimmt nach Möglichkeit den Selektor der aktuellen Regel im Editor.
  • Vorschau auslagern öffnet die Vorschau in einem separaten Fenster.
  • Andocken holt die ausgelagerte Vorschau zurück.
  • Solange die Vorschau ausgelagert ist, bleibt rechts der Steuerbereich mit URL, Modus, Reload, Picker und Andocken sichtbar.
  • Auf breiten Ansichten wird der Editor dabei breiter dargestellt, aber maximal ungefähr auf 2/3 der Arbeitsbreite.
  • Beim Andocken springt der Editor zurück auf die Standardgröße, auch wenn die Größe vorher manuell verändert wurde.

Wenn die Vorschau leer bleibt oder fehlerhaft wirkt, prüfe die Standard-Vorschau-URL, HTTPS, Domain, CORS und Mixed Content.

CSS-Favoriten sind eine schnelle Öffnungshilfe im Explorer.

  1. Klicke im Explorer mit der rechten Maustaste auf eine .css-Datei.
  2. Wähle Zu CSS-Favoriten hinzufügen.
  3. Die Datei erscheint links im Bereich CSS-Favoriten.
  4. Klicke auf den Favoriten, um die Datei direkt im Editor-Tab zu öffnen.
  5. Entferne Favoriten per Rechtsklick auf den Favoriten und Aus CSS-Favoriten entfernen.

Wichtig: CSS-Favoriten werden lokal im Browser gespeichert. Sie sind keine Datei-Metadaten und werden nicht zwischen Browsern oder Geräten synchronisiert.

Titel und Beschreibung helfen bei der Wartung größerer CSS-Sammlungen.

  1. Öffne in der Dateitabelle die Zusatzzeile über Kommentar/Beschreibung.
  2. Trage einen sprechenden Titel ein, wenn der Tab und die Tabelle nicht nur den Pfad zeigen sollen.
  3. Ergänze bei Bedarf eine Beschreibung mit Zweck, Kontext oder Abhängigkeiten.
  4. Speichere die Metadaten über den Button in der Zusatzzeile.

Diese Metadaten werden bewusst ohne Revision gespeichert. CSS-Inhalte erzeugen dagegen beim Speichern Revisionen.

Bei jeder Speicherung einer CSS-Datei entsteht eine Revision.

So nutzt du Revisionen:

  1. Öffne oder wähle die betroffene Datei.
  2. Scrolle zum Bereich Revisionen.
  3. Nutze Diff, um Unterschiede zur aktuellen Version zu prüfen.
  4. Nutze Wiederherstellen, wenn du eine alte Version zurückholen möchtest.
  5. Prüfe danach die Datei und speichere bei Bedarf erneut.

Eine Wiederherstellung erzeugt selbst wieder eine neue Revision.

Der Import übernimmt CSS aus dem WordPress-Customizer in eine Datei.

  1. Prüfe, ob deine Rolle das Recht import besitzt.
  2. Klicke im Importbereich auf Customizer-CSS importieren.
  3. Das Plugin legt den Inhalt unter global/imported-additional-css.css ab.
  4. Das Original im Customizer bleibt erhalten.
  5. Prüfe anschließend Status, Sortierung und Inhalt der importierten Datei.
  6. Teile große importierte Blöcke bei Bedarf in mehrere thematische Dateien auf.

Beispiel: Du möchtest CSS für eine Kontaktseite pflegen.

  1. Öffne LCS Custom CSS.
  2. Klicke auf Seiten-CSS erstellen.
  3. Wähle die Kontaktseite aus.
  4. Prüfe den erzeugten Pfad, z. B. page/kontakt-123.css.
  5. Setze den Status auf aktiv.
  6. Prüfe, ob die Zuordnung page:123 gesetzt ist.
  7. Schreibe dein CSS im Editor.
  8. Setze die Vorschau-URL auf die Kontaktseite.
  9. Aktiviere die Live-Vorschau und prüfe die Wirkung.
  10. Speichere die Datei.
  11. Kontrolliere die Dateitabelle: Status, Bereich, Zuordnung und Sortierung.
  12. Öffne die Seite im Frontend und prüfe das Ergebnis ohne Admin-Vorschau.

– Jede CSS-Datei hat eine eigene Version und startet bei `0.0.1`.
– Bei echten CSS-Inhaltsaenderungen erscheint standardmaessig ein Dialog mit Patch, Minor und Major.
– Der Dialog zeigt die naechste Versionsnummer passend zur Auswahl.
– Das Commit-Feld ist optional.
– Bei reinen Metadaten-Speicherungen erscheint kein Commit-Dialog und die Version bleibt gleich.
– Die Einstellung `Commits` kann nur von Administratoren global deaktiviert werden; die automatische Versionierung bleibt aktiv.
– Die Dateitabelle zeigt die aktuelle Version zwischen Pfad und Bereich.
– Die Revisionstabelle zeigt Version und Commit je Snapshot.

Das Plugin befindet sich in einer Beta-Phase.
Es gibt keine Gewährleistung für Funktion, Verfügbarkeit oder Eignung für einen bestimmten Zweck.
Die Nutzung erfolgt auf eigene Verantwortung.
Vor produktivem Einsatz sind eigene Tests und Backups obligatorisch.

  • Custom CSS und LayerCraft Studio Logo

LayerCraft Studio – Custom CSS
Ordnung ins Stylesheet. Schnell. Sauber. Sicher.