Skip to content

Kirby 3.9.8

Styling

Learn how you can customise the Panel look via CSS.

Options

The panel config option allows you to customise parts of the Panel look. Besides setting a custom favicon, you can add a custom CSS file to the Panel in which you can utilize the following CSS selectors and variables.

CSS selectors

Throughout the Panel we are using class-based CSS selectors which you can target in your custom panel.css to modify the look of the Panel:

assets/panel.css
.k-topbar {
  background: lightslategray;
}

Besides adding more CSS selectors, we are also using data attributes to allow for much more powerful and tailored Panel customizations:

Selector Description
.k-panel[data-language] for the current content translation language
.k-panel[data-default-language] for the default content translation language
.k-panel[data-translation] for the current Panel UI/user language
.k-panel[data-role] for current user role
.k-panel[data-user] for current user ID
.k-page-view[data-id] for page ID
.k-page-view[data-template] for page's intended template
.k-file-view[data-id] for file ID
.k-file-view[data-template] for file's template
.k-user-view[data-id] for user ID
.k-user-view[data-role] for user's role
.k-site-view[data-id] for site ID (/)
.k-site-view[data-template] for site's template (site)
.k-languages-dropdown for content translation language dropdown
.k-page-view-options, .k-file-view-options and .k-user-view-options for options dropdown on model views
.k-page-view-preview, .k-file-view-preview, .k-site-view-preview and .k-user-view-preview for preview button on model views
.k-pages-section .k-item[data-id], .k-pages-section .k-item[data-status] and .k-pages-section .k-item[data-template]
.k-files-section .k-item[data-id] and .k-files-section .k-item[data-template]
.k-status-icon .k-status-icon-{status} for the page's status button

CSS properties

We use CSS properties for the most important parameters in the Panel. This is useful for customising the look of the Panel but als for plugin developers to create UIs that seamlessly integrate with the rest of the Panel.

You can overwrite our default properties in your custom panel.css:

assets/panel.css
:root {
  --color-backdrop: rgba(255, 255, 255, 0.6);
}

Get to know all CSS properties ›