"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. Update: the plug-in is now integrated in Obsidian core.

You can view or download the CSS code on Github.

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.

46 Likes
A WYSIWYM (Typora-like) editing mode
Meta Post - Common CSS Hacks
Flush Inline embeds
Children bullet points instead of dashes
Obsidianite Theme — Version 1.1.1 (Nov 17, 2020)
Getting comfortable with Obsidian CSS
Meta Post - Common CSS Hacks
Meta Post - Common CSS Hacks
A WYSIWYM (Typora-like) editing mode
Dracula Skin Snippet for @kepano's Minimal Theme
Meta Post - Common CSS Hacks
Transclusion questions
#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.

2 Likes
#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?

1 Like
#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.

#17

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.

#18

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.

#19

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.

#20

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