Today we are going to put the focus on a simple modification, that will, however, change the look & feel of the Panel significantly and create a more personalized experience.
As developers using Kirby, we usually make websites that we deliver to our customers in a personalized way. By modifying the styles of the Panel a bit, we will take this customization a little further.
The first thing we have to do is to add a custom Panel stylesheet and override the default styles.
To do so, register your custom stylesheet in your
config.php, for example:
Now, we will load the fonts we need:
Note that I have my fonts in the
If you want to include your own fonts, for example from Google Fonts, you can do it like this:
With a few lines of CSS, we are now going to change the appearance of the whole Panel to adapt it to your brand:
You can play with
.k-header::before to adjust your logo correctly.
Here you have some examples:
As you can see, it is a simple adaptation that adds a logo, and modifies the base colors but you can go much further thanks to Kirby's UI Kit