How to use value of field as css class

Dear Kirby forum,

I would like to choose the background color for the body tag from the panel. This way I can give every project a different background. I managed to implement the plugin ‘Color Picker’ by Ian Cox and it works in the panel, but I am completely lost as to how I can initialize it and use it as css.
I have been browsing the web extensively but have not found any answers. At this point I am looking to solutions such as storing the value of the field in a php variable, putting this i a javascript variable and using this in jquery as a class to the body tag… All very complex but it does not work either… :slight_smile:

Does anyone have an idea how I can achieve this?
Or point me to successful implementations of the color picker plugin?

Regards and thanks in advance,
Lauren

I suggest you use an internal style sheet in your header snippet:

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

Oh wauw, that just worked immediately! Thank you SO MUCH Texnixe.
Wish I could write that so easily. But hey, learning each day!

Hi @texnixe, so I just saw this code only works on pages. It does not work on the homepage - probably because of the $page object. I have tried $site but this did not work. Any ideas on what might do that job?

The code should work for the homepage just as well. What doesn’t work? Do you get any errors?

What content do you output on the homepage? Could you post your code?

Of course it’ll only work on pages that have a backgroundColor field.

@texnixe: Is there a reason not to use the inline CSS like:

<body style="background-color: <?php echo $page->backgroundColor() ?>">

(despite from the fact that this snippet doesn’t handle an empty background variable)?

You can, of course, also use inline styles, but it will make your HTML more difficult to read and maintain, especially, if it’s more than one style setting.

To handle empty variables, you would have to write sth. like this:

<body<?php e($backgroundColor=$page->backgroundColor(), ' style="background-color:' . $backgroundColor . '"') ?>>

Once it get’s more complicated, it completely messes up your code.

Sure, fore more complex things this is not a good choice, but I used the snippet above in a current project and wanted to check if it’s bad somehow :slight_smile:

Well on the homepage I show one project from a projects folder, I store it in a variable $project like this:

<?php foreach(page('projects')->children()->visible()->shuffle()->limit(1) as $project): ?>
		<?php echo $project->bild()->kirbytext() ?>
		<?php echo $project->title()->html() ?></a>
		<?php echo $project->year()->html() ?></a>
		<?php echo $project->tags()->html() ?></a>
		<?php echo $project->text()->kirbytext() ?>
<?php endforeach ?>

However if I do for instance

 <?php if($background = $project->bgcolor()) : ?>

then it gives me these errors:
– Undefined variable: project
– Call to a member function bgcolor() on null

Strange no?

Well, I guess you use $project here before you define it. So you need to define the project first and then get the color, e.g.

<?php 
//the $project variable needs to be defined first; if you use `first()` here you don't need the foreach loop
$project = page('projects')->children()->visible()->shuffle()->first();
//the rest of you code without the foreach loop ...
 if($background = $project->bgcolor()) : ?>
...

If you use it in the header snippet, you need to pass the variable to the snippet first, but I can’t tell from your code.

Yes, that seems logical but somehow that does not work. It does not give me an error but it does not execute the code… I can not seem to figure out why…

Could you please post the complete code, including the header or snippet where the background goes?

Correction it does work, defining the variable works (if on homepage) but then it gets confused when going to a projects page. Obviously, since, there it should use the $page object. I do not know how to write that. I think it should use some conditional code checking if the page is a homepage or project’s page.
Any use it appreciated, and thanks in advance already!

<head>

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

<?php if($text = $page->textcolor()) : ?>
<style type="text/css">
 body { 
   color: <?php echo $text ?>
  }
  a, a:hover, a:active, a:visited, a:link { 
   color: <?php echo $text ?>
  }
</style>
<?php endif; ?>
</head>

<?php foreach(page('projects')->children()->visible()->shuffle()->limit(1) as $project): ?>
<div class="row project-images">
	<div class="col-xs-10 col-xs-offset-1">
		<?php echo $project->bild()->kirbytext() ?>
	</div>
