Kirby Panel Custom Colors on Localhost

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 l…


This content originally appeared on foobartel.com :: Stream and was authored by foobartel.com :: Stream

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!


This content originally appeared on foobartel.com :: Stream and was authored by foobartel.com :: Stream


Print Share Comment Cite Upload Translate Updates
APA

foobartel.com :: Stream | Sciencx (2019-07-23T22:00:00+00:00) Kirby Panel Custom Colors on Localhost. Retrieved from https://www.scien.cx/2019/07/23/kirby-panel-custom-colors-on-localhost-2/

MLA
" » Kirby Panel Custom Colors on Localhost." foobartel.com :: Stream | Sciencx - Tuesday July 23, 2019, https://www.scien.cx/2019/07/23/kirby-panel-custom-colors-on-localhost-2/
HARVARD
foobartel.com :: Stream | Sciencx Tuesday July 23, 2019 » Kirby Panel Custom Colors on Localhost., viewed ,<https://www.scien.cx/2019/07/23/kirby-panel-custom-colors-on-localhost-2/>
VANCOUVER
foobartel.com :: Stream | Sciencx - » Kirby Panel Custom Colors on Localhost. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2019/07/23/kirby-panel-custom-colors-on-localhost-2/
CHICAGO
" » Kirby Panel Custom Colors on Localhost." foobartel.com :: Stream | Sciencx - Accessed . https://www.scien.cx/2019/07/23/kirby-panel-custom-colors-on-localhost-2/
IEEE
" » Kirby Panel Custom Colors on Localhost." foobartel.com :: Stream | Sciencx [Online]. Available: https://www.scien.cx/2019/07/23/kirby-panel-custom-colors-on-localhost-2/. [Accessed: ]
rf:citation
» Kirby Panel Custom Colors on Localhost | foobartel.com :: Stream | Sciencx | https://www.scien.cx/2019/07/23/kirby-panel-custom-colors-on-localhost-2/ |

Please log in to upload a file.




There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.