"How to achieve" CSS code snippets

Share & showcase
#1

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.

And finally:
If you have a code snippet you think might be useful for someone please post it in a reply here and I will add it to the file. Comments are welcome.

All-together-CSS-v13.md.zip (15.8 KB)

15 Likes
Flush Inline embeds
A WYSIWYM (Typora-like) editing mode
#2
#3

I added:

  • Reduce space of header buttons/icons
  • Reduce global search result margin

Both are related to the left pane.
I have attached version 2 in my 1st post above.

1 Like
#4

Added:

  • Align top tab header with header title
  • Scrollbars no rounded corners
  • Change color of note title active pane

Version 3 is available.

1 Like
#5

Added:

  • Vault launch progress bar change color
  • Change color of line next to note title in Andy Mode
  • Line up tabs with macOS traffic lights
  • Fix background of folder-collapse-indicator

Version 4 is available.

#6

Added:

Line up tabs with macOS traffic lights

Version 5 is available.

#7

Added:

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

Version 6 is available.

#8

Added:

Special effects - Translucent modals and popovers.

Version 7 is available.

#9

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

#10

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

#11

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.

#12

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.

#13

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

2 Likes
#14

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.

#15

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

Version 12 is available.

#16

I added:

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

Version 13 is available.