Skip to content

Commit 80244d4

Browse files
breezy-codesbreezy-codes
committed
obsidian callouts
1 parent dc01b67 commit 80244d4

File tree

3 files changed

+272
-26
lines changed

3 files changed

+272
-26
lines changed

‎_toc.yml

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -39,5 +39,5 @@ parts:
3939
# - file: content/blog-posts/2024-04-03-picking-cybersecurity.md
4040
- file: content/blog-posts/2024-04-08-sucked-at-maths-in-school.md
4141
title: I sucked at maths in school
42-
- file: content/blog-posts/2025-06-17-making-callouts-obsidian.ipynb
42+
- file: content/blog-posts/2025-06-17-making-callouts-obsidian.md
4343
title: How to do Custom Obsidian Callouts

‎content/blog-posts/2025-06-17-making-callouts-obsidian.ipynb

Lines changed: 18 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -266,14 +266,8 @@
266266
"\n",
267267
"![Nested callouts in Obsidian](../../img/blogs/obsidian-callouts/fig5.png)\n",
268268
"\n",
269-
"Each level keeps its own style, icon, and background overlay, making complex structures more readable."
270-
]
271-
},
272-
{
273-
"cell_type": "markdown",
274-
"id": "91993899",
275-
"metadata": {},
276-
"source": [
269+
"Each level keeps its own style, icon, and background overlay, making complex structures more readable.\n",
270+
"\n",
277271
"## My Exact CSS File\n",
278272
"\n",
279273
"Below is the complete CSS file I use for my custom callouts in Obsidian. The colour variables are defined at the top using the Dracula theme palette, but you can easily swap them out to match your own preferred colour scheme.\n",
@@ -436,9 +430,24 @@
436430
" background-color: rgba(var(--drac-yellow-rgb), 0.2);\n",
437431
"}\n",
438432
"```\n",
439-
"```\n"
433+
"```\n",
434+
"\n",
435+
"## Final Tips\n",
436+
"\n",
437+
"* Define custom callout names that suit your workflow, like `note`, `figure`, `equation`, `bug`, or `reminder`.\n",
438+
"* Use `:root` variables to keep your colors consistent across different callouts and future-proof your CSS.\n",
439+
"* Match your callouts to your Obsidian theme for a more cohesive visual experience.\n",
440+
"* Use icons from [Lucide](https://lucide.dev/) to make each callout instantly recognizable.\n",
441+
"* Experiment with different background opacities to find the right balance for readability.\n",
442+
"* Consider using foldable callouts to keep your notes tidy and focused."
440443
]
441444
},
445+
{
446+
"cell_type": "markdown",
447+
"id": "91993899",
448+
"metadata": {},
449+
"source": []
450+
},
442451
{
443452
"cell_type": "markdown",
444453
"id": "3950a611",

‎content/blog-posts/2025-06-17-making-callouts-obsidian.md

Lines changed: 253 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -4,11 +4,33 @@ After spending some time experimenting with different ways to style my notes, I
44

55
Callouts are a powerful way to visually style notes in [Obsidian](https://obsidian.md), especially when organising research, study notes, to-do lists, or even documenting your projects. While Obsidian comes with built-in callout styles like `> [!note]`, you can easily create your own custom callouts with a bit of CSS.
66

7+
![alt text](../../img/blogs/obsidian-callouts/fig6.png)
8+
79
This post will walk you through how to make your own **custom callout blocks** in Obsidian.
810

11+
## Table of Contents
12+
13+
- [How to make Custom Callouts in Obsidian](#how-to-make-custom-callouts-in-obsidian)
14+
- [Table of Contents](#table-of-contents)
15+
- [Steps Overview](#steps-overview)
16+
- [Step 1: Enable Custom CSS Snippets](#step-1-enable-custom-css-snippets)
17+
- [Step 2: Define a Custom Callout Block in the css file](#step-2-define-a-custom-callout-block-in-the-css-file)
18+
- [Step 3: Customise Labels, Icons \& Colours](#step-3-customise-labels-icons--colours)
19+
- [Step 4: Using Theme Variables for Consistent Colours](#step-4-using-theme-variables-for-consistent-colours)
20+
- [Helpful Tips](#helpful-tips)
21+
- [Foldable Callouts](#foldable-callouts)
22+
- [Creating a Colour Overlay on a Dark Base](#creating-a-colour-overlay-on-a-dark-base)
23+
- [Nesting Callouts](#nesting-callouts)
24+
- [My Exact CSS File](#my-exact-css-file)
25+
- [Final Tips](#final-tips)
26+
927
---
1028

11-
## Step 1: Enable Custom CSS Snippets
29+
## Steps Overview
30+
31+
The following steps will guide you through creating custom callouts in Obsidian:
32+
33+
### Step 1: Enable Custom CSS Snippets
1234

1335
Before we begin, make sure you’ve enabled CSS snippets in Obsidian:
1436

@@ -20,7 +42,7 @@ Before we begin, make sure you’ve enabled CSS snippets in Obsidian:
2042

2143
---
2244

23-
## Step 2: Define a Custom Callout Block in the css file
45+
### Step 2: Define a Custom Callout Block in the css file
2446

2547
Here’s an example of a custom callout called `figure` with a pink theme and a pencil icon:
2648

@@ -48,7 +70,7 @@ And voilà, Obsidian will render it with your defined styles.
4870

4971
---
5072

51-
## Customise Labels, Icons & Colors
73+
### Step 3: Customise Labels, Icons & Colours
5274

5375
You can define any name for your callout, it can be `[!theorem]`, `[!tip]`, `[!poetry]`, or whatever suits your workflow. Each one can be styled uniquely by modifying:
5476

@@ -112,7 +134,63 @@ This will render as:
112134

113135
---
114136

115-
## Foldable Callouts
137+
### Step 4: Using Theme Variables for Consistent Colours
138+
139+
If you want to keep your callout colours consistent with your Obsidian theme, or you just want an easy way to update your colour scheme in one place, you can define custom colour variables using the `:root` selector at the top of your CSS file.
140+
141+
Here’s an example using a Dracula-inspired palette:
142+
143+
```css
144+
:root {
145+
/* Dracula base palette */
146+
--drac-bg: #282A37;
147+
--drac-pink-rgb: 255, 121, 198;
148+
--drac-cyan-rgb: 132, 222, 240;
149+
--drac-purple-rgb: 189, 147, 249;
150+
--drac-green-rgb: 80, 250, 123;
151+
--drac-yellow-rgb: 241, 250, 140;
152+
--drac-red-rgb: 255, 85, 85;
153+
}
154+
```
155+
156+
Then, reference these variables when creating your callouts:
157+
158+
```css
159+
/* === QUESTION === */
160+
.callout[data-callout="question"] {
161+
--callout-color: var(--drac-pink-rgb);
162+
--callout-icon: lucide-help-circle;
163+
background-color: rgba(var(--drac-pink-rgb), 0.2);
164+
}
165+
```
166+
167+
This approach keeps your CSS more readable and maintainable, and allows you to easily **change the colour scheme for all your callouts at once** by editing the `:root` variables.
168+
169+
For example, your `theorem` callout could use the purple variable:
170+
171+
```css
172+
/* === THEOREM === */
173+
.callout[data-callout="theorem"] {
174+
--callout-color: var(--drac-purple-rgb);
175+
--callout-icon: lucide-square-sigma;
176+
background-color: rgba(var(--drac-purple-rgb), 0.2);
177+
}
178+
```
179+
180+
And your `warning` set could use:
181+
182+
```css
183+
/* === WARNING === */
184+
.callout[data-callout="warning"] {
185+
--callout-color: var(--drac-yellow-rgb);
186+
--callout-icon: lucide-alert-triangle;
187+
background-color: rgba(var(--drac-yellow-rgb), 0.2);
188+
}
189+
```
190+
191+
## Helpful Tips
192+
193+
### Foldable Callouts
116194

117195
You can make callouts foldable by adding `+` or `-` after the label:
118196

@@ -133,7 +211,7 @@ This works on both built-in and custom callouts.
133211

134212
---
135213

136-
## Creating a Colour Overlay on a Dark Base
214+
### Creating a Colour Overlay on a Dark Base
137215

138216
If you're using a dark theme and want each callout to sit on a consistent dark base while still showing its colour clearly, you can use an **overlay effect** like this (add it into the same CSS file):
139217

@@ -169,7 +247,7 @@ This is especially helpful when **nesting** callouts (see below), as it prevents
169247

170248
---
171249

172-
## Nesting Callouts
250+
### Nesting Callouts
173251

174252
Yes, you **can nest callouts**, and they’ll render beautifully, especially if you use the background layering technique above.
175253

@@ -185,16 +263,175 @@ This will render as:
185263

186264
Each level keeps its own style, icon, and background overlay, making complex structures more readable.
187265

188-
## Useful Links
189-
190-
* [📘 Obsidian Callouts Documentation](https://help.obsidian.md/Editing+and+formatting/Callouts)
191-
* [🎨 Lucide Icon Library](https://lucide.dev/)
192-
193-
---
266+
## My Exact CSS File
267+
268+
Below is the complete CSS file I use for my custom callouts in Obsidian. The colour variables are defined at the top using the Dracula theme palette, but you can easily swap them out to match your own preferred colour scheme.
269+
270+
I use a variety of callouts to visually organise different types of content in my notes. For instance, `figure` and `equation` callouts highlight key diagrams and mathematical expressions, while `theorem` is used to frame formal results. I use `example` to walk through concepts, `todo` to track ongoing tasks, and `tip` or `important` to emphasise helpful insights. For summarising ideas, I use `abstract` and `summary`, and I reserve `bug`, `fail`, and `error` to flag issues or areas needing revision. Each callout is styled with a Dracula-inspired colour overlay to maintain visual consistency across my workspace.
271+
272+
```{admonition} Custom Callouts CSS
273+
:class: note, dropdown
274+
```css
275+
:root {
276+
/* Dracula base palette*/
277+
--drac-bg: #282A37;
278+
--drac-pink-rgb: 255, 121, 198;
279+
--drac-cyan-rgb: 132, 222, 240;
280+
--drac-purple-rgb: 189, 147, 249;
281+
--drac-green-rgb: 80, 250, 123;
282+
--drac-yellow-rgb: 241, 250, 140;
283+
--drac-red-rgb: 255, 85, 85;
284+
}
285+
286+
/* Base background for all callouts */
287+
.callout {
288+
background-color: var(--drac-bg) !important;
289+
position: relative;
290+
overflow: hidden;
291+
}
292+
293+
/* Overlay using callout color with opacity */
294+
.callout::before {
295+
content: "";
296+
position: absolute;
297+
inset: 0;
298+
background-color: rgb(var(--callout-color), 0.3);
299+
pointer-events: none;
300+
z-index: 0;
301+
border-radius: var(--radius-s);
302+
}
303+
304+
/* Ensure content stays above the overlay */
305+
.callout > * {
306+
position: relative;
307+
z-index: 1;
308+
}
309+
310+
/* === FIGURE === */
311+
.callout[data-callout="figure"] {
312+
--callout-color: var(--drac-pink-rgb);
313+
--callout-icon: lucide-pencil;
314+
background-color: rgba(var(--drac-pink-rgb), 0.2);
315+
}
316+
317+
/* === QUESTION === */
318+
.callout[data-callout="question"] {
319+
--callout-color: var(--drac-pink-rgb);
320+
--callout-icon: lucide-help-circle;
321+
background-color: rgba(var(--drac-pink-rgb), 0.2);
322+
}
323+
324+
/* === TODO === */
325+
.callout[data-callout="todo"] {
326+
--callout-color: var(--drac-cyan-rgb);
327+
--callout-icon: lucide-list-check;
328+
background-color: rgba(var(--drac-cyan-rgb), 0.2);
329+
}
330+
331+
/* === THEOREM === */
332+
.callout[data-callout="theorem"] {
333+
--callout-color: var(--drac-purple-rgb);
334+
--callout-icon: lucide-square-sigma;
335+
background-color: rgba(var(--drac-purple-rgb), 0.2);
336+
}
337+
338+
/* === EQUATION === */
339+
.callout[data-callout="equation"] {
340+
--callout-color: var(--drac-purple-rgb);
341+
--callout-icon: lucide-calculator;
342+
background-color: rgba(var(--drac-purple-rgb), 0.2);
343+
}
344+
345+
/* === EXAMPLE === */
346+
.callout[data-callout="example"] {
347+
--callout-color: var(--drac-cyan-rgb);
348+
--callout-icon: lucide-book-open;
349+
background-color: rgba(var(--drac-cyan-rgb), 0.2);
350+
}
351+
352+
/* === CITE & QUOTE === */
353+
.callout[data-callout="cite"],
354+
.callout[data-callout="quote"] {
355+
--callout-color: var(--drac-yellow-rgb);
356+
--callout-icon: lucide-quote;
357+
background-color: rgba(var(--drac-yellow-rgb), 0.2);
358+
}
359+
360+
/* === BUG === */
361+
.callout[data-callout="bug"] {
362+
--callout-color: var(--drac-red-rgb);
363+
--callout-icon: lucide-bug;
364+
background-color: rgba(var(--drac-red-rgb), 0.2);
365+
}
366+
367+
/* === DANGER & ERROR === */
368+
.callout[data-callout="danger"],
369+
.callout[data-callout="error"] {
370+
--callout-color: var(--drac-red-rgb);
371+
--callout-icon: lucide-zap;
372+
background-color: rgba(var(--drac-red-rgb), 0.2);
373+
}
374+
375+
/* === FAIL, FAILURE, MISSING === */
376+
.callout[data-callout="fail"],
377+
.callout[data-callout="failure"],
378+
.callout[data-callout="missing"] {
379+
--callout-color: var(--drac-red-rgb);
380+
--callout-icon: lucide-x;
381+
background-color: rgba(var(--drac-red-rgb), 0.2);
382+
}
383+
384+
/* === CHECK, DONE, SUCCESS === */
385+
.callout[data-callout="check"],
386+
.callout[data-callout="done"],
387+
.callout[data-callout="success"] {
388+
--callout-color: var(--drac-green-rgb);
389+
--callout-icon: lucide-check;
390+
background-color: rgba(var(--drac-green-rgb), 0.2);
391+
}
392+
393+
/* === ABSTRACT, SUMMARY, TLDR === */
394+
.callout[data-callout="abstract"],
395+
.callout[data-callout="summary"],
396+
.callout[data-callout="tldr"] {
397+
--callout-color: var(--drac-green-rgb);
398+
--callout-icon: lucide-file-text;
399+
background-color: rgba(var(--drac-green-rgb), 0.2);
400+
}
401+
402+
/* === HINT, IMPORTANT, TIP === */
403+
.callout[data-callout="hint"],
404+
.callout[data-callout="important"],
405+
.callout[data-callout="tip"] {
406+
--callout-color: var(--drac-green-rgb);
407+
--callout-icon: lucide-flame;
408+
background-color: rgba(var(--drac-green-rgb), 0.2);
409+
}
410+
411+
/* === ATTENTION, CAUTION, WARNING === */
412+
.callout[data-callout="attention"],
413+
.callout[data-callout="caution"],
414+
.callout[data-callout="warning"] {
415+
--callout-color: var(--drac-yellow-rgb);
416+
--callout-icon: lucide-alert-triangle;
417+
background-color: rgba(var(--drac-yellow-rgb), 0.2);
418+
}
419+
420+
/* === FAQ, HELP === */
421+
.callout[data-callout="faq"],
422+
.callout[data-callout="help"] {
423+
--callout-color: var(--drac-yellow-rgb);
424+
--callout-icon: lucide-help-circle;
425+
background-color: rgba(var(--drac-yellow-rgb), 0.2);
426+
}
427+
```
428+
```
194429

195430
## Final Tips
196431

197-
* You can define as many custom callouts as you like, one for each purpose.
198-
* Keep your styles readable by using soft background `rgba` values or stick to the consistent colours of your theme.
199-
* Consider matching your callouts to your Obsidian theme for a cohesive look.
200-
* You can also use custom icons from the [Lucide Icon Library](https://lucide.dev/) to make your callouts more visually appealing.
432+
* Define custom callout names that suit your workflow, like `note`, `figure`, `equation`, `bug`, or `reminder`.
433+
* Use `:root` variables to keep your colors consistent across different callouts and future-proof your CSS.
434+
* Match your callouts to your Obsidian theme for a more cohesive visual experience.
435+
* Use icons from [Lucide](https://lucide.dev/) to make each callout instantly recognizable.
436+
* Experiment with different background opacities to find the right balance for readability.
437+
* Consider using foldable callouts to keep your notes tidy and focused.

0 commit comments

Comments
 (0)