This collection of CSS snippets is designed to enhance the functionality and appearance of Obsidian MD. These snippets are intended to be used with the Shade Sanctuary theme for optimal results. It is highly recommended to use these snippets in conjunction with the Style Settings Plugin, or you'll miss out on all the features that the snippets have to offer.

Snippets Overview

Background Animations

Adds animated backgrounds with types wave, stripes, and checkerboard.

Colored Sidebar Items

Customizes colors for sidebar folders and files. Originally by CyanVoxel, but signifiantly improved and customizable. To apply a specific color to a folder you need to add a numeric prefix such as 00, 01, 02, etc. at the front of the folder names.

Gradient Callouts and Headers

Create dynamic homepages and dashboards using gradient callouts and headers. Each gradient callout is part of a unified color palette system that pairs perfectly with matching gradient headers.

Notes:

• Format gradient callouts as [!gradient_x_y], where x (1–5) selects the gradient palette and y (1–17) defines the shade intensity.
• Use [!multi-column] to organize gradient callouts into flexible grid layouts.
• Many other forms of customization available through Style Settings.

Example: Gradient Multi-Column Layout

> [!multi-column]
>
> > [!gradient_2_3]  Cellular Biology
> >
> > [![[biologyicon.svg]]](Biology.md)
> >
> > Exploring the structure and function of cells, the basic units of life.
>
> > [!gradient_2_6] Psychology
> >
> > [![[psychologyicon.svg]]](Psychology.md)
> >
> > Studying mental processes in an introductory context.
>
> > [!gradient_2_9] Molecular Neuroscience
> >
> > [![[neuroscienceicon.svg]]](Neuroscience.md)
> >
> > Studying the biochemical basis of the nervous system.
>
> > [!gradient_2_12] Neurobiology
> >
> > [![[neurobiologyicon.svg]]](Neurobiology.md)
> >
> > Understanding the structure and function of the nervous system.

Hoverable Dropdown

Creates a dropdown menu that appears when hovering over a specified element.

Example: Basic Dropdown

> [!navmenu|gradient_1_14]
> - Tab 1
>     - Subtab 1.1
>     - Subtab 1.2
>     - Subtab 1.3
> - Tab 2
>     - Subtab 2.1
>     - Subtab 2.2
> 	    - Subtab 2.2.1

Mathematics Callouts

Provides callouts for mathematical theorems, definitions, and problems with seven distinct styles.

> [!definition] **Definition** (Joint Probability Density Function)
> Two random variables $X$ and $Y$ are **jointly continuous** if there exists a nonnegative function $f_{XY}: \mathbb{R}^{2} \to \mathbb{R}$, such that, for any set $A \in \mathbb{R}^{2}$, we have
> $$
> P((X,Y) \in A) = \iint_{A}f_{XY}(x, y) \ dx \ dy
> $$
> The function $f_{XY}(x, y)$ is called the **joint probability density function** (PDF) of $X$ and $Y$