Examples for customizing the Panel
Style Panel elements via blueprint settings and custom CSS
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:
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.
By default, the
info field and the
info section have 4 themes:
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
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:
The available backgrounds for image cards in the Panel, defined via the
back option, are:
Again, we can leverage the fact that Kirby adds the value we pass to the
back option to the
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:
In the same way, you can modify other elements that get their
data attributes via blueprint settings, like the card size.