A collection of snippet to customize obsidian

  • By Mara
  • Last update: Dec 22, 2022
  • Comments: 4

Summary

⚠️ For IOS : If you don't have Textastic (can open .obsidian folder) you need to use shortcuts and toolbox pro to open hidden folder. You can also use ashell (Free) to open .obsidian and file !

WYSIWYG and Pseudo WYSIWYG

Wysiwyg code mirror companion

It's a little snippet that must be used with the plugin Code Mirror Options. It works only for PC.

PureCSS

Check the pureCSS branch to get the old version.

Information about mobile support

On mobile, the code mirror version used is Code Mirror 6, not Code Mirror 5. So, activeline doesn’t work. I use another “tricks” to create a WYSIWYG view. For example :

  • You will see the formatting with a little size and opacity.
  • Link will be replaced by a icon, but you can always go to them, and you can saw them with backspace.
  • Task will be replaced by symbol. To add the x, just go in and add it, you will see the update. Yeah, it's a little strange and tricky. I advice you to use the preview to check your task.

Also, I test only on IOS / IpadOS. If you saw any problem on android, please, provide an issue and a solution. I can't check for android for that.

Installation

It's more an advice than an obligation, but I update a lot this, so unless you want to download / check the page each minute...

  1. Clone this repository in your .obsidian/snippet
  2. Move .git, and wysiwyg.css snippet in your folder.
  3. Delete the Obsidian-WYSIWYG folder.

Now, each time there is a update, you can just do git pull in a terminal/cmd. You can create a task for that, because sometimes I will not warn user each time !

Note : With this setup, you will not be able to edit the file, because each update erase your personal edit. Create another snippet OR create a pull request/issue with your personal edit.

Colored Folder

You can change the color with style settings.

image

Folder Icons

Folder Note

Folder note is a good plugin but it doesn't provide icon. This snippets is an example of styling.

Icon Folder plugin snippet

The plugin icon folder provide a better way to add icon to your folder. The snippet :

  • mini.folders.icons provide some CSS for file
  • folders.colored add color to your folder name.

Pure CSS

→ This are moved in the branch ('PureCSS_icons')

Github

https://github.com/Mara-Li/Obsidian-Snippet-collection

Comments(4)

  • 1

    Trying to install on ipad

    Are there different instructions for the ipad?

    Clone this repository in your .obsidian/snippet
Move .git, and wysiwyg.css snippet in your folder.
Delete the Obsidian-WYSIWYG folder.

    Step #2 I am little confiused

    Step to is mv ~/.obsidian/snippet/Obsidian-Snippet-collection/.git <my-vault>? This seems odd to me.

  • 2

    Question: How do you find the content values for the icon fonts?

    Hello!! I'm just getting started using the colored folder and folder Icons and its fantastic! However I'm running into a bit of a brick wall. How do you find the content values for the icons in the folders.icon.font.css file? This may be a dumb question, but I've been trying and haven't been able to reliably select new custom icons because the values are seemingly random codes.

    Thank you very much in advance, I'm very new to CSS so I hope you'll bear with me ^^

  • 3

    [BUG] Incorrect Obsidian snippets folder shown in README.md

    Describe the bug README.md shows the snippets folder as snippet when it should be snippets. In other words, the CSS files need to be copied to <vault>/.obsidian/snippets, not <vault>/.obsidian/snippet

    To Reproduce Steps to reproduce the behavior: N/A

    Screenshots N/A

    Platform (please complete the following information): All.

    Additional context N/A

  • 4

    Text in tag pane for the front matter in dark mode not very visible

    Hi, I am using the Yin-Yang theme in the dark mode. I noticed that the background for the tag pane in the front matter in dark mode is not very visible. Please see the attached screenshot. Can you suggest any changes to resolve this?

    image

    Thanks!

Popular Tag

Related