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
The resulting HTML will look like this:
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
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.