CSS Snippets

[thomasmoulson]

What I’m trying to do

I don’t know anything about CSS snippets, but seems they are a way to unlock some feature that may be useful, so want to try them. The documentation here seems to say it’s simple CSS snippets - Obsidian Help but I’m on a Mac and have read something about snippets folder being hidden, and thus unable to add snippets in there. The documentation doesn’t mention anything about this and other things I’ve read start mentioning opening a terminal and a load of coding to get it to work. Does anyone know of a non coding way to input snippets easily for a Mac user? Thanks.

Things I have tried

Just reading, I don’t want to go messing about with things before it at least seems logical…

[holroy]

@thomasmoulson

The documentation here seems to say it’s simple CSS snippets - Obsidian Help but I’m on a Mac and have read something about snippets folder being hidden, and thus unable to add snippets in there.

You can edit these files locally with a normal text editor, the way to do so is as follows:

• Open the folder with your vault in Finder, and hit Cmd + Shift + . , this will reveal the hidden files in that folder
• Continue navigation to .obsidian/snippets, and there you’ll see all your snippets, and can choose to edit or create new files at your will

Another way to open this folder from inside Obsidian, is to go to Settings > Appearance, and scroll down to CSS snippets and hit the folder icon on the right of that line, which will open this folder in your file explorer. This place is also where you enable/disable your snippets if you desire to do so.

Use CSS Editor plugin

@thomasmoulson

Does anyone know of a non coding way to input snippets easily for a Mac user?

You do need to code the CSS manually, but @Zachatoo has made a plugin which makes this process even easier. You install this plugin, and assign some hotkeys to its command to create, edit or delete CSS snippets. Now you’re allowed to open these within Obsidian, and get proper styling when editing the CSS.

Finally the guide below can also be a good thing to read through to get you started on editing these snippets.

Obsidian CSS Quick Guide

Obsidian CSS Quick Guide Hi friends! CSS in Obsidian can be confusing to get into, so this is a guide to get you started with information on the tools, methods, and some background knowledge! Let’s get started by looking at how you can look behind the curtain of Obsidian’s visuals. The Developer Console Obsidian is technically like a website. As such, you can view the source like any other browser. While you are inside the Obsidian window, you can press ctrl+shift+i to bring up the develope…

[thomasmoulson]

Thanks holroy. I think I’m going to leave snippets and CSS for a rainy day… better not try to fix something that isn’t broken I’m thinking, and I know my current limits! I had got as far as finding my hidden snippets folder a couple of days ago, but I’m not sure I can have access for adding anything in there? The folder is faded which I believe shows it is hidden… doesn’t this mean there is no access to it also? Anyhow, I’ve saved the link you send for that rainy day!

[holroy]

It’s hidden because “normally” you don’t need to see it, but it being hidden is not connected to it being unavailable for editing. Of course a little bit of care should be taken when changing stuff in there, but the .obsidian/snippets folder is made for editing of these snippets.

And by using the CSS Editor plugin, you can do so without the hassle of file manouvering!

But I can understand the sentiment on not going down this road before you’re ready to do so. You can have loads of fun (and frustration) when starting to edit CSS…