Modifying hover color

Hey Kirby Gang,

today something i can’t wrap my head around. I have a page where all projects are listed nicely along with a title and a cover image. Each projects background & text color is different and can be modified in the backend using the colour field plugin. so far so nice. Now i also want the links to have a hover color that is working well with the text color & background color.
Text and background colour can be modified in the HTML using inline styles. easy. but what can I do about the :hover? aaarrgh

You can use style tagsin the head

<head>
<style>

a:hover {
  color: <?= $page->hovercolor()->html() ?>
}
</style>
</head>

Yep, but the links repeat. Meaning they appear multiple times.

<div class="project" style="background-color: #999">
  <img src="image1.jpg">
<h1><a class="the-caption" href="#" style="color: #333">Hello!</a></h1>
</div>

<div class="project" style="background-color: #000">
  <img src="image2.jpg">
<h1><a class="the-caption" href="#" style="color: #ff0000">Hello again!</a></h1>
</div>

if i define them in the

  <head> 

they will be the same in all project containers. I wan’t to modify them for each project individually…

you could do something like this:

I guess the projects are pages?
What I normally do is give them either a unique id or class:

<head>

<style>
  <?php foreach($projects as $project): ?>
   .project.<?= $project->slug(); ?> a:hover { 
     color: <?= $project->hovercolor()->html(); 
   }
  <?php endforeach; ?>
</style>

</head>

<body>

<?php foreach($projects as $project): ?>
  <div class="project <?= $project->slug(); ?>">
    <a href="<?= $project->url() ?>">...</a>
  </div>
<?php endforeach; ?>

</body>

Or you could fetch all styles into an array in your controller and output that in the <head>.

1 Like

I already guessed it will end up complicated. I really have to dig into what @rasteiner said, no clue what’s going on there, yet.

@texnixe :slight_smile: errr let’s say ONE can, because I cannot. hehe

But I don’t really see why @rasteiner’s solution has to live outside the head element. You might as well output it there.

Collecting everything into an array is not more then looping through all projects and adding each item to an array.

1 Like

@texnixe is right. I was confused by an old project where I didn’t have such nice deterministic identifiers for projects. I edited the above post.

ahhh, i almost get what’s the matter there. Thank you!