Customize / brand the panel login form

It’s very easy to customize the login-form of Kirbies panel.

You can e.g. “brand” it for your client, or give it a more corporate look. In my case I decided to place the clients logo on top of the form and a small watermark below;

If you want to do the same, simply add the following code to \site\config\config.php

c::set('panel.stylesheet', 'assets/css/panel.css');

This code will load a new assets in your panel-environment, called panel.css

In that style-sheet you can copy/paste the code below - be sure to change the path / name of your logo-file and the padding / margins, in order to match your own design.

/* brand the login-form */

body.login form.form {
    padding-top: 150px;
    background: #fff url('../../content/logo.png') center top no-repeat;
    background-size: 75% auto;

body.login form.form::after {
  color: #999;
  content: 'Powered by My Awesome Company.';

body.login form.form .btn-submit {
  margin: 0 0 45px 0;

body.login form.form fieldset.buttons-centered {
  border-bottom: 1px solid #ccc;
  margin-bottom: 10px;

Decided to update it for Kirby 2.3 - which uses the ::after pseudo-class for itself.

/* config.php */

c::set('panel.stylesheet', 'assets/css/panel.css');

/* assets/css/panel.css */

/* background */

body.login {
  background: #222 url("") center no-repeat;
  background-size: 100% auto;
  background-size: cover;

/* logotype */

body.login form.form {
  padding-top: 8.5em;
  background: #fff url("") center 2em no-repeat;
  background-size: 85% auto;

(possible) results