Obsidian-Snippets

This repository contains various CSS snippets written for Obsidian.

Snippets included here have been gathered and curated by Doctorfree and include freely redistributable snippets from:

Some of these snippets were initially collected by Klaas and further curated by Erica.

Usage
Included snippets
Support

Usage

The Obsidian CSS snippets in this repository are embedded as code blocks in markdown for ease of viewing. To create a CSS snippet use the Copy button in the upper right hand corner of the CSS code block when viewing the markdown in Obsidian. This will copy the CSS snippet to the clipboard. Paste the contents of the clipboard into a file, typically named the same as the markdown but with a .css filename extension rather than .md. Alternatively, copy the markdown file to a new file with .css extension rather than .md and delete all lines up to and including the line beginning with ```css and all lines after and including the line beginning with ```.

To use an Obsidian CSS snippet in an Obsidian vault, copy the snippet to the folder /path/to/vault/.obsidian/snippets/. For example, to use a snippet named MySnippet.css in an Obsidian vault located at /home/ronnie/Documents/MyVault/:

mkdir -p /home/ronnie/Documents/MyVault/.obsidian/snippets
cp /path/to/MySnippet.css /home/ronnie/Documents/MyVault/.obsidian/snippets`

After the snippet is placed in the Obsidian snippets folder, enable it in Obsidian by opening the MyVault vault in Obsidian and navigating to Settings -> Appearance -> CSS snippets. The MySnippet CSS snippet should show up there as a disabled snippet. Click the slider toggle to the right of the snippet to enable it. The MySnippet CSS styling will immediately be applied to your vault documents.

Obsidian

Any markdown viewer can be used to view this knowledge base. You can simply browse the repository and click on the individual markdown files at https://github.com/doctorfree/Obsidian-Snippets.git in any web browser. However, to view the inter-relationships between the many components, categories, and technologies documented here, we recommend using the Obsidian knowledge base engine.

The repository contains the Obsidian theme Doctorfree. To use this theme with Obsidian:

Clone or download the repository
- git clone https://github.com/doctorfree/Obsidian-Snippets.git
Create a new Obsidian vault from the folder created above
Select the Doctorfree Obsidian theme
- Go to Settings -> Appearance -> Themes in Obsidian
- Select Doctorfree from the drop down menu of available themes

[Note:] Obsidian is free for personal non-commercial use but must be purchased in revenue generating operations (see the note on Obsidian license restrictions below).

Markdown_viewers

Recommended markdown viewers, available for all platforms and with many features:

Obsidian
nb

If Obsidian does not suit your needs, there are many free an open source markdown editors and viewers available for all platforms. Doctorfree uses the nb command line and local web note-taking, bookmarking, archiving, and knowledge base application. Obsidian and nb work well together to provide a rich markdown editing, viewing, and management system. See the Obsidian plus NB section below for details.

Several excellent resources exist that provide lists and reviews of popular markdown editors and viewers:

Obsidian is pretty cool though, so try it out.

Clone_and_view_locally

To explore this repository locally or to integrate it into a service, first clone the repository:

git clone https://github.com/doctorfree/Obsidian-Snippets.git

This will result in a local folder, Obsidian-Snippets, containing all of the markdown and supporting file assets. Import these into your markdown viewer. The import method varies from viewer to viewer. To import into Obsidian:

Open another vault (or create new vault if first time)
Open folder as vault (click "Open")
Navigate to the Obsidian-Snippets folder created by git clone ...
Click "Open" to create the new Obsidian vault

Included_snippets

The default theme full CSS:

Default theme

Written by Doctorfree:

Graph View Skin

Dmytro-Shulha

Included from Dmytro Shulha and elsewhere:


Center Tables	Dracula Skin	Text Box	Animation
Block quote inline	Block quote	Buttons - stylized	Check box
Clutter remove	Command palette	Country flag hashtag	Edge on left
Embeds	Export to PDF	File explorer - Obsidian	Folding arrows
Font	Footnotes	Graph nodes	Gutter line numbers
Headers	HTML	Hyphenation-Justification	Images
Lines - horizontal	Links	Lists - (un)ordered	Markers
Mermaid	Note title in pane	Outliner pane	Panes
Popover-Popup	Progress bar vault launch	Resizable Mermaid	Ribbons
Scroll bar	Search	Sentences	Settings
Sidebar	Sidenotes	Special effects	Status bar
Table	Tag pills	Title bar	Tooltip
URLs	Vim Static Caret	WYSIWYG	Yaml

Awesome_Obsidian

Included from Knut Magnus Aasrud:


Autofading ui	Better bullet points in edit mode	Bigger link popup preview	Bullet point relationship lines
Collapsing sidebar	Custom icons differing files and folders	Custom icons for frontmatter tags	Custom icons for specific folders
Enlarge image on hover	Hyphenation and justification	Image cards	Media grid
Nicer checkboxes	Outliner for the outline and file explorer	Smaller scrollbar	Stylish blockquotes
Subtler folding gutter arrows	Tag pills

ScottKillen

Included from Scott Killen:


Calendar emoji	Calendar starred	Calendar weekends	Custom checkboxes
Jesus words	Labeled nav	Minimal tweaks	Print
Tables	Tabular numbers	Typography

DustinKnopoff

Included from Dustin Knopoff:


Active file path	Adding css	Bigger popup preview	Birthdays
Block cursor	Builtin icons	Bullet relations	Changing fonts
Collapsible side notes	Collapsible sidebars	Custom hr	Dataview table as cards
Display tags aside	Enlarge image on hover	Fade controls	Folder file icons
Lined heading	List obsidian commands	Maintain line height footnotes	Naked embeds
Outliner tree	Pane controls hover	PDF export tweaks	People nearby
Read file	Responsive type	Retrieve frontmatter	Set embed height
Status bar border	Stylish quotes	Tag colors	Vim mode line focus

Support

Sponsor the Projects of Doctorfree

Snippets