Until now I knew that you can access CSS-values from the panel by placing an inline-style to a given element in your template. Or by making predefined classes accessible through a select field. While this is fine, it doesnât give you full control of your CSS in your panel. Adding inline-styles in your template is not an option if you want to tweak a lot of options. And predefined classes donât allow to change the value behind a class.
So, the obvious solution is:
Put your whole CSS in a snippet, wrap it into âstyleâ -tags and place your new âstyleâ-snippet in the head of your site instead of a ârealâ CSS-stylesheet.
Now this allows you to grab every single CSS-value in your panel without the need to use inline-styles in your template (in fact now you have one big inline-style) and without the restrictions of predefined classes.
Iâm posting this here, because Iâm really excited about this discovery and because I read nowhere before about this simple approach. If this is a well-known thing I highly suggest this for the Kirby Cookbook, I would offer to write it. Maybe there are some drawbacks? Anyways, I am glad if this is helpful to anybody.
A good example is the opacity value. Letâs say you have a div with a background-image and you want to allow your user to play with the opacity of this background-image (a feature which is very common in wordpress-themes). You can do it with predefined classes, but you would need 10 classes for each value (0.1 - 1.0). With the snippet-stylesheet you let the user enter numeric values in the panel.
Or the border-width of an element. The user can try different values and disable the border in one field.
There are many more examples and itâs all about giving more possibilities to the user. This is not a bad thing, even for Kirby
Because you could do that, doesnât mean you shouldâŚ
I think there are cleaner ways of adding such kind of functionality (e.g. expose a few classes they can choose from), instead of giving editors direct access to your style layer.
â
Edit: it also makes managing CSS a lot tougher in the future, as it gets entwined in the content.
â
Edit 2: in the same mindset -> you wouldnât expose a php-field that is rendered as PHP from the panel, right? Even if your editor is a webdev?
Of course, I absolutely understand what you mean. But I just think there are many use-cases, which could benefit from such a possibility. It just should be known, that this is possible, why not? It extends the flexibility of Kirby or am I wrong?
Thatâs what I try to say with just because you can do something doesnât mean it should. In my opinion what youâre suggesting is âbad practiceâ and shouldnât be advocated. We have novice users reading up in this forum on how to tackle their problems, and imho we should avoid giving them the idea this is how you should extend Kirby. Instead we should advocate good ways to solve this kind of problems.
The problem is not that you canât do things in Kirby. You can do anything in Kirby, you can even let the editors edit your code files, if you want. Happy site breaking!
From a performance point of view, putting the stylesheet into the HTML file doesnât make sense either, unless that file is really small.