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.
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.