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;
}
7 Likes

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("https://unsplash.it/1920/1200/?random") center no-repeat;
  background-size: 100% auto;
  background-size: cover;
}

/* logotype */

body.login form.form {
  padding-top: 8.5em;
  background: #fff url("https://unsplash.it/640/120/?random") center 2em no-repeat;
  background-size: 85% auto;
}

(possible) results

…etc

6 Likes