"How to achieve" CSS code snippets


Line up tabs with macOS traffic lights

Version 5 is available.

1 Like


  • HTML in editor
  • Vert. resize handle to change pane width: change color

Version 6 is available.


Special effects - Translucent modals and popovers.

Version 7 is available.

@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.

Version 8 is available.

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.

Version 9 of the file is now available.

I completed the changes to Settings (Cmd/CTRL+,).
Version 10 is available.


I added:

  • Setting the gap above and below a hor. line, incl. footnotes
  • Setting the gap above and below a hor. footnote line

Version 11 is available.

I added code to change the side ribbons and the icons on the left ribbon.

Version 12 is available.

I added:

  • Command palette: change font color of hotkeys
  • change margin color for box for global search input

Version 13 is available.

I added a new header: Plug-ins.

Under that header I added Calendar plug-in: change color of year.

You can find it in version 14.

1 Like

I added some more color changes for the Obsidian settings:

  • tab “3rd party plugins” font color Browse button
  • change color of buttons in Settings > Appearance > Themes > Browse
  • Display side by side image grid

You can find it in version 15 in the OP above.

Version 16 is now available in the OP above.

I added code that gives some extra cachet to your blockquotes by adding the name of the person quoted in cursive font - courtesy of Gabroel.

I added Gabroel’s code for stylized buttons - see v17 in the OP above.

Gabroel keeps coming up with some delightful styling, this time with

Stylized lists - auto-adjust width & auto-counter

I have added it to the CSS file. Ordered and unordered list code is now under heading “Lists - (un)ordered”.

Version 18 is available in the OP above.

点赞. 干得漂亮

@Fanshu: I don’t understand Chinese.

means you are really cool, he like it :rofl:

@Rainbow_CH: thank you :+1: