# Custom panel CSS

**URL:** <https://forum.getkirby.com/t/custom-panel-css/20938>\
**Category:** Solutions\
**Tags:** v3\
**Created:** [January 26, 2021, 10:17pm UTC](https://forum.getkirby.com/t/custom-panel-css/20938 "2021-01-26T22:17:46Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![Tobias\_L](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/tobias_l/32/9723_2.png) [@Tobias\_L](https://forum.getkirby.com/u/Tobias_L)\
**Post date:** [January 26, 2021, 10:17pm UTC](https://forum.getkirby.com/t/custom-panel-css/20938/1 "2021-01-26T22:17:46Z")

</div>

Since I had “a bit” of spare time and you can’t do anything social at the moment 😕 , I decided to CSS style the panel a bit.

I really like the look of Kirby’s native panel design however I felt it was a bit too dark from my point of view, so I tried to make it a bit “frendlier” by by using a lighter colour scheme, rounded border edges, light focus-outlines, mini-animations etc.

Feel free to use it if you want!

I think all of the fields are styled and also some plugins (mainly sylvainjule’s), however of course, since there are a lot of native elements, I could have missed something.

 ![b2](https://europe1.discourse-cdn.com/flex017/uploads/getkirby/original/2X/d/dfee105f1e67d9765d2e20ef44447a8c4a2d0cf7.gif)  
 ![Bildschirmfoto 2021-01-26 um 23.20.45](https://europe1.discourse-cdn.com/flex017/uploads/getkirby/original/2X/4/433de95ad25a5fa83c96c1d19fac7d829ae53a26.png)  
 ![Bildschirmfoto 2021-01-26 um 23.45.41](https://europe1.discourse-cdn.com/flex017/uploads/getkirby/original/2X/b/b532947b802a02741c93aec09efbc7c55ec47613.png)  
 ![Bildschirmfoto 2021-01-26 um 22.15.10](https://europe1.discourse-cdn.com/flex017/uploads/getkirby/original/2X/8/8228d62857db19999cbd0eb6362970f8be84bc57.png)  
 ![Bildschirmfoto 2021-01-26 um 22.15.19](https://europe1.discourse-cdn.com/flex017/uploads/getkirby/original/2X/2/24c2e0a8c018729c6a6f0690bd25843bdaf0d926.png)  
 ![b1](https://europe1.discourse-cdn.com/flex017/uploads/getkirby/original/2X/4/424ca1fabbd47ab97e9a60384e66737bcb2ace91.gif) ![Bildschirmfoto 2021-01-26 um 22.15.57](https://europe1.discourse-cdn.com/flex017/uploads/getkirby/original/2X/b/b68852eb315cc2bbead001c5fb1e1f40e45fd685.png)

You can find it here [GitHub - TobeyEh/kirby3csstheme: A CSS theme for Kirby 3](https://github.com/TobeyEh/kirby3csstheme)

Also if you want, suggestions for improvement or changes are gladly welcomed – have only tested it in the most recent browsers. (If anyone wants to use it, also suggestions for other plugins to restyle are welcomed)

Thx

---

<div class="post-metadata">

**Author:** ![Peleke](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/peleke/32/4935_2.png) [@Peleke](https://forum.getkirby.com/u/Peleke)\
**Post date:** [July 30, 2021, 1:28pm UTC](https://forum.getkirby.com/t/custom-panel-css/20938/2 "2021-07-30T13:28:00Z")

</div>

> [@Tobias\_L](#):
>
> GitHub - TobeyEh/kirby3csstheme: A CSS theme for Kirby 3

Thanks a lot for your great looking contribution!  
I really like it except for the used opacity on headings such as

```auto
.k-field-label, .k-section-header .k-headline

```