Template in conflict with Callout Manager regarding custom color choice

Hi everyone,

I have a question about my template and how it interacts with the plugin called Callout Manager.

My GOAL for the template…

I want to integrate annotations from Zotero (plugin: Zotero Integration) as callouts and want all the annotations to be in callouts with a standard color except for those annotations that belong to the color category “Magenta” (it’s a category on the side of zotero). In these cases I want the callouts to take the color of the category they’re in (#e56eee).

This is the part of the template in question:

{% set citation = citationFormatter() -%}
{% for annotation in annotations -%}
{% if annotation.type == “note” %}
{{annotation.comment}}
{% endif -%}

{% if annotation.type == “highlight” %}

[!cite{% if annotation.colorCategory == “Magenta” %}|{{annotation.color}}{% endif -%}]- {{citekey}}, {{annotation.pageLabel}}:black_small_square:‎ ‎ {% if annotation.comment %}{{annotation.comment}}{%- endif %}

{%- if annotation.annotatedText -%}„{{annotation.annotatedText}}“({{annotation.pageLabel}}){% endif %}{% if annotation.imageRelativePath -%}![[{{annotation.imageRelativePath}}]]{%- endif %}
{%- endif %}
{% endfor %}

The line that’s of relevance here - at least that’s what I assume - is this one:

[!cite{% if annotation.colorCategory == “Magenta” %}|{{annotation.color}}{% endif -%}]

The problem I’m facing…

Whenever I prompt a transfer from Zotero to Obsidian, the output seems to be a success, for the callout-lines that are being generated, differ accordingly.

A standard highlight reads as follows:

[!cite]- Livingston2018, 107 :black_small_square: very standard argument

A special (magenta) highlight reads as follows:

[!cite|#e56eee]- Livingston2018, 108 :black_small_square: very special argument

But the color Obsidian chooses for the callout to be displayed in, is the same for both cases. This leads me to believe that the issue lies in a conflict between what the plugin Callout Manager does to Obsidian and what I try to do with Obsidian by giving the callout this “pipe-information” (…|#e56eee). Maybe it has something to do with prioritization, but I don’t really know.

A solution to the problem…

Instead of telling Obsidian to put out a - what I call - “pipe-information” about the color code of the annotation, I could just tell Obsidian to print out a different type of callout and have this type be adequately customized via Callout Manager.

[!cite{% if annotation.colorCategory == “Magenta” %}-alt{% endif -%}]-

In this case shown above I have a callout-type called “cite-alt” (customized with the help of Callout Manager) and if the annotation I want to integrate into Obsidian is of the colorCategory “Magenta”, my template just prints out:

[!cite-alt]- Livingston2018, 108 :black_small_square: very special argument

and this would then display the callout in the color I want these annotations to be shown.

My question to you all…

That is a solution I am actually satisfied with, but still: I want to know what the source of my problem actually is and what I would need to do in order to fix the issue under the conditions that (1) Callout Manager as a plugin stays enabled and that (2) the color change should happen through additional information behind the pipe symbol (|).

I hope you could follow this depiction of my problem and am very thankful for your answers.
Have a great day! :sparkles: :waving_hand:

Adding text after the pipe—AKA callout metadata—doesn’t affect the color by default. I don’t use Callout Manager, but I’m unaware of it adding that feature.

Have you already set custom instructions to make the callout magenta when the metadata contains #e56eee? Perhaps in Callout Manager (if it has a metadata feature), a CSS snippet, a theme, or another plugin.

If yes, then what CSS or method did you use? People could help you troubleshoot it.

If no, then put this CSS in a snippet (how to):

.callout[data-callout-metadata*="#e56eee"] {
	--callout-color: 229, 110, 238;
}

… and put your previous callout in a note:

> [!cite|#e56eee]- *Livingston2018, 108* ▪️ very special argument

… to see how text after the pipe works with callout colors.

Starter info for customizing callouts: Callouts - Obsidian Help