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.
| 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 |
staff und client beachtet die Groß-/Kleinschreibung nicht (My-STAFF-theme.css zählt als Staff-Datei).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.| 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) |
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
| 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 <!-- Custom CSS Loader Plugin --> und <!-- /Custom CSS Loader Plugin -->.
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.
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
!importantoder einen genaueren Selektor.