Tipp: Eigenes Panel CSS

Im Kirby Panel verwende ich zahlreiche Felder, die nicht übersetzt werden müssen oder sollen. Das sind Felder wie Kategorien oder Tags, aber auch bestimmte Settings, die ich setzen kann und die für alle Sprachen gleichermaßen gelten.

Meine Hauptsache ist Deutsch, dort setze ich die Werte, wechsle ich dann auf Englisch, kann ich die Felder nicht bearbeiten und die Werte kommen aus der Deutschen Seite:

Da mich diese Felder in der Übersetzung nicht wirklich interessieren, fragte ich mich häufig, warum sie denn überhaupt sichtbar sein müssen.

Das Ausblenden von nicht übersetzbaren Feldern ist im Kirby Panel leider nicht möglich, also musste eine andere Lösung her.

Eigenes Panel-CSS

Wenn ich die Felder nicht via config ausblenden kann, dann kann ich das zumindest über CSS tun. Erfreulicherweise ist es möglich, eine eigene CSS-Datei in das Panel zu laden und somit Styles zu überschreiben.

Das ist nützlich, wenn man das Panel beispielsweise für einen Kunden branden will – oder eben Felder ausblenden.

Zunächst gilt es, die CSS-Datei zu laden. Das passiert in der config.php

'panel' => [
    'css' => '/assets/css/panel.css'
]

Schon wird die Datei im Panel geladen und wir können unser Unwesen treiben.

Ein Blick in den Inspektor zeigt auf, dass jedes Feld von einigen div umgeben ist. Leider wird die Information, dass ein Feld deaktiviert ist, erst auf zweiter Ebene in den Tree geschrieben:

Ausblenden müssen wir .k-column, damit nicht nur das Feld unsichtbar ist, sondern auch der Platz freigegeben wird. Blenden wir nur das Feld aus, bleibt Whitespace in Höhe des Feldes erhalten.

Wir wissen allerdings erst eine Ebene tiefer, dass das betroffene Feld deaktiviert wurde. Die Information steht im data-Attribute data-disabled="true".

Dank neuer CSS-Features und dem glorreichen has() Selektor können wir indirekt auf das Parent-Element von Data-Disabled-Div zugreifen:

div:has(> [data-disabled='true']) {
    display: none;
}

Hurra! So einfach geht das inzwischen. Wir schauen also nach divs, deren Kinder das Attribut data-disabled='true' haben und blenden diese dann aus.

Im Ergebnis sieht das dann so aus:

Zu sehen sind nur noch die relevanten Felder, alles andere ist ausgeblendet. Ganz optimal funktioniert das nicht, weil die Felder sich im Nachhinein nicht den Platz nehmen, den sie jetzt haben könnten, aber das ist eine Kleinigkeit. Viel wichtiger ist, dass nun nur noch relevante Felder gezeigt werden.

Auf diese Weise könnte ich jetzt weitere Anpassungen vornehmen, sollte mir mal wieder etwas auffallen oder ich das Panel-Design anpassen wollen.

Viel Spaß beim selbst ausprobieren.