Color field Kirby 4

Kirby 4 Solved ✔️
1

Hello everyone,

I’m trying to change a website from K3 to K4 and I want to implement a field to be able to change the color of the whole website background through the panel. I’m trying to use the new color field and although I see it in the panel, the color I choose is not reflected in my code when I inspect it, the background-colour is empty.

Here’s what I tried:

I added to my header snippet this code inside the head tag but it’s not working. Can someone point me in the right direction, I tried to search here on the forum but didn’t find anything otherwise I will need to use a plugin which doesn’t make any sense since I want to update to K4

code:

<?php if ($background = $page->color()) : ?>
    <style type="text/css">
     body { 
       background-color: <?php echo $background ?>;
      }
    </style>
  <?php endif; ?>
2

If you have inserted it in home.yml, it will only work on home.php
Set the color field on site.yml and use $site to make it available on all pages.

For example:

site/blueprints/site.yml

color:
  label: Pre-defined colors
  type: color
  mode: options
  options:
    "Rot": "#f03c46"
    "Pink":  "#eb4b87"
    "Grün":  "#2ed47c"
    "Blau":  "#2e94eb"
    "Gelb":  "#ffcc2e"
    "Lila":  "#502e95"
    "Orange":  "#ff6437"

site/snippets/header.php

<?php if ($background = $site->color()) : ?>
    <style type="text/css">
     body { 
       background-color: <?php echo $background ?>;
      }
    </style>
  <?php endif; ?>

color
color1920×1824 194 KB

3

thank you so much @GB_DESIGN! my mistake was using $page instead of $site now is working! thank you!

1 Like
4

Sometimes it’s the little things that make you despair.
Glad I could help you.
:tada: Have fun with Kirby 4!

2 Likes