Need help with creating a custom callout style

[peeragetalkers]

I use a wonderful snippet for sleek callouts extracted from the AnuPpuccin theme.

How could I achieve the same look as the bottom callout but for content in all non-collapsible callouts? (I.e. hide title and show the icon off to the side.) I’d really like to be able to apply this look to multiple paragraphs (and you can’t put multiple paragraphs in a callout title). I’d like for foldable callouts to retain their style (the upper callout in the screenshot).

I was able to target non-collapsible callouts with .callout:not(.is-collapsible) but ran into issues with weird padding and uneven background color

CSS snippet

/*
Adapted from: https://discord.com/channels/686053708261228577/702656734631821413/1040275500297375856
Original author: Adonis, Anubis
*/

.callout:not(.is-collapsible) {
  padding: 0px;
}

.callout:not(.is-collapsible) .callout-content {
  padding: 0 var(--callout-title-padding) var(--callout-title-padding) var(--callout-title-padding);
}

.callout:not(.is-collapsible) .callout-title {
  background-color: rgba(var(--callout-color), 0.1);
  padding: var(--callout-title-padding);
  cursor: pointer;
}

.callout:not(.is-collapsible) .callout-title .callout-title-inner {
  font-weight: normal;
}

.callout: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);
}

.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 solid rgba(var(--callout-color), 0.4);
}

.callout-fold {
  padding-right: 0px;
}

.callout-title-inner {
  flex-grow: var(--anp-callout-fold-position, unset);
}

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

.callout.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;
  padding: 0;
}

.callout.is-collapsible .callout-fold {
  padding-right: 0px;
}

.callout.is-collapsible .callout-title-inner {
  flex-grow: var(--anp-callout-fold-position, unset);
}

.callout.is-collapsible.is-collapsed {
  padding: 0;
}

.callout.is-collapsible.is-collapsed .callout-title {
  background-color: rgba(var(--callout-color), 0.1);
  padding: var(--callout-title-padding);
  cursor: pointer;
}

.callout.is-collapsible.is-collapsed .callout-content {
  display: none;
}

.callout.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;
}

.callout.is-collapsible:not(.is-collapsed) .callout-content:not(:empty) {
  padding: var(--callout-title-padding) var(--callout-title-padding) var(--callout-title-padding) calc(var(--callout-title-padding) * 1.5);
  border-top: 1px solid rgba(var(--callout-color), 0.4);
}

.callout .list-collapse-indicator {
  margin-left: -35px;
  padding-right: 3px;
}

/* Normal text appearance for non-foldable callouts without content */
.callout:not(.is-collapsible) .callout-title:not(:has(+ .callout-content)) .callout-title-inner {
  color: var(--text-normal);
}

I found a snippet that achieves a similar look but was unable to reconcile it with the sleek callouts snippet:

Callouts without Title

Hi everyone, I’ve been looking for a while for ways to hide the title in some callouts, as I find them distracting and unnecessary for example for quotes. I’ve seen this workaround which works well if you just want to hide the title occasionally, but I really wanted a solution that just renders without the title out of the box. So I finally got this custom CSS going, which not only hides the title, but also moves the icon to the left of the content for clean callouts: [image] .callout[data-…

Any help appreciated!

---

Also asked on Discord and GitHub.

[dmantisk]

I don’t know how to target only the foldable version, but I know that you can use callaout metadata to ‘modify’ callouts.

.callout[data-callout-metadata*="fold"] {
	.callout-title-inner {
    display: none;
	}
}

The above snippet is used like this;

> [!NOTE|fold]
> asdasdas

So unless some else knows how to do what you want you can use a metadata for selective callaouts. (Or just create 2 different version of callouts)

[peeragetalkers]

Received good advice on Discord:

find all instances in the left snippet where it has the selector .callout and change those to .callout.is-collapsible

and if you want to be really explicit, you also would take all instances in the right snippet of .callout and change them to .callout:not(.is-collapsible)

But wasn’t successful in reconciling the two snippets. Ran into issues with inconsistent appearance between collapsible and non-collapsible callouts, with the latter having weird padding and white background still in some places… Don’t really know CSS to troubleshoot

[yen_le]

Hope this help.

So I have this callout kinda similar to yours. To keep the consistency, I have the following CSS, you can test to see if it match your expectation.

Change div.callout[data-callout-metadata*="#hl"] to whatever selection you want.

div.callout[data-callout-metadata*="#hl"] {
    > .callout-title {
        --callout-title-padding: 0.6rem 0 0.3rem 0;
    }
}

div.callout[data-callout-metadata*="#hl"].is-collapsed,
div.callout[data-callout-metadata*="#hl"]:not(:has(.callout-content)) {
    > .callout-title {
        padding-bottom: 0.55rem;
    }
}