A somewhat more pleasing frontmatter + dataview inlines duo

Problem
Sometimes simple frontmatter won’t suffice, because you need links that are recognized by Obsidian and parseable by a machine.

Dataview comes to the rescue - but… how to style this “second” frontmatter? It would be nice to keep it:

  • somewhat pleasing
  • looking like a parseable code
  • to have that “frontmatter vibe”

How to use
Create a callout and name it summary. The callout title is unnecessary, because it won’t show up.

> [!summary]
> **Team**:: [[dataview team]]
> **Related**:: [[dataviewjs helper]], [[dataview changelog]]

Result

CSS

.callout[data-callout="summary"] {
	--callout-color: 33, 32, 43;
	--callout-icon: alarm-clock;
}
.callout[data-callout="summary"] .callout-title {
	display: none;
}
.callout[data-callout="summary"] .callout-content::before {
	content: "dataview inlines";
	font
	display: inline-block;
	float: right;
	color: var(--text-muted);
	font-size: var(--font-smaller);
	padding: 5px 0;
}
5 Likes

Nice, thank you for this. I tweaked it a bit so that the contents are monospace font.

.callout[data-callout="summary"] .callout-content {
    font-family: monospace;
}
2 Likes