Making custom native callouts look as nice as built-in ones?

[claremacrae]

I've just updated from Version: v1.5.2 to Version: v2.1.0, and seen lots of lovely changes. Thank you!

I really like the way that callouts are now displayed:

Is there anything I can do to make my own custom callouts look more similarly (fill colour and border colour, for example):

Here is my CSS snippet for that custom callout:

.callout[data-callout="tasks-due-now"] {
  --callout-color: 255, 23, 68;
  --callout-icon: lucide-square;
}

[damiankorcz]

Hi @claremacrae, I've been trying to solve this issue and the current hurdle I've encountered due to how I style the callouts. I've been discussing this with @javalent on Discord. As discussed there to make them look like the default ones I'd need the colour value separated into individual values from a HSL. Then I could adapt the selected colour to all the shades needed. I'll likely submit this as a feature request for Admonitions.

[claremacrae]

Hi @damiankorcz Thank you very much for the swift reply (and great theme) I'm a bit puzzled by the reply, as I'm not using Admonitions. I've using the native callouts. Does that help?

[damiankorcz]

Hi @claremacrae, Looks like I have 2 problems to think of a solution to now 😅 My bad for misreading your requests. If you want to style your custom callouts to fit with the theme you can do the following:

.callout[data-callout="tasks-due-now"] {
	.callout-title {
		color: var(--color-red-text);
		background-color: var(--color-red-base);
		border-color: var(--color-red-tint);
	}

	.callout-icon {
		color: var(--color-red-text);
	}

	.callout-content {
		background-color: hsl(var(--color-red-base-h) var(--color-red-base-s) var(--color-red-base-l) / 10%);
		border-color: var(--color-red-tint);
	}
}

You can replace the red part of the variables to any of the 10 preset colours (red, orange, yellow, green, mint, aqua, blue, purple, pink or grey) and it will make it look the same as the default callouts. You could even mix and match if you want 🤔 I use multiple shades of a colour for callouts hence the more involved setup. You can of course use your own colours but you'd have to figure out all the shades to make it look the part.

Since this issue and the one I mentioned are related, If you don't mind, keep this issue open for me to close later once I explore any other options to make this process a little simpler and hopefully add relevant options to Style Settings. Thank you!

[claremacrae]

Hi @damiankorcz Thank you very much - and sorry for doubling your problems here!

I'll mug up on the colour variables, and see how to use them.

For info and scale, these are all my custom callouts....

.callout[data-callout="tasks-due-now"] {
  --callout-color: 255, 23, 68;
  --callout-icon: lucide-square;
}

.callout[data-callout="tasks-due-in-future"] {
  --callout-color: 245, 169, 184;
  --callout-icon: lucide-clipboard-list;
}

.callout[data-callout="tasks-scheduled-now"] {
  --callout-color: 255, 145, 0;
  --callout-icon: lucide-square;
}

.callout[data-callout="tasks-scheduled-in-future"] {
  --callout-color: 242, 197, 138;
  --callout-icon: lucide-clipboard-list;
}

.callout[data-callout="tasks-in-this-file"] {
  --callout-color: 0, 176, 255;
  --callout-icon: lucide-square;
}

.callout[data-callout="tasks"] {
  --callout-color: 0, 176, 255;
  --callout-icon: lucide-square;
}

.callout[data-callout="tasks-done"] {
  --callout-color: 0, 200, 83;
  --callout-icon: feather-check-square;
}

.callout[data-callout="tasks-undated"] {
  --callout-color: 158, 158, 158;
  --callout-icon: lucide-square;
}

.callout[data-callout="tasks-deferred"] {
  --callout-color: 0, 0, 0;
  --callout-icon: lucide-square;
}

.callout[data-callout="files-created-today"] {
  --callout-color: 100, 221, 23;
  --callout-icon: lucide-file-plus;
}

.callout[data-callout="files-modified-today"] {
  --callout-color: 158, 158, 158;
  --callout-icon: lucide-file;
}

[damiankorcz]

