Snippets

# Obsidian CSS Snippets Collection

A curated collection of CSS snippets from the Obsidian community to enhance your note-taking experience in [Obsidian.md](https://obsidian.md).

<img src="https://i.imgur.com/cPa054W.png" alt="snippets collection">

[![License](https://img.shields.io/badge/license-MIT-blue.svg)](LICENSE)
[![Obsidian](https://img.shields.io/badge/Obsidian/1.14.16+-purple.svg)](https://obsidian.md)

## Table of Contents

1. [Introduction](#-introduction)
2. [What's Included](#-whats-included)
3. [Installation](#-installation)
4. [How to Use](#-how-to-use)
5. [Collection Overview](#-collection-overview)
6. [Compatibility](#-compatibility)
7. [Contributing](#-contributing)
8. [Credits](#-credits)
9. [License](#-license)

## Introduction

Welcome to this comprehensive collection of CSS snippets for Obsidian! This repository aggregates high-quality CSS customizations from talented members of the Obsidian community. Whether you want to customize your UI, improve readability, add visual flair, or streamline your workflow, you'll find snippets to help you create your perfect Obsidian environment.

All snippets are organized by source and category, making it easy to find exactly what you need.

## What's Included

This repository contains **10 curated collections** from various contributors:

- **UI Customization**: Compact sidebars, tab headers, file explorers, and more
- **Editor Enhancements**: Typography improvements, table tweaks, frontmatter styling
- **Visual Effects**: Translucent elements, gradients, custom separators, and themed colors
- **Note Styling**: Card-like embeds, banner images, daily note styles
- **Theme Integrations**: Minimal theme snippets, CardBoard, Calendar views
- **Functional Improvements**: Auto-hide elements, compact properties, sticky headings
- **Special Elements**: Custom checkboxes, custom frames, Bible verses formatting
- **Icons & Emojis**: Mono emoji support, custom folder icons

## Installation

### Prerequisites

- [Obsidian](https://obsidian.md) installed on your device
- Basic understanding of how CSS snippets work in Obsidian

### Steps

1. **Clone this repository:**
```bash
git clone https://github.com/Moisesunu/snippets.git
```

2. **Locate your Obsidian vault's CSS snippets folder:**
- Open Obsidian
- Go to `Settings` → `Appearance` → `CSS snippets`
- Click the folder icon to open your snippets folder

3. **Copy desired snippets:**
- Browse through the collection folders
- copy the `.css` files you want to use into your snippets folder

4. **Enable the snippets:**
- Return to Obsidian settings
- Refresh the snippets list if needed
- Toogle on the snippets you want to use

## How to Use

1. **Browse the Collections**: Explore the numbered folders (1-10) to find snippets that interest you
2. **Read the Documentation**: Each collection folder may contain README fiels with details about the snippets
3. **Test Individuality**: Enable one snippet at a time to see ita effect
4. **Combine Carefully**: Some snippets may conflict with each other; test combonations
5. **Customize**: Feel free to edit snippets to match your preferences
6. **Backup**: Keep a backup of your configuration before major changes

### Quick Tips

- Start with one or two snippets to avoid overwhelming your theme
- Check snippet descriptions to understand thir purpose
- Some snippets work best with specific themes (like Minimal)
- Use the developer console (`Ctrl+Shift+I`) to debug CSS issues
- Disable snippets that cause conflicts or unexpected behavior

## Colllection Overview

### [Obsidian-CSS-Snippets-rushikesh](1-Obsidian-CSS-Snippets-rushikesh/)
A comprehensive collection with detailed documentation and various UI customizations.

### [obsidian-minimal-theme-css-snippets](2-obsidian-minimal-theme-css-snippets/)
Extensive collection of snippets designed for the Minimal theme, including:
- **Editor**: Compact sidebar notes, custom tags, frontmatter tweaks, table improvements
- **UI**: Compact file explorers, tabs, custom separators, folder icons
- **User**: Daily note styles, themed colors, banner images

### 3️⃣ [obsidian-snippets](3-obsidian-snippets/)
General-purpose snippets for various customizations.

### 4️⃣ [obsidian-css-snippets](4-obsidian-css-snippets/)
Additional community-contributed snippets.

### 5️⃣ [awesome-obsidian](5-awesome-obsidian/)
Curated awesome resources and snippets.

### 6️⃣ [Color-darker-obsidian-snippets](6-Color-darker-obsidian-snippets/)
Dark theme color scheme customizations.

### 7️⃣ [obsidian-css-snippets](7-obsidian-css-snippets/)
More community snippets for diverse needs.

### 8️⃣ [Obsidian-Snippets](8-Obsidian-Snippets/)
Additional customization options.

### 9️⃣ [Snippets](9-Snippets/)
Miscellaneous useful snippets.

### 🔟 [CSS-Obsidian-Snippets-Joshua](10-CSS-Obsidian-Snippets-Joshua/)
Specialized snippets including:
- Bible verses embed and preview styling
- Card-like embeds
- Pretty translucent note embeds
- Embedding styles (Lithou v2)

## ⚙️ Compatibility

- **Tested with**: Obsidian v1.14.16+
- **Platform**: Windows, macOS, Linux
- **Mobile**: Most snippets work on mobile, but some desktop-specific features may not apply

> ⚠️ **Note**: Obsidian updates may affect snippet functionality. If a snippet stops working after an update, check for updated versions or community discussions.

## Contributing

Contributions are welcome! If you have snippets to share:

1. Fork this repository
2. Create a new branch for your collection
3. Add your snippets with clear documentation
4. Submit a pull request with a description of your additions

Please ensure your contributions:
- Are well-documented
- Don't conflict with existing snippets (or note any conflicts)
- Include proper attribution to original authors
- Follow CSS best practices

## Credits

This collection aggregates work from many talented members of the Obsidian community. Each folder contains contributions from different creators. Specific credits can be found in individual collection folders/

Special thanks to:
- The Obsidian development team
- All contributors to the original snippet repositories
- The vibrant Obsidian community for continous innovation

## License

This collection is distributed under the MIT License. See [LICENSE](LICENSE) file for details.

Individual snippets may have their own licenses - please check the respective collection folder for specific licensing information

---

**Enjoy customizing your Obsidian experience!**

If you find this collection helpful, consider
- Starring this repository
- Sharing it with other Obsidian users
- Reporting issues or broken snippets
- Suggesting new snippets to include

For questions or discussions, please open a issue or check the [Obsidian Forum](https://forum.obsidian.md/).