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: about 2 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 (over 3 years ago)
• Default Branch: main
• Last Pushed: 2023-04-01T17:43:50.000Z (over 1 year ago)
• Last Synced: 2024-06-22T20:19:55.678Z (3 months ago)
• Topics: obsidian-md
• Language: CSS
• Homepage:
• Size: 189 KB
• Stars: 28
• 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.

![screenshot](./obsidian_spoiler.png)

#### `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.

![screenshot](./obsidian_todo.png)

#### `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.

![screenshot](./obsidian_search.png)

### UI / Content theming

The following CSS snippets are intended to modify the basic obsidian theme. See screenshot below.

![screenshot](./obsidian_looks.png)

#### `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