Style select field query text in blueprint

hey everyone :partying_face: :sparkles:
i was wondering if there’s an easy way to add custom styling to the query >> text output in a select field (last line in code example). i would love if the page.descr could be deemphasised in some kind of way (font-color, italic, …). already tried adding html span tags or markup but both don’t seem to work.

# product categories
    label: Product Categories
    type: multiselect
    options: query
    width: 2/3
        fetch: site.find('categories/products').children.listed
        value: '{{ page.autoid }}'
        text: '{{ page.title }} {{ page.descr }}'

i’d be grateful for any help.
thank you so much!

I did the same for a multiselect field and it works for me like this:

text: '{{ page.title }} <span style="color:var(--color-text-light);">({{ page.descr }})</span>'

Which kirby version are You using?

thank you for your help @Cris!
i maybe should have mentioned that my multiselect is part of a structure field. please have a look at my screenshots. when selecting, it does apply the color, but when viewing the structure field, it shows the html as text. any idea why?

oh, and i am using kirby 3.6.2!


Ah ok.
Then You would have to write a little panel plugin, that renders the html in the preview.
There’s already a great plugin by Sylvain Julé which already covers the multiselect preview for the structure field but it also doesn’t render the text as html.

This is how I would make the preview work:

panel.plugin('getkirby/pluginkit', {
  components: {
    'k-multiselect-field-preview': {
        props: {
          value: String,
        template: `
          <div class="k-multiselect-field-preview">
  		      <div class="multiselect-entries">
  			      <span v-for="entry in value" class="multiselect-entry" v-html="entry.text"></span>

You can download the plugin here, add it to Your site/plugins and play around with it.

PS: I’m by far no expert and always happy about suggestions!

1 Like

@Cris wooow wow wow thank you so so much!
the kirby community is just amazing!
works like a charm!

:tada: :balloon: :sparkles:

1 Like