Custom CSS Loader: Verwendung

Custom CSS Loader verwenden: CSS-Ordner, Dateinamen-Regeln für staff und client, Reihenfolge, wo CSS eingebunden wird, die vier Demo-Dateien und ein Beispiel.

English Version

Zurück zur Übersicht

Custom CSS Loader: Verwendung

CSS-Ordner

Lege deine CSS-Dateien hier ab:

<osTicket-Hauptverzeichnis>/assets/custom/css/

Der Ordner liegt außerhalb des Plugin-Ordners, deine Dateien überstehen daher ein Plugin-Update. Unterordner werden nicht durchsucht.

Regeln für Dateinamen

Regel	Wirkung
Name enthält `staff`	Datei wird im Staff Panel eingebunden
Name enthält `client`	Datei wird im Client Portal eingebunden
Name enthält beides	Die Datei zählt als `staff` (der erste Treffer gewinnt, `staff` wird zuerst geprüft)
Name enthält weder `staff` noch `client`	Datei wird ignoriert
Erlaubte Zeichen	Beginnt mit Buchstabe oder Ziffer, danach Buchstaben, Ziffern, `_` und `-`, Endung `.css`

Die Suche nach staff und client beachtet die Groß-/Kleinschreibung nicht (My-STAFF-theme.css zählt als Staff-Datei).
Dateien mit Punkten im Namen (my.staff.css), Leerzeichen oder führendem Bindestrich oder Unterstrich werden blockiert und im PHP-Error-Log vermerkt. Dateien mit einer anderen Endung als .css werden ignoriert, ohne Log-Eintrag.
Symlinks, die auf eine Datei außerhalb des CSS-Ordners zeigen, werden blockiert.

Beispiel	Ergebnis
`custom-staff.css`	Staff Panel
`my-staff-theme.css`	Staff Panel
`custom-client.css`	Client Portal
`branding-client.css`	Client Portal
`custom.css`	ignoriert
`staff theme.css`	blockiert (Leerzeichen)

Reihenfolge

Mehrere Dateien eines Kontexts werden in alphabetischer Reihenfolge der Dateinamen eingebunden. Für eine feste Reihenfolge stellst du Ziffern voran:

assets/custom/css/
├── 01-variables-staff.css
├── 02-layout-staff.css
├── 03-branding-staff.css
└── custom-client.css

Wo CSS eingebunden wird

Anfrage	Kontext
Skripte unter `/scp/`	Staff Panel
PHP-Skripte außerhalb von `/scp/` und `/api/`	Client Portal
`/api/` und Aufrufe ohne PHP-Skript	kein CSS

Das Einbinden geschieht vor dem ersten </head> der ausgelieferten Seite. Hat eine Antwort kein </head>, wird nichts eingefügt. Jede Datei erscheint als <link rel="stylesheet" href="...?v=<Änderungszeit>"> zwischen den Kommentaren  und .

Demo-Dateien

Das Plugin enthält vier Demo-Dateien in assets/demo/ mit kommentierten Beispielen.

Datei	Zweck	Automatisch kopiert
`custom-staff.css`	Beispiele für das Staff Panel	ja
`custom-client.css`	Beispiele für das Client Portal	ja
`wide-layout-staff.css`	Breiteres Layout für das Staff Panel	nein
`wide-layout-client.css`	Breiteres Layout für das Client Portal	nein

Automatisch kopiert werden nur die beiden custom-*-Dateien, und nur beim Aktivieren in einen Ordner ohne .css-Datei. Die wide-layout-Dateien kopierst du bei Bedarf selbst nach assets/custom/css/. wide-layout-staff.css enthält außerdem Farbvorgaben eines konkreten Designs, die du anpassen oder entfernen solltest.

Beispiel: Breiteres Layout

Als assets/custom/css/wide-layout-staff.css (aus der Demo-Datei):

#container {
    width: 95%;
    max-width: 1800px;
    margin: 0 auto 20px auto;
}

Lässt sich ein osTicket-Style nicht überschreiben, hat er eine höhere Spezifität. Ergänze dann !important oder einen genaueren Selektor.