Different text link colors :)

Kirby 3 Solved ✅
1

Hey all,

Maikel here (new with Kirby but loving it, I also bought a license to support this amazing project).
I didn’t code for quite a while but I’m glad I am wired back into it! :slight_smile:

So I have a question, I want to give some clickable links I’ve got on one page different colors.

I want to create one red link, one yellow link and another one blue.

So I added

(link: https://link.com text: cccllliicckkk this color: yellow) but it isn’t working (also not with #colorcode)

So… I was thinking to create/add this function by myself. I have searched for a bit and found KirbyTags but not sure if it’s the right direction. If anybody could give me some hints it would be amazing then I can create it.

I’m going to bed now, greetings from The Netherlands and I’m really happy I found this amazing CMS.

Hope I can contribute to this project and hope it will stay lightweight and awesome forever! :slight_smile:

2

The link text accepts a property class, you can then style the button depending on class name.

3

Thanks :slight_smile:

4

So should I add it over here?

/**
 * Link
 */
'link' => [
    'attr' => [
        'class',
        'lang',
        'rel',
        'role',
        'target',
        'title',
        'text',
    ],
    'html' => function ($tag) {
        if (empty($tag->lang) === false) {
            $tag->value = Url::to($tag->value, $tag->lang);
        }

        return Html::a($tag->value, $tag->text, [
            'rel'    => $tag->rel,
            'class'  => $tag->class,
            'role'   => $tag->role,
            'title'  => $tag->title,
            'target' => $tag->target,
        ]);
    }
],
5

You don’t have to create a custom tag, let alone modify the source code. Just add a class in your link tag:

(link: https://link.com text: click click class: yellow)

In your stylesheet

.yellow {
  color: yellow;
}
1 Like
6

Thanks Pixe, I feel like a total newbie.