Adding a custom class to a link in the Writer field

Kirby 4 Question❓
,
1

I’d like to be able to define a custom css class to certain links in a basic Writer-field.

The use case is that most links are basic underlined links, but the client would like to be able to define the link as a “button” style. I basically want to add a .button class to the a-tag in those cases.

How would one go about it? Using Kirby 4 by the way.

I’ve looked a bit at custom nodes and marks, but haven’t really grasped it, and feel unsure if I’m overcomplicating something that maybe could be solved cleaner.

It could also be a great option just to “extend” the link-tag to have another toggle like the “open in new window” that would be “show as a button”. But again, unsure how to get there.

Any tips on how to go about this would be appreciated :slight_smile:

1 Like
2

I’m looking for the same thing right now. This is my use-case:

Screenshot 2024-01-11 at 16.33.38
Screenshot 2024-01-11 at 16.33.381077×341 17.7 KB

I remember that there used to be a plugin or kirby link-popup with a class input field. I created this feature-request for it: https://kirby.nolt.io/604

In the meantime I’ll probably work with a button block:

button:
  icon: url
  wysiwyg: true
  preview: fields
  fields:
    link:
      type: link
    label:
      type: text
1 Like
3

I actually ended up conditionally styling links within the last paragraph in a writer-section as buttons, because the use case was exactly like your screenshot – finishing off a section with a single button.

Feels kind of weird, but worked in this particular use case for a very simple site.

Fwiw:

.image_and_text p:last-of-type a {
  padding: .5em 1em;
  background: var(--primary-color);
  display: inline-block;
  color: var(--dark-color);
  text-decoration: none;
}

Can be seen here: https://www.vestgeomatikk.no

1 Like
4

Is there still no way of doing this? I think adding classes to links could be a pretty common need.
Can anyone point me to the right direction?