Css Snippets

My obsidian css snippets files

CSSAny theme
# Obsidian CSS Snippets
## 📌 Description
This repository contains a collection of custom CSS snippets designed to enhance the appearance and functionality of your Obsidian workspace. Below is a description of each available file:

### 📁 Snippet Files
- **`banner.css`**: Styles for custom banners, including images, icons, descriptions, and integration with plugins like Canvas and Breadcrumbs.
- **`tooltip.css`**: Styles for tooltips with customizable colors and directional arrows.
- **`theme.css`**: Custom theme with styles for titles, links, quotes, code blocks, and active lines, using modern gradients.
- **`subfolder_colored.css`**: Applies custom colors to folders and subfolders in the navigation panel, with hover animations.
- **`progressbar.css`**: Animated progress bars for task list checkboxes, dynamically adjusted.
- **`empty_tab.css`**: Styles for empty tabs with animations and responsive SVG logos.
- **`checkbox_priority.css`**: Styles for checkboxes with priority indicators, using colored borders based on associated tags.
- **`callout.css`**: Custom callout styles with enlarged icons and a clean, elegant look.
- **`calendar.css`**: Calendar styles with distinctive colors for each day of the week.

---

## 🚀 Getting Started
### ✅ Prerequisites
- `Obsidian` installed on your system.
- Access to Obsidian's CSS snippets settings.

### 📥 Installation and run
1. Clone or download this repository.
2. Place the desired CSS files in your Obsidian CSS snippets folder:
   - Windows: `[VAULT_NAME]\.obsidian\snippets\`
   - Linux: `[VAULT_NAME]/.obsidian/snippets/`
3. Enable the snippets via Obsidian settings:
   - Go to Settings → Appearance → CSS snippets
   - Toggle the desired snippets on/off

## 💡 Usage
- Each snippet can be individually enabled or disabled in the Obsidian settings.
- Customize the CSS files to suit your preferences.

## ❓ Help
If you encounter any issues:
- Ensure the CSS snippets are enabled.
- Check for conflicts with other snippets or themes.
- Test snippets individually to isolate conflicts.
- Check Obsidian's console for error messages.
- Verify file paths and permissions.

## 👥 Authors
- Franck-dev-hub - Franck S. - Initial development and design.

## 📝 Version History
* **v1.6.0**: Add light mode + refactor hue logic.
* **v1.5.0**: Enhance code and colors
* **v1.4.0**: Complete reshaping
* **v1.3.0**: Create theme.css file for main theme
* **v1.2.0**: Change child color for subfolder_colored.css
* **v1.1.0**: Various bug fixes and optimizations
* **v1.0.0**: Initial release

## 📜 License
- This project is licensed under GNU GPL v3.0 - see the LICENSE file for details.

## 💖 Acknowledgments
- Inspiration and code adapted from the Obsidian community.
- Special thanks to the Obsidian developers for their work.

Related

How to Install

  1. Download the CSS file below
  2. Move it to your vault's .obsidian/snippets/ folder
  3. Open Obsidian → Settings → Appearance → CSS Snippets → Enable it
Download snippet.css

Stats

Stars

1

Forks

0

License

GPL-3.0

Last updated 9mo ago