LCS Custom CSS Dokumentation DE – LayerCraft Studio

Erste Schritte mit LCS Custom CSS

Michél Vengels — Sat, 16 May 2026 08:50:47 +0000

Erste Schritte mit LCS Custom CSS

Willkommen bei LCS Custom CSS – deinem zentralen Werkzeug, um das Design deiner WordPress-Website flexibel und sauber anzupassen.
Mit dem Plugin kannst du eigenes CSS direkt in WordPress einfügen, ohne Theme-Dateien bearbeiten zu müssen. Dadurch bleiben deine Änderungen auch bei Theme-Updates sicher erhalten.

Was macht LCS Custom CSS?

LCS Custom CSS ermöglicht dir, eigene CSS-Regeln direkt auf deiner Website anzuwenden.
Damit kannst du beispielsweise:

Farben ändern
Abstände anpassen
Schriftarten optimieren
Buttons stylen
Layouts erweitern
einzelne Bereiche gezielt überschreiben

CSS („Cascading Style Sheets“) steuert das visuelle Erscheinungsbild deiner Website – also alles rund um Design, Layout und Darstellung.

Der große Vorteil von LCS Custom CSS:
Du arbeitest sicher innerhalb von WordPress, ohne Core-Dateien oder dein Theme verändern zu müssen.

Für wen ist das Plugin gedacht?

LCS Custom CSS richtet sich an:

WordPress-Einsteiger
Designer & Freelancer
Agenturen
Entwickler
Elementor- & Gutenberg-Nutzer
alle, die schnell Design-Anpassungen vornehmen möchten

Egal ob kleine optische Änderungen oder umfangreiche Design-Optimierungen – das Plugin bietet dir eine zentrale Stelle für dein gesamtes individuelles CSS.

Wo finde ich die Einstellungen?

Nach der Installation findest du das Plugin direkt im WordPress-Backend.

Pfad:

WordPress Dashboard → LayerCraft Studio → Custom CSS

Dort kannst du:

dein eigenes CSS einfügen
Änderungen speichern
Styles zentral verwalten
bestehende Regeln bearbeiten

Wie füge ich mein erstes CSS ein?

Der Einstieg ist einfach:

Beispiel: Überschriften einfärben

Füge folgenden CSS-Code ein:

h1 {
    color: #7c5cff;
}

Speichere anschließend deine Änderungen.

Jetzt werden alle

-Überschriften deiner Website in der gewählten Farbe dargestellt.

Beispiel: Button modernisieren

.wp-block-button__link {
    border-radius: 12px;
    background: linear-gradient(135deg, #7c5cff, #5ce1e6);
    color: #fff;
}

Damit erhalten WordPress-Buttons ein moderneres Aussehen.

1. Informationen zu diesem Handbuch

Michél Vengels — Sun, 17 May 2026 09:16:53 +0000

1. 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.

2. System Anforderungen

Michél Vengels — Sun, 17 May 2026 09:18:42 +0000

2. System Anforderungen

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

3. Installation & Update

Michél Vengels — Sun, 17 May 2026 09:23:25 +0000

3. Installation & Update

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

4. Rollen & Rechte (Capabilities)

Michél Vengels — Sun, 17 May 2026 09:25:01 +0000

4. Rollen & Rechte (Capabilities)

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.

5. Allgemeine Einstellungen

Michél Vengels — Sun, 17 May 2026 09:26:26 +0000

5. Allgemeine Einstellungen

**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
**Plugin-Sprache**: Sprache der Plugin-Oberfläche pro Benutzer.
Die Einstellung ist unabhängig von der WordPress-Adminsprache.
**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.
**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.
**Uninstall-Verhalten**: Nichts löschen / nur Tabellen / Tabellen plus Upload-Verzeichnis. Wirksam beim Plugin-Löschen (nicht beim Deaktivieren).
**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.
**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

6. Bereiche & Dateien

Michél Vengels — Sun, 17 May 2026 09:28:08 +0000

6. Bereiche & Dateien

**global**: Basis-Styles, Tokens, Utilities; immer geladen
**header**: früh in der Enqueue-Reihenfolge im ``; Navigation, Above-the-Fold, kritische Fixes
**footer**: spät in derselben Enqueue-Reihenfolge im ``; nicht-kritische Styles und späte Overrides
– 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`

7. Datei-Explorer (rechte Spalte)

Michél Vengels — Sun, 17 May 2026 09:34:04 +0000

7. Datei-Explorer (rechte Spalte)

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

8. Tabs (linke Spalte)

Michél Vengels — Sun, 17 May 2026 09:34:52 +0000

8. Tabs (linke Spalte)

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

9. Editor (CSS)

Michél Vengels — Sun, 17 May 2026 09:35:36 +0000

9. Editor (CSS)

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