# "How to achieve" CSS code snippets **URL:** \ **Category:** Themes & CSS snippets\ **Tags:** custom-css\ **Created:** [November 12, 2020, 3:29pm UTC](https://forum.obsidian.md/t/how-to-achieve-css-code-snippets/8474 "2020-11-12T15:29:49Z")\ **Posts on this page:** 20\ **Page:** 1
**Author:** ![Klaas](https://forum.obsidian.md/letter_avatar_proxy/v4/letter/k/ecc23a/32.png) [@Klaas](https://forum.obsidian.md/u/Klaas)\ **Post date:** [November 12, 2020, 3:29pm UTC](https://forum.obsidian.md/t/how-to-achieve-css-code-snippets/8474/1 "2020-11-12T15:29:49Z")
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](https://github.com/Dmitriy-Shulha/obsidian-css-snippets/blob/develop/Snippets/)**. **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.** ---
**Author:** ![ryanjamurphy](https://forum.obsidian.md/user_avatar/forum.obsidian.md/ryanjamurphy/32/334_2.png) [@ryanjamurphy](https://forum.obsidian.md/u/ryanjamurphy)\ **Post date:** [November 13, 2020, 6:37pm UTC](https://forum.obsidian.md/t/how-to-achieve-css-code-snippets/8474/2 "2020-11-13T18:37:07Z")
Pinned on November 13, 2020, 6:37pm UTC ---
**Author:** ![Klaas](https://forum.obsidian.md/letter_avatar_proxy/v4/letter/k/ecc23a/32.png) [@Klaas](https://forum.obsidian.md/u/Klaas)\ **Post date:** [November 14, 2020, 4:49pm UTC](https://forum.obsidian.md/t/how-to-achieve-css-code-snippets/8474/3 "2020-11-14T16:49:38Z")
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. ---
**Author:** ![Klaas](https://forum.obsidian.md/letter_avatar_proxy/v4/letter/k/ecc23a/32.png) [@Klaas](https://forum.obsidian.md/u/Klaas)\ **Post date:** [November 15, 2020, 8:10am UTC](https://forum.obsidian.md/t/how-to-achieve-css-code-snippets/8474/4 "2020-11-15T08:10:12Z")
Added: - Align top tab header with header title - Scrollbars no rounded corners - Change color of note title active pane Version 3 is available. ---
**Author:** ![Klaas](https://forum.obsidian.md/letter_avatar_proxy/v4/letter/k/ecc23a/32.png) [@Klaas](https://forum.obsidian.md/u/Klaas)\ **Post date:** [November 16, 2020, 9:40am UTC](https://forum.obsidian.md/t/how-to-achieve-css-code-snippets/8474/5 "2020-11-16T09:40:27Z")
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. ---
**Author:** ![Klaas](https://forum.obsidian.md/letter_avatar_proxy/v4/letter/k/ecc23a/32.png) [@Klaas](https://forum.obsidian.md/u/Klaas)\ **Post date:** [November 16, 2020, 10:47am UTC](https://forum.obsidian.md/t/how-to-achieve-css-code-snippets/8474/6 "2020-11-16T10:47:31Z")
Added: Line up tabs with macOS traffic lights Version 5 is available. ---
**Author:** ![Klaas](https://forum.obsidian.md/letter_avatar_proxy/v4/letter/k/ecc23a/32.png) [@Klaas](https://forum.obsidian.md/u/Klaas)\ **Post date:** [November 16, 2020, 11:32am UTC](https://forum.obsidian.md/t/how-to-achieve-css-code-snippets/8474/7 "2020-11-16T11:32:01Z")
Added: - HTML in editor - Vert. resize handle to change pane width: change color Version 6 is available. ---
**Author:** ![Klaas](https://forum.obsidian.md/letter_avatar_proxy/v4/letter/k/ecc23a/32.png) [@Klaas](https://forum.obsidian.md/u/Klaas)\ **Post date:** [November 17, 2020, 1:07pm UTC](https://forum.obsidian.md/t/how-to-achieve-css-code-snippets/8474/8 "2020-11-17T13:07:11Z")
Added: Special effects - Translucent modals and popovers. Version 7 is available. ---
**Author:** ![danbburg](https://forum.obsidian.md/letter_avatar_proxy/v4/letter/d/90ced4/32.png) [@danbburg](https://forum.obsidian.md/u/danbburg)\ **Post date:** [November 17, 2020, 3:11pm UTC](https://forum.obsidian.md/t/how-to-achieve-css-code-snippets/8474/9 "2020-11-17T15:11:03Z")
@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? ---
**Author:** ![Klaas](https://forum.obsidian.md/letter_avatar_proxy/v4/letter/k/ecc23a/32.png) [@Klaas](https://forum.obsidian.md/u/Klaas)\ **Post date:** [November 17, 2020, 4:05pm UTC](https://forum.obsidian.md/t/how-to-achieve-css-code-snippets/8474/10 "2020-11-17T16:05:33Z")
@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. ---
**Author:** ![Klaas](https://forum.obsidian.md/letter_avatar_proxy/v4/letter/k/ecc23a/32.png) [@Klaas](https://forum.obsidian.md/u/Klaas)\ **Post date:** [November 19, 2020, 4:20pm UTC](https://forum.obsidian.md/t/how-to-achieve-css-code-snippets/8474/11 "2020-11-19T16:20:46Z")
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](https://forum.obsidian.md/t/solved-footnote-highlight-color-cannot-be-changed-anymore/8642/9), which I have added to the top of the footnote section in my master `.md` file for CSS. Version 8 is available. ---
**Author:** ![Klaas](https://forum.obsidian.md/letter_avatar_proxy/v4/letter/k/ecc23a/32.png) [@Klaas](https://forum.obsidian.md/u/Klaas)\ **Post date:** [November 20, 2020, 12:32pm UTC](https://forum.obsidian.md/t/how-to-achieve-css-code-snippets/8474/12 "2020-11-20T12:32:47Z")
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. ---
**Author:** ![Klaas](https://forum.obsidian.md/letter_avatar_proxy/v4/letter/k/ecc23a/32.png) [@Klaas](https://forum.obsidian.md/u/Klaas)\ **Post date:** [November 21, 2020, 4:05am UTC](https://forum.obsidian.md/t/how-to-achieve-css-code-snippets/8474/13 "2020-11-21T04:05:49Z")
I completed the changes to Settings (Cmd/CTRL+,). Version 10 is available. ---
**Author:** ![Klaas](https://forum.obsidian.md/letter_avatar_proxy/v4/letter/k/ecc23a/32.png) [@Klaas](https://forum.obsidian.md/u/Klaas)\ **Post date:** [November 22, 2020, 3:46pm UTC](https://forum.obsidian.md/t/how-to-achieve-css-code-snippets/8474/14 "2020-11-22T15:46:07Z")
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. ---
**Author:** ![Klaas](https://forum.obsidian.md/letter_avatar_proxy/v4/letter/k/ecc23a/32.png) [@Klaas](https://forum.obsidian.md/u/Klaas)\ **Post date:** [November 23, 2020, 10:14am UTC](https://forum.obsidian.md/t/how-to-achieve-css-code-snippets/8474/15 "2020-11-23T10:14:47Z")
I added code to change the side ribbons and the icons on the left ribbon. Version 12 is available. ---
**Author:** ![Klaas](https://forum.obsidian.md/letter_avatar_proxy/v4/letter/k/ecc23a/32.png) [@Klaas](https://forum.obsidian.md/u/Klaas)\ **Post date:** [November 24, 2020, 12:58pm UTC](https://forum.obsidian.md/t/how-to-achieve-css-code-snippets/8474/16 "2020-11-24T12:58:24Z")
I added: - Command palette: change font color of hotkeys - change margin color for box for global search input Version 13 is available. ---
**Author:** ![Klaas](https://forum.obsidian.md/letter_avatar_proxy/v4/letter/k/ecc23a/32.png) [@Klaas](https://forum.obsidian.md/u/Klaas)\ **Post date:** [November 27, 2020, 6:36am UTC](https://forum.obsidian.md/t/how-to-achieve-css-code-snippets/8474/17 "2020-11-27T06:36:05Z")
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. ---
**Author:** ![Klaas](https://forum.obsidian.md/letter_avatar_proxy/v4/letter/k/ecc23a/32.png) [@Klaas](https://forum.obsidian.md/u/Klaas)\ **Post date:** [December 2, 2020, 6:30am UTC](https://forum.obsidian.md/t/how-to-achieve-css-code-snippets/8474/18 "2020-12-02T06:30:32Z")
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. ---
**Author:** ![Klaas](https://forum.obsidian.md/letter_avatar_proxy/v4/letter/k/ecc23a/32.png) [@Klaas](https://forum.obsidian.md/u/Klaas)\ **Post date:** [December 4, 2020, 9:39am UTC](https://forum.obsidian.md/t/how-to-achieve-css-code-snippets/8474/19 "2020-12-04T09:39:20Z")
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](https://discord.com/channels/686053708261228577/702656734631821413/784210155923177552). ---
**Author:** ![Klaas](https://forum.obsidian.md/letter_avatar_proxy/v4/letter/k/ecc23a/32.png) [@Klaas](https://forum.obsidian.md/u/Klaas)\ **Post date:** [December 5, 2020, 6:46pm UTC](https://forum.obsidian.md/t/how-to-achieve-css-code-snippets/8474/20 "2020-12-05T18:46:55Z")
I added Gabroel’s code for stylized buttons - see v17 in the OP above. [Next page](https://forum.obsidian.md/t/how-to-achieve-css-code-snippets/8474.md?page=2)