Tutorial: ein Admin-Modul-Stylesheet hinzufügen #

Dieses Tutorial ist für Designer und Entwickler, die eine Administrationsseite für eine Erweiterung (myext) bauen und etwas eigenes CSS brauchen. Sie verwenden zuerst die gemeinsamen Komponenten und fügen dann ein kleines Stylesheet an der richtigen Stelle hinzu. Planen Sie eine Stunde ein.

Inhalt #

1. Schritt 1: mit Komponenten beginnen
2. Schritt 2: was übrig bleibt
3. Schritt 3: das Stylesheet
4. Schritt 4: es registrieren
5. Schritt 5: deployen und prüfen

Schritt 1: mit Komponenten beginnen #

Bauen Sie die Seite aus .a4-*-Klassen: .a4-page, .a4-pagehead, .a4-card, .a4-table, .a4-btn, .a4-notice, .a4-empty (admin4-Komponenten). Sehen Sie sich die Seite hell und dunkel an: Die meisten Seiten brauchen kein eigenes CSS.

Schritt 2: was übrig bleibt #

Angenommen, die Seite zeigt eine Zeitleiste von Importläufen mit einem farbigen Balken pro Lauf, den keine Komponente zeichnet. Das ist der Teil für Ihr Stylesheet. Schreiben Sie auf, was die Regeln tun müssen, bevor Sie sie schreiben.

Schritt 3: das Stylesheet #

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

/* myext admin pages. Tokens only (doc/eng-us/bc/6.0/admin4-styling.md); light and dark from the tokens. */
.myext-runs { display: grid; gap: var(--a4-space-2); }
.myext-run {
  display: grid;
  grid-template-columns: 10rem minmax(0, 1fr);
  gap: var(--a4-space-3);
  padding-block: var(--a4-space-2);
  border-block-end: 1px solid var(--a4-line);
}
.myext-run-bar {
  block-size: var(--a4-space-2);
  border-radius: var(--a4-radius-s);
  background: var(--a4-accent-soft);
}
.myext-run.is-bad .myext-run-bar { background: var(--a4-bad-bg); }

• Ihr eigenes Präfix (myext-), eine Komponentenklasse plus höchstens ein Zustand.
• Nur Token: kein #fff, kein 12px; die Breite des Balkens kommt aus .a4-pct-*-Klassen daran, nicht aus style="".
• Logische Eigenschaften (border-block-end, padding-block).

Schritt 4: es registrieren #

extension/myext/settings/design.ini.append.php:

<?php /* #?ini charset="utf-8"?
[ExtensionSettings]
DesignExtensions[]=myext

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

Der Kopf von admin4 lädt BackendCSSFileList nach den Komponenten und Modul-Stylesheets, sodass Ihre Regeln sie verfeinern können.

Schritt 5: deployen und prüfen #

./console exp:velocity deploy --packer --allow-root-user

(auf Installationen ohne Velocity: Leeren Sie die INI-, Template-Block- und Content-Caches). Dann:

• To do: hell und dunkel, bei 1440 px und bei 960 px mit Skalierung 2;
• To do: kein waagrechter Überlauf, Kontrast mindestens 4,5:1;
• To do: kein <style> und kein style="" in den Templates der Seite;
• To do: eine Oberflächensprache von rechts nach links: Die Seite spiegelt sich.

Verwandte Seiten #

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