Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/tomzorz/obsidian-toolkit
Plugins, templates, css snippets and more for obsidian.md
https://github.com/tomzorz/obsidian-toolkit
obsidian-md
Last synced: 3 months ago
JSON representation
Plugins, templates, css snippets and more for obsidian.md
- Host: GitHub
- URL: https://github.com/tomzorz/obsidian-toolkit
- Owner: tomzorz
- License: mit
- Created: 2021-04-11T04:55:49.000Z (almost 4 years ago)
- Default Branch: main
- Last Pushed: 2023-04-01T17:43:50.000Z (almost 2 years ago)
- Last Synced: 2024-08-03T22:18:36.116Z (7 months ago)
- Topics: obsidian-md
- Language: CSS
- Homepage:
- Size: 189 KB
- Stars: 29
- Watchers: 4
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- jimsghstars - tomzorz/obsidian-toolkit - Plugins, templates, css snippets and more for obsidian.md (CSS)
README
# obsidian-toolkit
Plugins, templates, css snippets and more for obsidian.md## CSS Snippets
### Reusable snippets
#### `checkboxes-into-spoilers.css`
Add `snippets/checkboxes-into-spoilers.css` to your `/.obsidian/snippets/` folder.
Adding `cssclass: checkboxes-into-spoilers` into your yaml frontmatter changes the preview mode markdown checkboxes in that note into spoiler tags a'la Discord's `||spoiler||`. Spoilers have to be separated by a different block inbetween. See screenshot below.

#### `language-todo.css`
Changes code blocks with the language `todo` into bright yellow todo blocks that match my personal settings for them in ReSharper. See screenshot below.

#### `animated-search-highlight.css`
Changes search result highlight backgrounds into an animated one, a'la iOS's slide to unlock effect (except on the background and not on the text). See screenshot below.

### UI / Content theming
The following CSS snippets are intended to modify the basic obsidian theme. See screenshot below.

#### `ui-custom.css`
Modifies the Obsidian UI in the following ways:
- makes the UI fonts lighter, increasing readability and contrast
- adds yellow-ish accents instead of the blue ones
- shortens the flashing animation
- changes the note header to match an H1 block
- changes the note tree header
- adds icons to the tree (with an extra sample on how to add custom icons for custom paths)#### `fonts.css`
Modifies the Obsidian markdown preview in the following ways:
- changes the headers to Futura BT Medium (assuming it's available on your PC)
- increases header sizes across the board
- changes code block highlighting to match the Visual Studio default dark theme
- changes the inline code blocks to a light blue color
- changes the highlights to a bright black-on-yellow style