https://github.com/chrisphu/obsidian-animated-callouts

An Obsidian CSS snippet for animating callouts
https://github.com/chrisphu/obsidian-animated-callouts

css markdown obsidian obsidian-md snippet snippets stylesheet stylesheets

Last synced: about 1 month ago
JSON representation

An Obsidian CSS snippet for animating callouts

• Host: GitHub
• URL: https://github.com/chrisphu/obsidian-animated-callouts
• Owner: chrisphu
• License: mit
• Created: 2024-05-02T01:40:54.000Z (7 months ago)
• Default Branch: main
• Last Pushed: 2024-09-11T22:25:34.000Z (2 months ago)
• Last Synced: 2024-09-30T09:40:51.019Z (about 2 months ago)
• Topics: css, markdown, obsidian, obsidian-md, snippet, snippets, stylesheet, stylesheets
• Language: CSS
• Homepage:
• Size: 119 KB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Obsidian animated callouts

[animated-callouts.css](animated-callouts.css) is an [Obsidian CSS snippet](https://help.obsidian.md/Extending+Obsidian/CSS+snippets) that modifies the appearance of [callouts](https://help.obsidian.md/Editing+and+formatting/Callouts).

![Animated Obsidian callouts example .gif](animated-obsidian-callouts-example.gif)

## How to use

> [!note]

> The following instructions written for Windows desktop. They are likely similar on other platforms but have not been tested.

To use the CSS snippet:

1. In Obsidian, open **Settings**.

2. Under **Appearance → CSS snippets**, click **Open snippets folder** (folder icon).

3. In the opened snippets folder, copy in [animated-callouts.css](animated-callouts.css).

4. In Obsidian, under **Appearance → CSS snippets**, click **Reload snippets** (refresh icon).

5. To the right of the new **animated-callouts** entry, click the toggle to enable the snippet.