admin4-Modul-Stylesheets #

Diese Seite ist für Designer und Entwickler, die für eine Admin-Seite CSS brauchen, das die admin4-Komponenten nicht ausdrücken können. Sie beantwortet: in welche Datei es gehört, wie diese Datei geladen wird und wie Sie die Klassen benennen.

Inhalt #

1. Seiten des Kernels: die Modul-Stylesheets
2. Seiten einer Erweiterung: Ihr eigenes Stylesheet
3. Regeln für das CSS selbst
4. Nach einer Änderung

Seiten des Kernels: die Modul-Stylesheets #

Die Admin-Seiten des Kernels teilen sich ein Bündel. settings/design.ini [StylesheetSettings] AdminComponentCSSFileList[] listet:

AdminComponentCSSFileList[]=components.css
AdminComponentCSSFileList[]=modules/setup.css
AdminComponentCSSFileList[]=modules/content.css
AdminComponentCSSFileList[]=modules/people.css
AdminComponentCSSFileList[]=modules/structure.css
AdminComponentCSSFileList[]=modules/workflow.css
AdminComponentCSSFileList[]=modules/help.css

Jede liegt in design/admin4/stylesheets/modules/ und in design/admin/stylesheets/modules/. Das page_head_style.tpl von admin4 lädt die Liste nach den eigenen Stylesheets des Designs und vor BackendCSSFileList.

Seiten einer Erweiterung: Ihr eigenes Stylesheet #

Eine Erweiterung ergänzt AdminComponentCSSFileList nicht. Sie hält ihr Stylesheet in ihrem eigenen Admin-Designordner und fügt es zu BackendCSSFileList[] hinzu:

# extension/myext/settings/design.ini.append.php
<?php /* #?ini charset="utf-8"?
[ExtensionSettings]
DesignExtensions[]=myext

[StylesheetSettings]
BackendCSSFileList[]=myext-admin.css
*/ ?>

extension/myext/design/admin4/stylesheets/myext-admin.css

Es wird nach den Komponenten geladen, sodass die Erweiterung bei ihrem eigenen Markup das letzte Wort hat. Siehe Tutorial: ein Admin-Modul-Stylesheet hinzufügen.

Regeln für das CSS selbst #

• Nur, was die Komponenten nicht können.
• Klassennamen .a4-<module>-* für die Moduldateien des Kernels; eine Erweiterung verwendet ein eigenes Präfix.
• Nur Token für Farben, Radius, Abstände, Schriften und z-index; keine fest eingetragenen Werte (der Test prüft die Moduldateien).
• Ein dunkler Wert für jedes Farbtoken, das Sie hinzufügen; normalerweise fügen Sie keines hinzu.
• Logische Eigenschaften (margin-inline-start), damit rechts nach links funktioniert.

Nach einer Änderung #

Deployen Sie mit dem Packer-Schritt (./console exp:velocity deploy --packer), der den Template-Block-Cache leert, in dem der gepackte Link steht, und laden Sie die Seite hart neu. Prüfen Sie die Seite hell und dunkel, bei 1440 px und bei 960 px mit Skalierung 2.

Verwandte Seiten #

• admin4-Komponenten
• Der Test der Admin-Gestaltungsregeln
• Stylesheets laden
• Freie Dokumentation: Diese Seite darf unter der GNU FDL 1.3 frei kopiert, übersetzt und verbessert werden.