Panel stylesheet as php file

The CMS Questions
1

I know that this:

c::set('panel.stylesheet', 'assets/css/panel.css');

is the way to add a custom stylesheet for the panel. But is there a way to do this with a php file?

2

Don’t know why you want to do this, but seems to work. Have you not tried it yourself?

3

For example: I want to pick a color in the settings for the input focus and apply it to the stylesheet of the panel.

I tried to set it in the config but without any result …

c::set('panel.stylesheet', 'assets/css/panel.php');

4

If you want to use a php file, you have to change the extension in the config as well.

5

That means that i have to build a new route for the stylesheet?

6

Oh, I probably got you wrong. I thought you wanted to use an assets/css/ panel.phpfile instead of an assets/css/panel.cssfile, so that you could use PHP variables inside that file.

8

For Example:

In the frontend i have a snippet in my head.

<head>
  <?php snippet('colors') ?>
</head>

and this is a part of the color snippet:

<?php if($link = $site->links()) : ?>
   <style type="text/css">
     a {
       color: <?php echo $link ?>!important;
     }
   </style>
<?php endif; ?>

This changed the link color in my frontend as you can see. But now i want to do the same with the panel styles, so that i can easily customize the colors etc.

9

Well, yes, I guess you could echo your styles from a route. Very basic example:

c::set('routes', [
  [
    'pattern' => 'assets/css/panel.css',
    'action' => function() {
      header("Content-type: text/css");
      $color = site()->color()->value();
      echo ".app{background-color:$color;}";
    }
  ]
]);

c::set('panel.stylesheet', 'assets/css/panel.css');
10

For my understanding … i must to set the color values in the config and echo this to my body for example?

11

I thought you wanted to set the color in the site settings? The code above would go into your config.php. In site settings, you would have a field called color.

12

That’s right.

With the code above i have no result … In the site blueprint i’ve added a color field too. Changing the color in the settings don’t change the app background.

13

I’ve tested this before I copied it here, so it should actually work. Could you post all that you’ve done now?

14

I’ve copy your code and added the color field to my site blueprint.

config.php

c::set('routes', [
  [
    'pattern' => 'assets/css/panel.css',
    'action' => function() {
      header("Content-type: text/css");
      $color = site()->color()->value();
      echo ".app{background-color:$color;}";
    }
  ]
]);

c::set('panel.stylesheet', 'assets/css/panel.css');

and the blueprint: site.yml

color:
    label: Background
    type: color
15
  • what is stored in the field?
  • is there already a panel.cssfile in assets/css?
16
  1. The color picker is a custom field by ian-cox (https://github.com/ian-cox/Kirby-Color-Picker)
  2. Yes, there is already an empty panel.css file
17

Then you have to remove the file, otherwise the route doesn’t kick in. If the Apache server finds a file, it serves the file.

18

I’ve removed the panel.css but after i set the color in the settings there is no result. Can’t understand what there is wrong :confused:

19

Does the custom stylesheet show up in your resources tab in dev tools?

08
Bildschirmfoto 2018-10-26 um 11.18.08.jpg1150×972 112 KB

20

Nope. It is empty in my sources panel:

36
Bildschirmfoto 2018-10-26 um 11.34.36.png845×484 20.7 KB

21

Have you cleared your browser cache after you removed the local panel.css file?