Kirby Panel Custom Colors on Localhost Bookmark

For quite some time I have been running my website on Kirby CMS, and more than once have I mixed up the environment, because I didn’t pay attention. I either added something on the development site or the production site that wasn’t meant to see that latest “asdfadsfadsfadf” post just for testing…

I've been thinking about how to add something to the topbar for quite some time and couldn’t figure out how to best do it. Until today I came across the custom CSS option for the panel again, which made it all very clear on how to solve this issue.

In the separate config.foobartel.local.php which only loads on the development environment, I’ve added the name and location for the custom style sheet:

return [
    'panel' => [
        'css' => 'assets/css/custom-panel.css'
    ]
]

I then added a custom stylesheet for the localhost panel of my development environment. With this simple stylesheet I’m only overriding the background color of the topbar and some items and adding the word “develop” after the site name that appears there as well.

The content of custom-panel.css:

.k-topbar {
    background-color: #d61925;
}

.k-topbar-signals {
    background-color: transparent;
}

[dir=ltr] .k-topbar-signals:before {
    background-color: transparent;
}

.k-topbar-button.k-topbar-view-button::after {
    content: 'DEVELOP';
    padding-left: 0.5rem !important;
}

All of the above then results in this colorful topbar with the the preferred styles, which in my case is the same background color I use in my site footer:

Screenshot of part of the Kirby panel with a custom styles sheet that changes the topbar appearance
Screenshot of part of the Kirby panel with a custom style sheet that changes the topbar appearance from the default black to red

Hopefully from now I won't make these silly mistakes anymore, because it's much more obvious which environment I'm looking at! ;) I keep thinking there’s much more possibilities to improve the look, but hey… I hope you found this helpful and in case you added a custom stylesheet too, please share it and inspire!


Leave a comment

Available formatting commands

Use Markdown commands or their HTML equivalents to add simple formatting to your comment:

Text markup
*italic*, **bold**, ~~strikethrough~~, `code` and <mark>marked text</mark>.
Lists
- Unordered item 1
- Unordered list item 2
1. Ordered list item 1
2. Ordered list item 2
Quotations
> Quoted text
Code blocks
```
// A simple code block
```
```php
// Some PHP code
phpinfo();
```
Links
[Link text](https://example.com)
Full URLs are automatically converted into links.

Replied on your own website? Send a Webmention!

Comments