bnomei
April 12, 2016, 11:50am
1
is it possible to ‘theme’ the kirby panel? would the following link be a good starting point or should it be solved otherwise?
It’s very easy to customize the login-form of Kirbies panel.
You can e.g. “brand” it for your client, or give it a more corporate look. In my case I decided to place the clients logo on top of the form and a small watermark below;
[image]
If you want to do the same, simply add the following code to \site\config\config.php
c::set('panel.stylesheet', 'assets/css/panel.css');
This code will load a new assets in your panel-environment, called panel.css
In that style-sheet you can copy/paste…
You can control the CSS like the link says. Javascript is not possible by security reasons.
it would be Really Cool to Edit The Panel Login
As already said, you can do everything that is doable via CSS.
you mean i can Control all about the Panel whit CSS ?
Colors, fonts, margins etc. Not html or functions. Just the surface.
1 Like
bnomei
April 12, 2016, 12:11pm
7
has anyone does this on a large scale? it would be easier if panel used less or sass with variables for colors fonts etc.
@charset "UTF-8";
/* Panel components */
@font-face {
font-family: 'Source Sans Pro';
font-style: normal;
font-weight: 400;
src: url(../fonts/sourcesanspro-400.woff2) format("woff2"), url(../fonts/sourcesanspro-400.woff) format("woff"); }
@font-face {
font-family: 'Source Sans Pro';
font-style: normal;
font-weight: 600;
src: url(../fonts/sourcesanspro-600.woff2) format("woff2"), url(../fonts/sourcesanspro-600.woff) format("woff"); }
@font-face {
font-family: 'Source Sans Pro';
font-style: italic;
font-weight: 400;
src: url(../fonts/sourcesanspro-400-italic.woff2) format("woff2"), url(../fonts/sourcesanspro-400-italic.woff) format("woff"); }
This file has been truncated. show original
However you can’t use the Panel SCSS variables in your custom CSS code as that won’t get compiled into the main Panel CSS but embedded separately.
It generally makes sense to use the Panel design and layout as a starting point and to only override the styles you need in your custom CSS.
Unless the op uses Gulp or some other preprocessor. For an advanced quality panel theme I think it could be beneficial to have the scss file as starting point. It however require the user to have such knowledge. Else it would just be a huge overhead.
Even then the custom Panel CSS won’t be compiled into the main CSS file. So you would need to require the variables file into your custom CSS which makes it all more complicated.
That’s why I prefer the simple approach using normal CSS.
bnomei
April 12, 2016, 3:37pm
12
oh boy. i did not see the scss folder. thx.
Take a look at this site (I made several months ago).
##My First Kirby Site … Everrrr
I almost forgot to post it here I created this site months ago;
http://mediatrend.nl/
It is my first Kirby site ever, and I designed, coded and created everything by hand.
First I made the static html-template, which I than converted to a real Kirby-theme.
###I also changed some parts of the CMS to suit my needs;
[image]
The admin-backend is secured with a - nice styled - captcha-code (Kirby powered).
[image]
When you enter the rig…
It contains screenshots, so you can see how you can customize the panel - by pure CSS.