</div>	
<div class="row">
	<div class="col-xs-10">
		<br/><?php echo $project->title()->html() ?><br/><br/>
	</div>
</div>
<div class="row">
	<div class="col-sm-6">
		<?php echo $project->text()->kirbytext() ?><br/>
	</div>	
	
	<div class="col-sm-6 small">
	<?php if($project->commissioned()->isNotEmpty()): ?>
		<?php echo $project->commissioned()->html() ?></a><br/>
	<?php endif ?>
	
	<?php if($project->collab()->isNotEmpty()): ?>
		<?php echo $project->collab()->html() ?></a><br/>
	<?php endif ?>
	
	Date: <?php echo $project->year()->html() ?></a><br/>
	Tags: <?php echo $project->tags()->html() ?></a><br/>
</div>

</div>

<?php endforeach ?>

I still don’t quite get it, let’s get this straight:

  • Is what you posted the code for the home page or for the project page? I thought you were displaying the projects on the home page?

  • Where are the colors defined? For the home page? For the project page(s)? I assume, each child of the projects folder has it’s own color?

Edit: You can check for homepage like this:

<?php if $page->isHomePage() : ?>
//do stuff
<?php endif ?>

Hello texnixe, you got it all right.

  • the code I posted is for the homepage, indeed I am displaying a project on the homepage. I do that by storing a project in the $project object in this manner:

      <?php foreach(page('projects')->children()->visible()->shuffle()->limit(1) as $project): ?>
    

– The colors are defined in the projects pages. Every child of the projects folder has indeed its own color. But the projects are shown BOTH on the homepage and projects pages. The site starts out with a project on the homepage (home.php) and then you can click through to another project which uses the project.php template. Homepage uses the $project object and project pages use the $page object… So I would like it to work on all the pages.

For now I have this code which seems to work at first, but then it seems to get confused and uses a color from a previous project on the page… Do not know why. Is this code too complex?

<?php if($page->isHomePage()): ?>
  <?php $project = page('projects')->children()->visible()->shuffle()->first(); 
   if($background = $project->bgcolor()) : ?>
    <style type="text/css">
     body { 
       background-color: <?php echo $background ?>
      }
    </style>
  <?php endif; ?>
  <?php if($text = $project->textcolor()) : ?>
    <style type="text/css">
     body { 
       color: <?php echo $text ?>
      }
      a, a:hover, a:active, a:visited, a:link { 
       color: <?php echo $text ?>
      }
    </style>
  <?php endif; ?>

<?php else: ?>
  <?php if($background = $page->bgcolor()) : ?>
    <style type="text/css">
     body { 
       background-color: <?php echo $background ?>
      }
    </style>
  <?php endif; ?>
  
  <?php if($text = $page->textcolor()) : ?>
    <style type="text/css">
     body { 
       color: <?php echo $text ?>
      }
      a, a:hover, a:active, a:visited, a:link { 
       color: <?php echo $text ?>
      }
    </style>
  <?php endif; ?>

<?php endif ?>

I tested this in a fresh starterkit and for me it seems to work as it should? The color on the homepage changes, because the projects are shuffled, and each project itself gets its own color.

But anyway, I would do it like this:

  1. In the head of your header snippet:
<?php if(isset($project)) : ?>
  <style type="text/css">
    <?php if($background = $project->bgcolor()) : ?>
       body { 
         background-color: <?php echo $background ?>
      }
    <?php endif; ?>
    <?php if($text = $project->textcolor()) : ?>
      body { 
         color: <?php echo $text ?>
      }
        a, a:hover, a:active, a:visited, a:link { 
         color: <?php echo $text ?>
      }
    <?php endif; ?>       
  </style>
<?php endif ?>  
  1. In your home.php template:
//define $project first
<?php $project = page('projects')->children()->visible()->shuffle()->first(); ?>
//then pass the project variable to the header snippet
<?php snippet('header', array('project' => $project)) ?>
  1. In your project.php template
//pass the page variable to the header snippet
<?php snippet('header', array('project' => $page)) ?>
1 Like