Monospace font when hiding variable::key in Callout quotes from Zotero

[ibagur]

What I’m trying to do

I have a template which I use to extract Zotero highlights and colour and classify them according to the original highlighting colour I used in Zotero PDF reader. The result in my Obsidian template looks like this (I am using the Things theme):

As you notice, apart from the Quote title detailing the type of highlight, this type also appears in the quote block itself. This is because I am using ‘inline value::key’ pairs, so later on I can create specific filters with the Dataview plugin (for example, list all the ‘important’ quotes I have highlighted in all the papers I am using for my specific research).

For aesthetic reasons, I would like to hide the variable name in the quote, so I saw in the documentation that one can put the inline variable between parenthesis as follows. So in my template I have done this:

({{calloutHeader(annotation.color)}}:: {{annotation.annotatedText}})

And then in the view output I get this:

As you can see, I am almost there…however I always get the font-family as Monospace, instead of the default sans-serif I had before.

Things I have tried

I have tried to edit the CSS snippets, but no matter what I do, I cannot get it right (I am terrible with CSS). The only solution I found is to go to General Settings > Appearance > Monospace font, and from there completely override the Monospace font and choose Arial for example. But this affect to all block content, including blocks that for whatever the reason I would like to appear in Monospace (for example a specific block of code inside a note, etc.).

Any solution using a more surgical CSS, you CSS magicians? Many thanks!

[Pch]

Maybe this could help you ?
(At least, give you a start ?)

Obsidian Dataview Key style in Minimal theme

I found myself wanting to change the formatting of inline fields, to make them blend more naturally with the rest of the text. I ended up with the following CSS snippet: body .dataview .inline-field-standalone-value, body .dataview .inline-field-value { background: var(--background-primary); font-size: var(--font-adaptive-normal); color: var(--text-normal); } This results in the following output: [image]

How to install CSS snippets

To install a CSS snippet, to those who don’t know, yo…

[ibagur]

Oh! many many thanks. I adapted the snippet as follows:

body .dataview .inline-field-standalone-value, 
body .dataview .inline-field-value {
  background: var(--callout-color);
  font-family: Arial, Helvetica, sans-serif;
}

and voilà:

thanks again!

[Pch]

My pleasure !

I’m very glad to know it helped you !