Stylesheet into Snippet


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.


I’m curious why you’ld want that? :thinking:

1 Like

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 :wink:

… then the user changes the design of the website !! ??? :face_with_raised_eyebrow::face_with_raised_eyebrow::face_with_raised_eyebrow:

And I think, that should not be done after the webside has been published. And only be made by the designer and never by the user!

But you can do this with Kirby, if you want!

How about the user is a designer? Or just creative? It’s still the webdev who defines which properties are editable…

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?

1 Like

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.

This is my personal opinion :wink:

1 Like

And that’s why I posted it here - to see the reactions and to have a better feeling for this approach. Thanks for your feedback!


I am with @bvdputte here.

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.

1 Like