https://github.com/felixqueisler/Obsidian-FileLink-Styling

Improves the way linked files are displayed in Obsidian, making them beautifully distinct from notes.
https://github.com/felixqueisler/Obsidian-FileLink-Styling

Last synced: 17 days ago
JSON representation

Improves the way linked files are displayed in Obsidian, making them beautifully distinct from notes.

• Host: GitHub
• URL: https://github.com/felixqueisler/Obsidian-FileLink-Styling
• Owner: felixqueisler
• License: mit
• Created: 2024-04-23T07:14:30.000Z (8 months ago)
• Default Branch: main
• Last Pushed: 2024-04-28T15:16:38.000Z (8 months ago)
• Last Synced: 2024-08-07T00:28:38.228Z (4 months ago)
• Language: SCSS
• Size: 401 KB
• Stars: 11
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• project-awesome - felixqueisler/Obsidian-FileLink-Styling - Improves the way linked files are displayed in Obsidian, making them beautifully distinct from notes. (SCSS)

README

        
# Obsidian-FileLink-Styling

Improves the way linked files are displayed in Obsidian (reading view), making them beautifully distinct from notes.

## Features

* Beautiful simple button-style links for files

* Inline SVG-Icons

* Easily expandable through SCSS

* Follows your theme

* Multi-Icon support

## Screenshot

![Feature Preview](/assets/screenshot-preview.png)

## Usage

1. Download the css-file or compile your own version using scss/sass compiler.

2. Open Obsidian settings > appearance > CSS Snippets and move the file to the snippet folder.

3. Activate the snippet in the Obsidian settings.

Read more here: [Obsidian Help](https://help.obsidian.md/Extending+Obsidian/CSS+snippets)

4. Open your notes in reading view.

## Supported filetypes

_As of now. Ask for more with GitHub's issue feature._

Due to limitations in writing selectors for anchors based on their href property, filetypes have to be set specifially.

- **Code Files**

  - Extensions: `html`, `css`, `js`, `php`, `py`, `java`, `cpp`, `c`, `cs`, `rb`, `go`, `lua`, `swift`, `ts`, `json`, `xml`, `scss`, `sass`, `sh`, `asm`, `sql`, `r`, `pl`, `h`, `hpp`

  - [Icon Source](https://iconic.app/code/)

- **PDF Files**

  - Extensions: `pdf`

  - [Icon Source](https://iconic.app/file/)

- **Video Files**

  - Extensions: `mp4`, `avi`, `mov`, `wmv`, `mkv`, `flv`, `mpeg`, `mpg`, `webm`, `vob`, `m4v`, `3gp`, `3g2`, `f4v`

  - [Icon Source](https://iconic.app/video/)

- **Audio Files**

  - Extensions: `mp3`, `wav`, `aac`, `ogg`, `flac`, `alac`, `wma`, `m4a`, `ape`, `mid`, `midi`, `mpa`, `ogg`, `aif`

  - [Icon Source](https://iconic.app/headphones/)

- **Image Files**

  - Extensions: `jpg`, `jpeg`, `png`, `gif`, `bmp`, `tiff`, `svg`, `psd`, `webp`, `ico`, `heic`, `raw`, `arw`, `svgz`, `nef`, `orf`

  - [Icon Source](https://iconic.app/photo/)

- **Archive Files**

  - Extensions: `zip`, `rar`, `7z`, `tar`, `gz`, `bz2`, `xz`, `tar.gz`, `jar`, `iso`, `cab`, `rar5`, `dmg`

  - [Icon Source](https://iconic.app/zip-file/)

- **Word Files**

  - Extensions: `doc`, `docx`, `odt`, `rtf`, `docm`, `wps`

  - [Icon Source](https://iconic.app/file-text/)

- **Spreadsheet Files**

  - Extensions: `xls`, `xlsx`, `ods`, `csv`, `xlsm`, `xlt`, `xlm`

  - [Icon Source](https://iconic.app/table-rows/)

- **Slide Files**

  - Extensions: `ppt`, `pptx`, `odp`, `pps`, `pptm`

  - [Icon Source](https://iconic.app/projector/)

- **Design Files**

  - Extensions: `psd`, `ai`, `sketch`, `eps`, `indd`, `xcf`, `dwg`, `svg`, `fig`, `cdr`, `afdesign`, `stp`, `3ds`, `iges`, `max`

  - [Icon Source](https://iconic.app/dashboard/)

- **Torrent Files**

	- Extensions: `torrent`

	- [Pro Icon Source](https://iconic.app/file-share/)

- **External (Local Filesystem) Files**

	- Extensions: *

	- [Pro Icon Source](https://iconic.app/folder-share/)

 

## Thank you

[@sailKiteV](https://github.com/sailKiteV) in Obsidian Discord (https://discord.gg/obsidianmd) for helping me out and providing a first SCSS draft of my initial CSS version.