Call-out colors

[DutchPete]

I don't know if I should ask you, so if I should not please point me in the right direction.

In the screenshot I have a test Admonition showing the code and the Live Preview rendering, as well as a Call-Out.

This is what I have as Call-Out code:

How can I change the color of the header and text to be like in the Admonition? I have this snippet:

.callout[data-callout="my-callout-type"] {
    --callout-color: 0, 0, 105;
}

I suspect "my-callout-type" is wrong, so I tried to change it to "Alsatian-dog" but it does not work.

Also, what is the syntax to collapse? I have not been able to find it.

[valentine195]

Change my-callout-type to note and it should work.

Callouts can be made collapsible with a + or - after the brackets - > [!note]+

[DutchPete]

Thank you, collapse works now.

.callout[data-callout="note"] {
    --callout-color: rgb(0, 0, 105) !important;
}

still does not do the trick, even if I delete the quotation marks.

[valentine195]

--callout-color: rgb(0, 0, 105) !important;

This is incorrect, the color has to be defined as 0, 0, 105

[DutchPete]

It does not work in the theme I am using. I tried it in a default theme with no other snippets or plug-ins, and it works, i.e. it is rendered as the Admonition, so it is the theme I am using.

Nevertheless, the text color does not change, it remains black, even with !important.

[valentine195]

the text color does not change

Text color is changed with the color CSS property, it does not use the --callout-color custom property.

[DutchPete]

I am confused now. This snippet:

.callout[data-callout="note"] {
    --callout-color: 255, 0, 0 !important;
    color: rgb(255, 0, 0) !important;
}

does not change a thing in the call out.

[valentine195]

Works for me:

I recommend testing this in the help vault.

[DutchPete]

In the Help vault with that red/red snippet:

[valentine195]

Are you targeting like this?

.callout[data-callout="Alsatian dog"]

The data tag is lowercased and slugified. You have to target it like this:

.callout[data-callout="alsatian-dog"]

[DutchPete]

I was doing:

.callout[data-callout="note"] {
    --callout-color: 255, 0, 0 !important;
    color: rgb(255, 0, 0) !important;
}

but when I replace note with alsatian dog (between the quotation marks, of course) still nothing happens. This is in the Help vault.

[valentine195]

I'm sorry, they both work for me. Do you have the snippet enabled? If so, I'm really not able to help debug callout issues, they are wholly unrelated to the plugin. You might have more luck on the forum or on the discord.

[DutchPete]

Yes, the snippet is enabled. Many thanks for your help and time, Jeremy. I sincerely apologize for having bothered you with this, I did not mean to and hoped it could be resolved. The problem is clearly on my side. Thanks again.

[valentine195]

No worries, I hope you figure it out, it's certainly very weird.

[DutchPete]

Just to follow up: I checked in the dev tools (Elements) and found that this also works:

/ change color of title /

.callout-title-inner {
    color: var(--text-normal);
}

/ change color of text /

.callout-content {
    color: var(--text-normal);
}

Then, poking a bit more, I found that the code you provided, .callout[data-callout="note"] etc., does work. It works if the title of the callout itself is [!note]. If you then change the title to something, the background color will revert to default, i.e. blue.

So, there is nothing wrong with the theme I am using, nor with anything else. It was just my misunderstanding of what you were telling me. Perhaps it is useful to adjust the instructions somewhat.

Last but not least, will Admonitions eventually cease to exist and Callouts will be the only way? If not, what would be a reason for a person to use Admonitions instead of Callouts or vice versa?