Stand alone custom callout snippet that replicate the sleek callout of AnuPpuccin theme

Things I have tried

I tried to search for a snippet in google and discord but i can’t find results. I also tried to copy from the source code but i cant make it work, It’s too complicated for me

What I’m trying to do

I am looking for a stand alone custom callout css snippet that i can adjust the colors, padings and margins and it should look like the sleek callout of AnuPpucin theme. Because i like the looks of it especialy the paddings and margins. But it would be nice if i can adjust them.

I don’t know how to code css if someone can write for me i would really appreciate it

1 Like
body .callout[data-callout-metadata*=revert] {
  padding: 0px;
}
body .callout[data-callout-metadata*=revert] > .callout-content {
  padding: 0 var(--callout-title-padding) var(--callout-title-padding) var(--callout-title-padding);
}
body .callout[data-callout-metadata*=revert] > .callout-title {
  background-color: transparent !important;
  padding: var(--callout-title-padding);
  cursor: pointer;
}
body .callout[data-callout-metadata*=revert] > .callout-title .callout-title-inner {
  font-weight: normal;
}
body .callout:not([data-callout-metadata*=revert]):not([data-callout=blank-container], [data-callout=multi-column]):not(.is-collapsible) {
  border-color: rgba(var(--callout-color), 0.4);
  border-width: 1px;
  border-radius: var(--callout-radius);
  background-color: rgba(var(--ctp-mantle), 0.4);
}
body .callout:not([data-callout-metadata*=revert]):not([data-callout=blank-container], [data-callout=multi-column]) > .callout-content {
  padding: var(--callout-title-padding) var(--callout-title-padding) var(--callout-title-padding) calc(var(--callout-title-padding)*1.5);
  border-top: 1px dashed rgba(var(--callout-color), 0.4);
}
body .callout:not([data-callout-metadata*=revert]):not([data-callout=blank-container], [data-callout=multi-column]) > .callout-title .callout-fold {
  padding-right: 0px;
}
body .callout:not([data-callout-metadata*=revert]):not([data-callout=blank-container], [data-callout=multi-column]).is-collapsible {
  border-color: rgba(var(--callout-color), 0.4);
  border-width: 1px;
  border-radius: var(--callout-radius);
  background-color: rgba(var(--ctp-mantle), 0.4);
  --bold-weight: bolder;
}
body .callout:not([data-callout-metadata*=revert]):not([data-callout=blank-container], [data-callout=multi-column]).is-collapsible * > .callout-title > .callout-fold {
  padding-right: 0px;
}
body .callout:not([data-callout-metadata*=revert]):not([data-callout=blank-container], [data-callout=multi-column]).is-collapsible * > .callout-title > .callout-title-inner {
  flex-grow: var(--anp-callout-fold-position, unset);
}
body .callout:not([data-callout-metadata*=revert]):not([data-callout=blank-container], [data-callout=multi-column]).is-collapsible.is-collapsed {
  padding: 0;
}
body .callout:not([data-callout-metadata*=revert]):not([data-callout=blank-container], [data-callout=multi-column]).is-collapsible.is-collapsed > .callout-title {
  background-color: rgba(var(--callout-color), 0.1);
  padding: var(--callout-title-padding);
  cursor: pointer;
}
body .callout:not([data-callout-metadata*=revert]):not([data-callout=blank-container], [data-callout=multi-column]).is-collapsible:not(.is-collapsed) {
  padding: 0px 0px var(--callout-title-padding) 0px;
}
body .callout:not([data-callout-metadata*=revert]):not([data-callout=blank-container], [data-callout=multi-column]).is-collapsible:not(.is-collapsed) > .callout-title {
  background-color: rgba(var(--callout-color), 0.1);
  padding: var(--callout-title-padding);
  border-color: rgba(var(--callout-color), 0.4);
  cursor: pointer;
}
body .callout:not([data-callout-metadata*=revert]):not([data-callout=blank-container], [data-callout=multi-column]).is-collapsible:not(.is-collapsed) > .callout-content {
  padding: var(--callout-title-padding) var(--callout-title-padding) 0 calc(var(--callout-title-padding)*1.5);
  border-top: 1px dashed rgba(var(--callout-color), 0.4);
}
body .callout:not([data-callout-metadata*=revert]):not([data-callout=blank-container], [data-callout=multi-column]):not(.is-collapsible) {
  padding: 0px;
}
body .callout:not([data-callout-metadata*=revert]):not([data-callout=blank-container], [data-callout=multi-column]):not(.is-collapsible) > .callout-title {
  background-color: rgba(var(--callout-color), 0.1);
  padding: var(--callout-title-padding);
  border-color: rgba(var(--callout-color), 0.4);
}
body .callout:not([data-callout-metadata*=revert]):not([data-callout=blank-container], [data-callout=multi-column]) .list-collapse-indicator {
  margin-left: -35px;
  padding-right: 3px;
}

.callout-content > p:first-child, .callout-content > ul:first-child, .callout-content > ol:first-child {
  margin-top: 0px;
}
.callout-content > p:last-child, .callout-content > ul:last-child, .callout-content > ol:last-child {
  margin-bottom: 0px;
}

.callout-title-inner {
  flex-grow: 1;
}

body {
  --callout-title-padding: var(--size-4-2);
}

Here you go.
I plan to rework this in the future since it’s filled with tons of useless CSS and having a fresh start would be nicer.

2 Likes

You seem to be relying on callouts named related to “revert”, and have stuff here related to “blank-container” and “multi-column” stuff, so I think an example or two of how you see this used would be in place, @AnubisNekhet .

This is what i was looking for, thank you so much for your help. You mentioned that you are going to rework this snippet, I’d love to hear what’s new!

May i also ask if where i can insert this css --callout-icon: none; to remove the icon?

revert essentially reverts the changes of the callout style to leave it as a default callout in case you are using snippets that work off of the default unstyled callout. As for blank-container and multi-column, those are fixes for the MCL snippet my callout style changes a few parameters which the snippet does not cover.

Hello, there seems to be a gap between the background color and padding when nesting callouts using both the theme and the provided code snippet. I have attempted to disable all other snippets when using the theme, but the issue still persists. This issue is occurring in Obsidian for Android.

Here is an example of what is in my notes:

>[!tbox]+ Nested
>>[!tbox]+ Nested
>>>[!tbox]+ Nested
>>>>[!tbox]+ Nested

Anyone please?

This is certainly odd. Does this issue still persist on the latest version of the theme on the Github Repo?

Yes my obisidian app and AnuPpuccin theme are updated.

It works fine when there is no installed plugins both with content in the last callout and without.

But when there are to many plugins the issue persist. But when there is a content in the last nest like this

>[!note]+ Nested
>>[!note]+ Nested
>>>[!note]+ Nested
>>>>[!note]+ Nested
>>>> Test

It works fine.
The issue only happens when there is no content in the last callout when there are too many plugins.

This only happens when there is + in the last callout like this >[!note]+ Nested not when i remove it.

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.