# Share your custom panel css!

**URL:** <https://forum.getkirby.com/t/share-your-custom-panel-css/5298>\
**Category:** Solutions\
**Tags:** v2\
**Created:** [September 20, 2016, 12:06pm UTC](https://forum.getkirby.com/t/share-your-custom-panel-css/5298 "2016-09-20T12:06:00Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![Thiousi](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/thiousi/32/13656_2.png) [@Thiousi](https://forum.getkirby.com/u/Thiousi)\
**Post date:** [September 20, 2016, 12:06pm UTC](https://forum.getkirby.com/t/share-your-custom-panel-css/5298/1 "2016-09-20T12:06:00Z")

</div>

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:

```css
/* 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?

---

<div class="post-metadata">

**Author:** ![texnixe](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/texnixe/32/5754_2.png) [@texnixe](https://forum.getkirby.com/u/texnixe)\
**Post date:** [September 20, 2016, 12:20pm UTC](https://forum.getkirby.com/t/share-your-custom-panel-css/5298/2 "2016-09-20T12:20:42Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![jenstornell](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/jenstornell/32/546_2.png) [@jenstornell](https://forum.getkirby.com/u/jenstornell)\
**Post date:** [September 20, 2016, 12:26pm UTC](https://forum.getkirby.com/t/share-your-custom-panel-css/5298/3 "2016-09-20T12:26:40Z")

</div>

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:**

> <https://github.com/jenstornell/kirby-headline-jump/blob/master/fields/headlinejump/assets/css/style.css#L30>

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

---

<div class="post-metadata">

**Author:** ![Malvese](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/malvese/32/12375_2.png) [@Malvese](https://forum.getkirby.com/u/Malvese)\
**Post date:** [September 20, 2016, 1:08pm UTC](https://forum.getkirby.com/t/share-your-custom-panel-css/5298/4 "2016-09-20T13:08:59Z")

</div>

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

For the latest I launch last week:

```auto
/* 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:

![](https://europe1.discourse-cdn.com/flex017/uploads/getkirby/original/2X/d/d8c319179d27c381d9cde81186a4c9d07134b022.png)

---

<div class="post-metadata">

**Author:** ![thguenther](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/thguenther/32/16708_2.png) [@thguenther](https://forum.getkirby.com/u/thguenther)\
**Post date:** [September 20, 2016, 1:43pm UTC](https://forum.getkirby.com/t/share-your-custom-panel-css/5298/5 "2016-09-20T13:43:27Z")

</div>

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

```

![](https://europe1.discourse-cdn.com/flex017/uploads/getkirby/original/2X/7/7c432a8b504f10ed8ebc5f439529f641376889fd.png)

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

```

![](https://europe1.discourse-cdn.com/flex017/uploads/getkirby/original/2X/8/8e89265d82fb2ff6c3182f249dbcf13d055bd05a.gif)

---

<div class="post-metadata">

**Author:** ![jenstornell](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/jenstornell/32/546_2.png) [@jenstornell](https://forum.getkirby.com/u/jenstornell)\
**Post date:** [September 20, 2016, 1:48pm UTC](https://forum.getkirby.com/t/share-your-custom-panel-css/5298/6 "2016-09-20T13:48:22Z")

</div>

You know about the blueprint icon option?

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

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

---

<div class="post-metadata">

**Author:** ![thguenther](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/thguenther/32/16708_2.png) [@thguenther](https://forum.getkirby.com/u/thguenther)\
**Post date:** [September 20, 2016, 1:53pm UTC](https://forum.getkirby.com/t/share-your-custom-panel-css/5298/7 "2016-09-20T13:53:57Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![anon77445132](https://avatars.discourse-cdn.com/v4/letter/a/4da419/32.png) [@anon77445132](https://forum.getkirby.com/u/anon77445132)\
**Post date:** [September 21, 2016, 3:36pm UTC](https://forum.getkirby.com/t/share-your-custom-panel-css/5298/8 "2016-09-21T15:36:47Z")

</div>

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

```css
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!

---

<div class="post-metadata">

**Author:** ![klixx](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/klixx/32/7339_2.png) [@klixx](https://forum.getkirby.com/u/klixx)\
**Post date:** [September 28, 2018, 8:27am UTC](https://forum.getkirby.com/t/share-your-custom-panel-css/5298/9 "2018-09-28T08:27:11Z")

</div>

This is how my panel looks like:

 ![localhost_1140_panel_login(iPad%20Pro)](https://europe1.discourse-cdn.com/flex017/uploads/getkirby/original/2X/6/66a9aec25f7864a17ce0c061383a308d195cd811.jpeg)

 ![localhost_1140_panel_(iPad%20Pro)%20(1)](https://europe1.discourse-cdn.com/flex017/uploads/getkirby/original/2X/5/56e067b8aaff838fbc3584a953af87614933292b.png)

 ![localhost_1140_panel_(iPad%20Pro)](https://europe1.discourse-cdn.com/flex017/uploads/getkirby/original/2X/0/04d815b2f6487eba3a901857672c384e12575d60.png)

**EDIT**

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

 ![localhost_1140_panel_(iPad%20Pro)%20(2)](https://europe1.discourse-cdn.com/flex017/uploads/getkirby/original/2X/b/b8c8258eab488313370c9fdd8a8b8321a00aa7c3.png)

---

<div class="post-metadata">

**Author:** ![distantnative](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/distantnative/32/11319_2.png) [@distantnative](https://forum.getkirby.com/u/distantnative)\
**Post date:** [February 6, 2025, 5:26pm UTC](https://forum.getkirby.com/t/share-your-custom-panel-css/5298/10 "2025-02-06T17:26:07Z")

</div>