An open API service indexing awesome lists of open source software.

https://github.com/dynstat/obsidian-css-templates

Elements colored in the sodalite theme for the obsidian app.
https://github.com/dynstat/obsidian-css-templates

Last synced: 10 months ago
JSON representation

Elements colored in the sodalite theme for the obsidian app.

Awesome Lists containing this project

README

          

# Obsidian CSS Templates

This repository contains a collection of custom CSS snippets and templates designed to enhance and personalize the appearance of your Obsidian notes. These templates offer various stylistic modifications to help you create a more visually appealing and productive writing environment within Obsidian.

## What's Included

This repository currently hosts a variety of CSS templates that can be used to customize different aspects of your Obsidian vault. Examples of potential templates include:

* **Custom Heading Styles:** Templates that provide unique colors, fonts, and decorations for your H1, H2, H3, etc., headings. (You might find examples of this in the repository already!)
* **Enhanced Link Styling:** CSS to make internal and external links more visually distinct or to add hover effects.
* **Blockquote Modifications:** Templates to style blockquotes with different borders, background colors, or text formatting.
* **Code Block Themes:** CSS to change the appearance of code blocks, potentially mimicking popular code editors.
* **Table Styling:** Templates to improve the readability and visual appeal of tables in your notes.
* **And more!**

**Note:** This repository is a work in progress, and more templates will be added over time. Feel free to contribute your own creations!

## How to Use These CSS Templates in Obsidian

To apply these CSS templates to your Obsidian vault, follow these steps:

1. **Navigate to your Obsidian vault's configuration folder:**
* Open Obsidian.
* Go to **Settings** (the gear icon in the bottom left).
* Under **Appearance**, click on the button labeled "**Open vault CSS folder**". This will open your vault's `.obsidian` folder (which might be hidden by default on some operating systems).

2. **Create or edit the `obsidian.css` file:**
* If a file named `obsidian.css` already exists in this folder, you can edit it.
* If it doesn't exist, create a new file named `obsidian.css` in this folder.

3. **Copy and paste the CSS code:**
* Browse the files in this repository and find the CSS template you want to use.
* Open the `.css` file in your browser or a text editor.
* Copy the entire content of the CSS file.
* Paste this code into your `obsidian.css` file.

4. **Enable custom CSS in Obsidian:**
* Go back to Obsidian's **Settings** (Appearance tab).
* Make sure the "**Custom CSS**" toggle is enabled.

5. **Obsidian will automatically apply the styles:** Your Obsidian notes should now reflect the styles defined in the CSS template you added.

## Contributing

Contributions to this repository are welcome! If you have created a custom CSS snippet or template that you think others might find useful, feel free to:

1. **Fork** the repository.
2. Create a new branch with a descriptive name (e.g., `feature/new-heading-style`).
3. Add your CSS file to the repository, ideally with a clear name and a brief description in the README.
4. Commit your changes and push them to your fork.
5. Create a **Pull Request** to the main repository.

Please ensure your CSS is well-commented and easy to understand.

## License

This repository is licensed under the MIT License. See the `LICENSE` file for more information.

## Author

This repository is maintained by dynstat.

---

Thank you for checking out these Obsidian CSS templates! I hope they help you personalize your Obsidian experience.