As a CSS newbie I have to frequently ask fellow Obsidianites what code to use to achieve a certain effect in my custom CSS sheet.
I have made a habit of collecting these habits, and, to make them more easily searchable, I transferred them to …… you guessed it: an MD file.
I thought it might be useful to share this with others, who can then add their own snippets, which I can add to the file.
I have categorized the snippets on the basis of what they are used for, and have added # headers.
You can scan the headers in the Outliner pane to find a relevant snippet. People not interested in learning CSS or wanting a shortcut to implement certain thing can use these snippets too.
Note 1: the snippets are supplied as they are, and as I am not a CSS expert I cannot assist in fixing errors that might occur if e.g. there are clashes with other parts of your CSS.
Note 2: there is now a plug-in that you can use to manage individual code snippets. The plug-in, called “css snippets” (duhhh) was made by Daniel Brandenburg; he has an interesting road map for future development. Update: the plug-in is now integrated in Obsidian core.
If there’s an interesting piece of code you think is missing you made add it with a pull request in the Github repository (provided you have a Github account), or post it here and I’ll add it.
@Klaas I wanted to advertise the (very simple) plugin I posted for css snippets. It allows you to keep css files in a folder in your vault (css-snippets). The plugin can load / unload all of the css files. This is helpful because you can keep your theme file pristine, and keep individual changes in css snippet files. For instance I have one file to apply a custom edit mode syntax highlighting color scheme.
If you are interested just search for “css” in the third party plugins. I am open to suggestions also. Next I plan to make it possible to toggle snippets on/off individually.
I am curious if it is useful for your case, and if not what needs to change / be added?
@danbburg: Hi Daniel, I have seen your plug-in, and was delighted with something like that. I have not installed it yet because I am waiting for the toggle feature that I would love to have.
I applaud your initiative. The only thing for me to bear in mind is that when sometimes 2 snippets interfere with one another, it is easy to be able to run through 1 .css file with all of the code (current situation), rather than having to open & close various .css files to find the culprit (in the plug-in situation). Then again, nothing is perfect.
1 question I have is if there is a maximum number of css files that can be put in the css-snippets folder? I have around 1200 lines of code in my theme, and would split those up in small blocks, one for each .css file.
The plug-in and my .md file listing CSS snippets are not mutually exclusive. The latter basically groups all the CSS snippets I find useful and am using or have used in the past. Even when I install your plug-in, I will still keep my .md file going, so that if I need to have a certain feature I can run through the 1 list and extract the relevant code to compile a .css file for just that feature and put it in the css-snippets folder for use with your plug-in.
In fact, what I will do is refer to your plug-in in my initial comment at the top of this page and write a little spiel to explain the relationship, and then the loop is closed.
Thanks a lot for reaching out, I really appreciate it, and hope to see the toggle feature soon.
I use footnotes a lot, notably inline footnotes. Some changes I applied to other parts of my CSS meant I could not change the color of the highlight anymore when clicking on a footnote or the little return arrow.
I have now found a solution, which I have added to the top of the footnote section in my master .md file for CSS.
The Obsidianite theme is a relatively new kid on the block with beautiful features. I already copied the original horizontal line code, I have now copied the blockquote code as well and incorporated into the .md file.