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 <name>.css to .obsidian/snippets then go to the “Appearance” section and refresh then select the file that appears with the toggle.

Folder Colours

This is an intensive but pretty edit. You need to make a section at the bottom for every folder by name.

folders.png

Graph edits

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

Highlighter

I expanded this existing snippet to add additional colours.

highlighter.png

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.

More Checkboxes

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.

checkboxes

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.

Minimal edits

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.

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 makes unresolved links red, and removes the underline from internal 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 also remove the hovering arrow icon from external links.

Nord calendar

These are some minor colour edits to the Calendar plugin.

calendar.png

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.

Embed Fixes

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.

Updated: