Colors from annotations in Zotero Integration template not working

First, search the help docs and this forum. Maybe your question has been answered! The debugging steps can help, too. Still stuck? Delete this line and proceed.

What I’m trying to do

I’ve started using Obsidian yesterday for the sole purpose of grouping my Zotero annotations together. My quotes and associated comments are currently grouped together by highlighted colors. I would like those same colors to appear on Obsidian.

I was given a CSS snippet and a template by a colleague, who mentioned the color snippet was not working anymore with Zotero 7. So I investigated the CSS and the Template, with my 0 familiarity with the code, but searching the internet (and this precise website) wildly. I tweaked a few other aspects of the code, but the color issue always remains.

Things I have tried

I tried modifiying parts of my CSS code, and adding pretty much all the potential colorcode Zotero’s colors could be (as I saw somebody suggested, in a similar query on a similar subject).

Per example, here’s a sample of my CSS snippet, for the color purple. I have all the other colors, but thats basically all my CSS snippet contains.

}
/* Purple */
.research-note .callout[data-callout-metadata="#a28ae5"],
.research-note .callout[data-callout-metadata="#b19ae8"],
.research-note .callout[data-callout-metadata="#9377d9"] {
    --callout-color: 157, 131, 242;
}

I noticed not all codes were using the exact same keywords, and therefore… I tried doing different CSS files with all the possibilities I’d seen, trying them one at the time.

I tried changing the line to :
.callout[data-callout-metadata=“#a28ae5”]
and
.callout[data-callout=“#a28ae5”]
and
.research-note .callout[data-callout=“#a28ae5”]

With the same unsuccessful results.

Here is part of my template:

{% macro calloutHeader(color) -%}
{%- if color == "#a28ae5" -%}
Definition/Concept  - Purple
{%- endif -%}
{%- if color == "#2ea8e5" -%}
Discussions - Blue 
{%- endif -%}
{%- if color == "#5fb236" -%}
Methodology - Green
{%- endif -%}
{%- if color == "#ff6666" -%}
Disagree - Red
{%- endif -%}
{%- if color == "#ffd400" -%}
Resultats - Yellow
{%- endif -%}
{%- if color == "#e56eee" -%}
Questions - Magenta
{%- endif -%}
{%- if color == "#aaaaaa" -%}
To read - Grey
{%- endif -%}
{%- if color == "#f19837" -%}
Particularities - Orange
{%- endif -%}
{%- endmacro -%}

{% persist "annotations" %}
{% set annotations = annotations | filterby("date", "dateafter", lastImportDate) -%}
{% if annotations.length > 0 %}

## Annotations
#### Imported on {{importDate | format("YYYY-MM-DD h:mm a")}}

{% for color, groupedAnnotations in annotations | groupby("color") -%}

> [!{{color}}] {{calloutHeader(color)}}

{%- for annotation in groupedAnnotations -%}
{%- if annotation.imageRelativePath %}
> ![[{{annotation.imageRelativePath}}]]
{%- endif %}
{%- if annotation.annotatedText %}
> >> [!quote] {{annotation.annotatedText}} [(p. {{annotation.pageLabel}})](zotero://open-pdf/library/items/{{annotation.attachment.itemKey}}?page={{annotation.pageLabel}}&annotation={{annotation.id}})
{%- endif %}
{%- if annotation.comment %}
>
> {{annotation.comment}}
{%- endif %}

The code does a good job at grouping the Highlighted annotations from Zotero + associated comments and tags, but the color is always the same.
Ex)

I tried to do a test call out, unsuccessful as well:

> [!#ffd400] Test Callout 
> This is a yellow callout.

image

Here is a few other screenshots of how I’m set up.

I feel like I’m maybe missing something basic?
Thank you in advance to anyone who can give me a hand. If more info on the code and setup is needed, just let me know.

I know Mgmeyers’ zotero plugin needs some dependencies to work correctly, as stated in the download page of his plugin,
I cite:
“Requires the Better BibTeX for Zotero plugin.”

Maybe try to reinstall and check under Zotero’s tools>plugins if said plugin is on.

There are a bunch of zotero plugins for obsidian:
You could try alternatives too.

If you’re not fluent in coding, tweaking older code might be insufficient and quite “a waste of time”.
One thing you could try,
--callout-color: 157, 131, 242 !important;

Unfortunately, reinstalling Better BibTex did not fix the issue, nor did adding ‘!important’ to the callout-color. Thank you for trying to help.

A precision about my tweaking of the code: my tweaking was to add the Zotero tags in each boxes, which (surprisingly) worked. None of the color-tweaking worked- but neither did they in original code, hence why I’m seeking out help for this specific part.

Got it.
You forgot to add a yaml header and to insert research-note as value in cssclasses.
Therefore: cssclasses: research-note

Your original CSS snippet is fine.

My problem with Zotero: on Linux, zotero integration seems not to work:

  • I installed “PDF utility”
  • database is Zotero
  • citation format (is secondary, just some styling)
  • import format:
    Output path and image path are both filled in like so:
    (Import in vault root)
    Import/{{citekey}}.md (output)
    Import/{{citekey}}/ (pics)
  • Template file is your template (thanks)

This configuration looks correct, imo.

Next, I type the name of my import format profile set in zotero integration using Obsidians CMD palette
A small dialog pops up, then a chooser dialog, but when I pick my book with annotations, zotero integration doesn’t import anything, no note as specified in Import/{{citekey}}.md

Would be nice to find the right configuration… :thinking: maybe a problem with flatpak?