Share your custom panel css!

[Thiousi]

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?

[texnixe]

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

[jenstornell]

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:

jenstornell/kirby-headline-jump/blob/master/fields/headlinejump/assets/css/style.css#L30

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

[Malvese]

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 li.active {
  background: #dedede;
}

With these styles, the tabs look like this:

[thguenther]

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 li.active a, .search-section li:hover a {
  color: white;
  background-color: rgba(255, 255, 255, .2);
}

[jenstornell]

You know about the blueprint icon option?

https://getkirby.com/docs/panel/blueprints/page-settings#set-custom-icon

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

[thguenther]

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

[anon77445132]

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!

[klixx]

This is how my panel looks like:

EDIT

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