Hi @claremacrae, Yeah that's a few to change 😵‍💫 Since this issue is related to Obsidian and Admonitions mimics the colour setup as well, I'll make a Feature Request on the forum to see if I can resolve it that way.

[AiurArtanis]

hi @damiankorcz it seems #52 is not exactly the same as this issue, perhaps i didn't make myself clear😂. i love the callouts blocks with rounded rectangle border(nice design in Prism v2.0.0), and it would be better if it supports the style setting in Admonition, including the main color its deep color of border:

[damiankorcz]

Hi @AiurArtanis, No you were clear I know what you mean. I just mistook this issue for the same thing. Technically you could also use the snippet above to style your custom callouts made with Admonitions. I'm still looking into resolving this properly.

[claremacrae]

Hi @damiankorcz I've tried to apply the snippet you gave in https://github.com/damiankorcz/Prism-Theme/issues/54#issuecomment-1120447132 - and I get error messages reported by PyCharm for the CSS snippet, and it turns blue in Obsidian, which I believe is the default style for callouts...

Specifically, I change this:

.callout[data-callout="tasks-due-now"] {
  --callout-color: 255, 23, 68;
  --callout-icon: lucide-square;
}

To this:

.callout[data-callout="tasks-due-now"] {
	.callout-title {
		color: var(--color-red-text);
		background-color: var(--color-red-base);
		border-color: var(--color-red-tint);
	}

	.callout-icon {
		color: var(--color-red-text);
	}

	.callout-content {
		background-color: hsl(var(--color-red-base-h) var(--color-red-base-s) var(--color-red-base-l) / 10%);
		border-color: var(--color-red-tint);
	}
}

The errors from PyCharm are:

Where line 1 is the 1st line of your snippet, and line 16 is its last line.

My snippet was cribbed directly from: https://help.obsidian.md/How+to/Use+callouts#Customizations

Can you see what I'm doing wrong please? Many thanks.

[claremacrae]

By inspecting the Prism theme, I was able to get this working:

.callout[data-callout="tasks-due-now"] .callout-title {
  color: var(--color-red-text);
  background-color: var(--color-red-base);
  border-color: var(--color-red-tint);
}

.callout[data-callout="tasks-due-now"] .callout-icon {
  color: var(--color-red-text);
}

.callout[data-callout="tasks-due-now"] .callout-content {
  background-color: hsl(var(--color-red-base-h) var(--color-red-base-s) var(--color-red-base-l) / 10%);
  border-color: var(--color-red-tint);
}

[damiankorcz]

Hi @claremacrae, I'm so sorry! That is my bad. I'm so used to working with Sass (SCSS) that I just copied it directly without changing it to plain CSS for you. It should have been how you did it. 🙈

[damiankorcz]

Hi @claremacrae, I've struggled to come up with a good solution to this problem while keeping the design I use apart from using the CSS Snippet. So now there is a guide for customising Callouts in Prism in the Repo Wiki to describe the process we went over here earlier. https://github.com/damiankorcz/Prism-Theme/wiki/Callout-Customisation

There are a few small changes so you might need to refer to it if you encounter issues with your previous snippet.

[claremacrae]

Thank you. I have read this several times and am struggling to understand how to use it with custom call-outs. It says it is possible, but I cannot see how to actually do it.

[damiankorcz]

Hi @claremacrae, Here is an example of how to style a custom callout called nature. Add the following into a CSS Snippet and enable it.

.callout[data-callout="nature"] > .callout-title {
    color: var(--color-green-text);
    background-color: var(--color-green-base);
    border-color: var(--color-green-tint);
}

.callout[data-callout="nature"] > .callout-title .callout-icon .svg-icon {
    color: var(--color-green-text);
}

.callout[data-callout="nature"] > .callout-content {
    background-color: hsla(var(--color-green-base-hsl) / var(--callout-background-alpha));
    border-color: var(--color-green-tint);
}

.callout[data-callout="nature"] {
    --callout-icon: trees;
}

Use the following markdown to initiate the custom callout:

> [!nature]-
> This is a custom callout

