obsidian callouts

Author: breezy-codes

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

@@ -247,16 +247,7 @@
     "\n",
     "![Nested callouts in Obsidian](../../img/blogs/obsidian-callouts/fig5.png)\n",
     "\n",
-    "Each level keeps its own style, icon, and background overlay, making complex structures more readable.\n",
-    "\n",
-    "## Final Tips\n",
-    "\n",
-    "* Define custom callout names that suit your workflow, like `note`, `figure`, `equation`, `bug`, or `reminder`.\n",
-    "* Use `:root` variables to keep your colors consistent across different callouts and future-proof your CSS.\n",
-    "* Match your callouts to your Obsidian theme for a more cohesive visual experience.\n",
-    "* Use icons from [Lucide](https://lucide.dev/) to make each callout instantly recognizable.\n",
-    "* Experiment with different background opacities to find the right balance for readability.\n",
-    "* Consider using foldable callouts to keep your notes tidy and focused.\n"
+    "Each level keeps its own style, icon, and background overlay, making complex structures more readable."
    ]
   },
   {
@@ -268,18 +259,10 @@
     "\n",
     "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",
     "\n",
-    "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."
-   ]
-  },
-  {
-   "cell_type": "markdown",
-   "id": "303605ec",
-   "metadata": {
-    "tags": [
-     "hide-input"
-    ]
-   },
-   "source": [
+    "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.\n",
+    "\n",
+    "```{admonition} Custom Callouts CSS\n",
+    ":class: note, dropdown\n",
     "```css\n",
     ":root {\n",
     "    /* Dracula base palette*/\n",
@@ -433,27 +416,23 @@
     "    --callout-icon: lucide-help-circle;\n",
     "    background-color: rgba(var(--drac-yellow-rgb), 0.2);\n",
     "}\n",
-    "```"
+    "```\n",
+    "```\n"
    ]
   },
   {
    "cell_type": "markdown",
    "id": "3950a611",
    "metadata": {},
    "source": [
-    "## Useful Links\n",
-    "\n",
-    "* [📘 Obsidian Callouts Documentation](https://help.obsidian.md/Editing+and+formatting/Callouts)\n",
-    "* [🎨 Lucide Icon Library](https://lucide.dev/)\n",
-    "\n",
-    "---\n",
-    "\n",
     "## Final Tips\n",
     "\n",
-    "* You can define as many custom callouts as you like, one for each purpose.\n",
-    "* Keep your styles readable by using soft background `rgba` values or stick to the consistent colours of your theme.\n",
-    "* Consider matching your callouts to your Obsidian theme for a cohesive look.\n",
-    "* You can also use custom icons from the [Lucide Icon Library](https://lucide.dev/) to make your callouts more visually appealing.\n"
+    "* Define custom callout names that suit your workflow, like `note`, `figure`, `equation`, `bug`, or `reminder`.\n",
+    "* Use `:root` variables to keep your colors consistent across different callouts and future-proof your CSS.\n",
+    "* Match your callouts to your Obsidian theme for a more cohesive visual experience.\n",
+    "* Use icons from [Lucide](https://lucide.dev/) to make each callout instantly recognizable.\n",
+    "* Experiment with different background opacities to find the right balance for readability.\n",
+    "* Consider using foldable callouts to keep your notes tidy and focused."
    ]
   }
  ],