Share your custom panel css!

Following conversations here and elsewhere, I’ve decided to start a topic where everyone can share their custom panel css. If a lot of people end up sharing, I’ll find a better way to organize this.

Here’s what I use:

/* Bigger modals */
.modal-content-large {
  max-width: 80em;

/* Less padding above headlines */
.field-with-headline {
  padding-top: 1.5em;

/* Structure entries as 2 columns (except on mobile) */
@media screen and (min-width: 30em) {
  .structure-entries .structure-entry {
    width: 48%;
    float: left;
    margin: 1%;
    border-width: 1px;

What do you use?


That depends entirely on the project, so I don’t use a single custom panel css.

I often don’t have that much I want to change to the built in stuff. The times I do, I almost always have plugins for it that add some other functions as well.

I don’t know if you have noticed this:

Yes, I added a fix in my Headline Jump plugin.

1 Like

Apart from greyed invisible pages, it depends on the project.

For the latest I launch last week:

/* Makes invisible pages grey */
.sidebar-list .invisible {
  color: #666;

/* Rounded corners for Kirby-Tabs plugin */
.tab-nav li {
  background: #e8e8e8;
  border-radius: .25em .25em 0 0;
  padding: .5em 1em;
.tab-nav {
  background: #dedede;

With these styles, the tabs look like this:

1 Like

Interesting topic!

Additionally to some of the changes already mentioned…

Icons for “Homepage”, “Page not found” and “Seach results”:

a[data-helper="Homepages"] i:before {
  content: "\f015";
a[data-helper="Page not found"] i:before {
  content: "\f071";
a[data-helper="Search results"] i:before {
  content: "\f002";

Hiding the modules page in the breadcrumb:

.breadcrumb-link[title="Module"] {
  display: none;

Changing the Builder buttons to be square and left aligned:

.builder-add-buttons {
  text-align: left;
.builder-add-buttons .btn-rounded {
  border-radius: 0;
  margin-left: 0;
  padding: .4em .6em;

Changing the appearance of the search to be white instead of green:

.search-input {
  background-color: white;
.search:after {
  border-bottom-color: white
.search-section a, .search-section li:hover a {
  color: white;
  background-color: rgba(255, 255, 255, .2);

1 Like

You know about the blueprint icon option?

I really like the look of the “new” search! :smiley:


What. Don’t tell me that really exists. Is that new? :fearful:
Seems like I can remove that from my panel.css. Thanks Jens :sweat_smile:


You can add something to the login form of the panel:

body.login form.form {
  padding-top: 150px;
  background: #fff url('../images/logo.svg') center top no-repeat;
  background-size: 25% auto;
body.login form.form::after {
  color: #999;
  content: 'Powered by The 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;

Good luck!

This is how my panel looks like:


Done some color changes and deleted the invisible pages in the overview.