Quicktip: Custom Panel CSS

In the Kirby Panel, I use numerous fields that don’t need to be translated or shouldn’t be. These include fields like categories or tags, as well as certain settings that apply equally to all languages.

My main language is German, where I set the values. When I switch to English, I can’t edit these fields, and the values come from the German page:

Since these fields aren’t relevant for translation, I often wondered why they even needed to be visible.

Unfortunately, hiding non-translatable fields in the Kirby Panel isn’t possible, so I had to find another solution.

Custom Panel CSS

If I can’t hide the fields via configuration, I can at least do it with CSS. Fortunately, it’s possible to load a custom CSS file into the Panel and override styles.

This is useful, for example, if you want to brand the Panel for a client — or, in this case, hide fields.

First, the CSS file needs to be loaded. This is done in the config.php file:

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

Once the file is loaded into the Panel, we can start tweaking things.

Inspecting the elements reveals that each field is wrapped in several div elements. Unfortunately, the information that a field is disabled is only written to the tree at a deeper level:

To hide the fields properly, we need to target .k-column, so that not only the field itself disappears, but also the space it occupies. If we only hide the field, whitespace equal to the field’s height remains.

However, we can only determine at a lower level whether a field is disabled. This information is stored in the data-disabled="true" attribute.

Thanks to modern CSS features and the glorious has() selector, we can indirectly target the parent element of the disabled field:

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

Hurray! It’s that easy nowadays. This selector looks for div elements whose children have the data-disabled="true" attribute and hides them.

The result looks like this:

Now, only the relevant fields remain visible — everything else is hidden. It’s not 100% perfect because the remaining fields don’t automatically take up the freed-up space, but that’s a minor issue. The more important part is that only relevant fields are displayed.

With this approach, I can make further adjustments if needed, whether I notice something new or want to tweak the Panel’s design.

Have fun experimenting!