Obsidian - Custom CSS Installation
Based on Josh Plunkett's video on YouTube. If you like this content, support the original creators by watching, liking and subscribing to their content.
Use theme GitHub repositories to extract modular CSS snippets so specific features can be reused without switching the whole theme.
Briefing
Custom CSS lets Obsidian users borrow specific visual and formatting features from one theme (like its theme) without switching their entire vault to that theme. The core workflow is straightforward: copy the theme’s individual CSS “snippets” from its GitHub repository, place them into the vault’s Snippets folder, then enable the snippet in Obsidian’s Appearance settings. Once enabled, the snippet’s CSS rules drive features such as callout styling, image alignment, and other layout behaviors—meaning the functionality can be turned on independently of the theme’s overall look.
The walkthrough starts with two vault examples to show what “theme functionality” looks like in practice. A default callout box appears with the standard styling from Obsidian’s current theme, while a separate cyberpunk red vault demonstrates more advanced callouts: purple borders, glow effects, and additional visual treatments. Scrolling further reveals that multiple styling systems can coexist—right-hand info boxes and other its-theme-inspired elements—illustrating that CSS rules can be layered and customized.
To demonstrate the transfer of functionality, the guide installs a different theme (Prism) and shows that callouts and tabs immediately change to match that theme’s styling. The next step is the key: keep Prism’s overall appearance, but selectively add its-theme features. This is done by going to Settings → Themes → Manage, then opening the its theme’s GitHub repository. The readme files in the repository act like documentation, pointing to which CSS classes or snippet files correspond to specific features.
The tutorial then drills into Obsidian’s file structure on Windows. Inside the vault’s hidden “.obsidian” folder, there should be a “Snippets” directory. If it’s missing, it can be created. CSS files belong in that Snippets folder. From the GitHub repository, the user copies the raw contents of the desired CSS file (the guide notes GitHub can be awkward about downloading single files), pastes it into a text editor, and saves it into the vault’s Snippets folder—often using the same filename as the source to keep things organized.
After saving, Obsidian needs a reload so the new snippet appears in Appearance. The guide turns on an “image adjustments” snippet (saved as something like image adjustments.css), then tests it by inserting an image and using pipe syntax (e.g., “|right”) to reposition it. Turning the snippet off breaks that behavior, confirming that the CSS file—not the theme—controls the functionality.
A second live example uses the Minimal theme’s GitHub repository. Instead of copying a whole theme, the guide searches for a helper class (like a circular crop utility), copies the relevant CSS, and installs it into a different theme. Once enabled, images can be cropped into circles, showing how helper classes and targeted CSS rules can be transplanted across themes.
The takeaway is practical: treat theme GitHub repos as libraries of modular CSS. Place the chosen CSS files into the vault’s Snippets folder, enable them in Appearance, and the desired formatting features become available—without committing to the theme’s full styling package.
Cornell Notes
Selective CSS snippets let Obsidian users reuse specific theme features—callout styles, image alignment, and helper utilities—without adopting the entire theme. The process is to find the theme’s GitHub repository, read the documentation to identify the relevant CSS snippet files, copy the raw CSS contents, and save them into the vault’s hidden “.obsidian/Snippets” folder. After reloading, the snippet appears under Appearance and can be toggled on or off. Turning a snippet off removes the functionality, proving the behavior comes from the CSS rules rather than the theme itself. Targeted helper classes (like circular image cropping) can also be transplanted from one theme into another.
How can someone get its-theme-style callouts or image alignment while using a different theme like Prism?
Where do CSS snippet files go inside an Obsidian vault, and what if the folder isn’t visible?
Why does turning off a CSS snippet break image positioning like “|right”?
How does the tutorial handle copying a single CSS file from GitHub?
What’s the purpose of reading a theme repository’s readme files?
How can helper utilities from one theme be used in another theme?
Review Questions
- What steps are required to add a single theme feature to a vault using CSS snippets (from GitHub to Appearance toggle)?
- How does the Snippets folder location under “.obsidian” affect whether Obsidian recognizes a CSS file?
- What evidence in the workflow shows that CSS snippets—not the active theme—control features like image alignment?
Key Points
- 1
Use theme GitHub repositories to extract modular CSS snippets so specific features can be reused without switching the whole theme.
- 2
Save copied CSS files into the vault’s hidden “.obsidian/Snippets” folder and reload Obsidian so the snippet appears in Appearance.
- 3
Enable or disable snippets in Appearance to confirm which behaviors are controlled by CSS rules (e.g., image positioning via “|right”).
- 4
Read each theme repository’s readme files to identify which snippet files correspond to features like callouts, checkboxes, or image alignment.
- 5
When GitHub download options are inconvenient, copy “raw contents” and paste into a text editor before saving the file into the Snippets folder.
- 6
Helper utilities (such as circular image cropping) can be transplanted from one theme into another by copying only the relevant CSS snippet.