This should be the result:

[claremacrae]

Super, thank you very much indeed.

Yes, in Prism theme it works great:

When I switch to the Default theme, it looks like this:

I switch often between Prism and Default. I guess I will need to just decide which one to stick with. (It's not your problem! ❤️ )

[damiankorcz]

Hi @claremacrae, I'm looking into making this better and so far, I've come up with the following that I might add in a future update.

I would add a .prism-theme class using Style Settings, making it a unique identifier for the Prism theme and help with prefixing Prism specific customisations with it.

So the snippet above would look something like this:

.prism-theme .callout[data-callout="nature"] > .callout-title {
    color: var(--color-orange-text);
    background-color: var(--color-green-base);
    border-color: var(--color-green-tint);
}

.prism-theme .callout[data-callout="nature"] > .callout-title .callout-icon .svg-icon {
    color: var(--color-orange-text);
}

.prism-theme .callout[data-callout="nature"] > .callout-content {
    background-color: hsla(var(--color-green-base-hsl) / var(--callout-background-alpha));
    border-color: var(--color-green-tint);
}

.callout[data-callout="nature"] {
    --callout-icon: trees;
    --callout-color: 0, 255, 0;
}

Note the addition of the --callout-color in .callout[data-callout="nature"]. That's the default colour variable used for callouts and also the intended way to set colours for custom callouts. Comma separated RGB values is the format used.

Doing things this way would let you have whatever styling you want for Prism and still have a compatible fallback for the Default theme and any other theme that sticks to the original way of customising callouts.

The only issue with this I've noticed is that Style Settings doesn't unload the classes that a theme using it adds, so switching to the Default theme for example wouldn't render things as intended until you reload Obsidian. I assume this is a Style Settings bug.

I think this would be a decent compromise and help with compatibility for those that hop between themes🤔

[claremacrae]

Hi @damiankorcz, Oh wow, that is really nice and clear. Thank you for suggesting it.

I think if I knew to restart Obsidian if going from Prism to Default, I could definitely live with that!

[damiankorcz]

Hi @claremacrae, I've pushed this change in 3.0.3. You should now be able to use the snippet from the last message.

Thank you for pointing this out! I'm trying to keep Prism as unintrusive to user vaults/files, so I value resolving small compatibility issues like this especially when they are caused by my custom changes.

[claremacrae]

Hi @damiankorcz

Fabulous. This is a big step forward... I am hoping the next question will by my last one!

---

This is what the sample code above looks like in a Default, Light theme:

The low contrast means I find the title hard to read:

that is, with:

.callout[data-callout="nature"] {
    --callout-icon: trees;
    --callout-color: 0, 255, 0;
}

---

I really like what it looks like with this colour, in default theme:

.callout[data-callout="nature"] {
    --callout-icon: trees;
    --callout-color: 0, 200, 83;
}

~~So how might I adjust your 14-lines of CSS that were based on --color-green-text and related variables so that it is based on a particular RGB value please?~~ See next comment..

For context and scale, my original custom callouts are shown above.

[claremacrae]

Actually, apologies, the above is not quite the right motivation - as it is easy for me to stick with the RGB values I was using previously ...

The question is the same though...

What I really mean is 'where I have custom callout styles that work well with Obsidian default theme, but are not based on colours which have matching variables based on colour names, how can I set up a custom Prism callout style, based on an arbitrary RGB value?

[claremacrae]

Hi @damiankorcz

It turns out that I had previously reworked all my custom callouts to use named colours to get them working with the previous version of Prism...

So I will just stick with that, and update it for the new code in the wiki...

Thanks for the amazing support!

[damiankorcz]

Hi @claremacrae, No worries! Glad you figured it out. You can of course change each of those variables to independent colour values (RGB, HSL, HEX, etc,) of your choosing if the preset values aren't enough.

There is a lot of intricacies when it comes to things like this which I try to abstract away as much as possible with simple variables, especially when working with different colour schemes (Light and Dark), contrast between all colours and their shades, etc. all while trying to make it all work with pure CSS 😅