Obsidian CSS Snippets
I have not written a full post on how I use Obsidian yet but I talked about it in the first post here. I plan to write more in the future but for the mean time I just wanted to put my main edits online for others who may care enough to find them.
Obsidian uses “snippets” of css to compliment/overwrite the various larger themes that you can apply to the product. Below are the ones I have made/gathered and a brief description of what they do.
To use snippets in Obsidian write a file called
.obsidian/snippets then go to the “Appearance” section and refresh then select the file that appears with the toggle.
- Folder Colours
- Graph edits
- Hide meta-data header in preview
- Require hovering to see scrollbars
- More Checkboxes
- Strike Through Checks
- Minimal edits
- Do not colour internal links
- Lean Links
- Unresolved Links
- Nord calendar
- Nord code colour
- Tag multi colours
- Tag same colour
- Embed Fixes
- Hide Comments in Live Preview
- Red Pin for Pinned Tabs
This is an intensive but pretty edit. You need to make a section at the bottom for every folder by name.
This is a method to change the colour of “attachments” in the graph view. You can investigate and find other node names to change as well.
Hide meta-data header in preview
This hides the “Meta Data” header caused by FrontMatter when in the Reading view
I expanded this existing snippet to add additional colours.
To use the highlighter functions see below:
1 2 3 4 5 ==Yellow== <mark class='pink'>pink</mark> <mark class='green'>green</mark> <mark class='blue'>blue</mark> <mark class='red'>red</mark>
Require hovering to see scrollbars
I did not want to fully hide scrollbars with a plugin like Hider but I also didnt want to see them all the time. I found this snippet somewhere that makes them hide until you hover over them.
I wanted to have more than just checkmarks possible in my checkboxes and after much struggling I arrived at this nice solution that works for Live Preview and Read view in Minimal theme (only).
Sadly with Minimal 5.1.8 Kepano added his own checkmarks that make these render incorrectly. These are now for historical reference and inspiration of other tweakers.
Strike Through Checks
A consolation script from the above, this brings back only strike throughs to Minimal now that I don’t need the bulk of my new checkmarks.
Kepano really wants you to use the Minimal Settings and Style Settings plugins for managing minimal, but I started out and continue to use CSS to get my changes made. This handles Headers, base color (makes it Nord) and minor edits to the Title of pages.
Do not colour internal links
I made this for someone else and kept it around for reference. It removes the colour from (sets it to white) internal links. It also strips formatting from H1 where they were using internal links.
This is a larger edit, it removes the underline from internal links as well as the hovering arrow from external links. The large block at the top is needed to add the line back in Minimal. Due to the way external links work you cannot add it to only external links.
I have two snippets to handle unresolved links. One will make them red while the other masks them to appear just like a resolved link.
Red unresolved links
Masked unresolved links
These are some minor colour edits to the Calendar plugin.
Nord code colour
This is a method to change the colour on inline code and code blocks.
Tag multi colours
I copied this for someone to make some minor edits and keep it for reference. It is a method to colour named tags to accomplish various things.
Tag same colour
This, like the above, is for reference. It changes the colour of all pill tags.
Hides H1,H2, and H3 headers in Embeds, something that bugs me when I embed notes. This is copied from the forums then modified for myself.
Hide Comments in Live Preview
Red Pin for Pinned Tabs
This changes the color of the Pin icon present when a page is pinned.