Customize Panel

We can change many aspects of the look and feel of the Panel by adding a custom Panel stylesheet and overriding the default styles.

To do so, register your custom stylesheet in your config.php, for example:

return [
  'panel' => [
    'css' => 'assets/css/custom-panel.css'
  ]
];

Once this is set up, we can target the elements we want to modify via their selectors and apply our custom styles.

In this recipe, we will shift the focus a little, and look at how we can actually extend default Panel elements by adding a property to a blueprint and the styling this element.

Info sections/fields

By default, the info field and the info section have 4 themes: info, positive, negative and no theme.

But since Kirby adds the property value we pass to the theme property into the data-theme attribute of the element, we can use this behavior to create any theme we need.

Let's add a warning theme as an example.

In your blueprint, add an info field and give it a theme property with a value warning:

fields:
  info:
    theme: warning
    text: This is a warning message

The resulting HTML will look like this:

<div data-theme="warning" class="k-box">
  <div class="k-text">
    <p>This is a warning message</p>
  </div>
</div>

We can now style this field in our custom styleheet:

.k-box[data-theme="warning"] {
  background: #f5d8a1;
  border-left: 2px solid #f0c674;
}

Custom field/section image backgrounds

The available backgrounds for image cards in the Panel, defined via the back option, are: pattern, black and white.

Again, we can leverage the fact that Kirby adds the value we pass to the back option to the data-back attribute:

sections:
  pages:
    type: pages
    layout: cards
    image:
      query: page.images.findBy("name", "cover")
      cover: true
      ratio: 1/1
      back: custom

As before, we can use this attribute as selector in our stylesheet:

[data-back="custom"] span {
  background: #B294BB;
}

In the same way, you can modify other elements that get their data attributes via blueprint settings, like the card size.