# "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:** 10
**Author:** ![kenanmike](https://forum.obsidian.md/user_avatar/forum.obsidian.md/kenanmike/32/18316_2.png) [@kenanmike](https://forum.obsidian.md/u/kenanmike)\ **Post date:** [August 23, 2021, 1:44pm UTC](https://forum.obsidian.md/t/how-to-achieve-css-code-snippets/8474/181 "2021-08-23T13:44:08Z")
Thanks very much! Trying every possible number combination I could think of, this is the closest I could get which is good enough for me: ![image](https://forum.obsidian.md/uploads/default/original/3X/8/a/8a2e49701802c33da79108f044d805e42d3f2107.png) ---
**Author:** ![Klaas](https://forum.obsidian.md/letter_avatar_proxy/v4/letter/k/ecc23a/32.png) [@Klaas](https://forum.obsidian.md/u/Klaas)\ **Post date:** [August 23, 2021, 2:21pm UTC](https://forum.obsidian.md/t/how-to-achieve-css-code-snippets/8474/182 "2021-08-23T14:21:39Z")
@kenanmike I had the same issue and the same tag look, and that tiny bit under the K was not good enough for me. Now try this: ```css .CodeMirror-line span.cm-hashtag-end { padding-bottom: 1px; } ``` Same advice: play with the px value. ---
**Author:** ![kenanmike](https://forum.obsidian.md/user_avatar/forum.obsidian.md/kenanmike/32/18316_2.png) [@kenanmike](https://forum.obsidian.md/u/kenanmike)\ **Post date:** [August 23, 2021, 2:29pm UTC](https://forum.obsidian.md/t/how-to-achieve-css-code-snippets/8474/183 "2021-08-23T14:29:27Z")
![image](https://forum.obsidian.md/uploads/default/original/3X/2/1/215b4d1b69da38811c4d13b72ba2c6e8ffdec622.png) Got it!! Thanks so much Klaas. Here are the numbers that did it for me finally: ![image](https://forum.obsidian.md/uploads/default/original/3X/1/d/1da062dce2788a33c2a80b53691703376ca4f045.png) ---
**Author:** ![Moonbase59](https://forum.obsidian.md/user_avatar/forum.obsidian.md/moonbase59/32/13648_2.png) [@Moonbase59](https://forum.obsidian.md/u/Moonbase59)\ **Post date:** [August 23, 2021, 2:31pm UTC](https://forum.obsidian.md/t/how-to-achieve-css-code-snippets/8474/184 "2021-08-23T14:31:11Z")
Some rant: `px` should be deprecated, it’s something totally outdated. 😉 Why doesn’t everyone use `em`, `ex`, `ch`, `rem`, `vw`, `vh`, `vmin` and `vmax` nowadays? It would make so many things so much easier. Here’s an [interesting article on that](https://webplatform.github.io/docs/tutorials/understanding-css-units/). ---
**Author:** ![Klaas](https://forum.obsidian.md/letter_avatar_proxy/v4/letter/k/ecc23a/32.png) [@Klaas](https://forum.obsidian.md/u/Klaas)\ **Post date:** [August 23, 2021, 5:14pm UTC](https://forum.obsidian.md/t/how-to-achieve-css-code-snippets/8474/185 "2021-08-23T17:14:53Z")
@Moonbase59 you are right. The thing is that when one is used to 1 system it is sometimes difficult to muster the discipline to use a new system. Example: the U.S. still does not use the far superior, easier, and more logical metric system instead of that totally outdated imperial system. Another thing is that one is not going to replace all the px values in one’s snippets, right? So, if I copy/paste some code from a `px`-based snippet I don’t immediately think to change the units to `em`. That is not good, but it is the reality. I’ll try to improve my ways. Thanks for the link ---
**Author:** ![Klaas](https://forum.obsidian.md/letter_avatar_proxy/v4/letter/k/ecc23a/32.png) [@Klaas](https://forum.obsidian.md/u/Klaas)\ **Post date:** [August 24, 2021, 9:46am UTC](https://forum.obsidian.md/t/how-to-achieve-css-code-snippets/8474/186 "2021-08-24T09:46:17Z")
@anon56682183 came up with an idea to make the Settings window/modal (invoked with `CMD/CTRL+,`) bigger and more compact. I tried it and found it useful so I decided to add it to the Github repository. I also added his code to make the plug-ins window bigger and more compact. The link to the Github repository is given in the OP at the top of this page. On the Github page scroll down to _Settings.md_ and click on it to open. Enjoy. ---
**Author:** ![Klaas](https://forum.obsidian.md/letter_avatar_proxy/v4/letter/k/ecc23a/32.png) [@Klaas](https://forum.obsidian.md/u/Klaas)\ **Post date:** [August 25, 2021, 3:46pm UTC](https://forum.obsidian.md/t/how-to-achieve-css-code-snippets/8474/187 "2021-08-25T15:46:54Z")
Sometimes, like e.g. when we need to discuss an Obsidian issue with someone, we need to provide a screenshot of a note. If it happens the note has confidential info we don’t want anyone else to read it. @Moonbase59 has written an extremely useful piece of CSS code to easily garble text, as well as images. His code has some more features over and above _kurakart_’s Garble Text plug-in. You can read Matthias’s spiel about it [**here**](https://forum.obsidian.md/t/garble-text-on-screen-to-hide-private-info-with-added-features/23143). In fact, ideally you should install the plug-in in conjunction with Moonbase59’s snippet. It makes using the snippet much easier, esp. on iOS devices. Also, with the plug-in you can set a hotkey combo for the plug-in that will toggle garble/ungarble. I have added Moonbase59’s snippet to the Github repository. In order to avoid creating too many snippet files in the repository I have added the snippet under _Font_, as that is what is most affected by this tool. The link to the Github repository is given in the OP at the top of this page. On the Github page scroll down to _Font.md_ and click on it to open, and scroll down a bit. Enjoy. ---
**Author:** ![Moonbase59](https://forum.obsidian.md/user_avatar/forum.obsidian.md/moonbase59/32/13648_2.png) [@Moonbase59](https://forum.obsidian.md/u/Moonbase59)\ **Post date:** [August 25, 2021, 6:28pm UTC](https://forum.obsidian.md/t/how-to-achieve-css-code-snippets/8474/188 "2021-08-25T18:28:21Z")
I don’t want to take all the credit—@Licat and @Silver have done the original work (using “Flow Circular” as a font). The plugin to make it available more easily is by _kurakart_ which now implements part of the code. The “added features” CSS is mine though. 🙂 ---
**Author:** ![Klaas](https://forum.obsidian.md/letter_avatar_proxy/v4/letter/k/ecc23a/32.png) [@Klaas](https://forum.obsidian.md/u/Klaas)\ **Post date:** [August 26, 2021, 2:47am UTC](https://forum.obsidian.md/t/how-to-achieve-css-code-snippets/8474/189 "2021-08-26T02:47:38Z")
@Moonbase59 I added _kurakart_ to the bit about the plug-in - thanks for your correction. I have not added the bit about the devs as I don’t quite understand it, and all of the basic Obsidian is credit to the devs anyway. ---
**Author:** ![LEVAF](https://forum.obsidian.md/user_avatar/forum.obsidian.md/levaf/32/18765_2.png) [@LEVAF](https://forum.obsidian.md/u/LEVAF)\ **Post date:** [August 26, 2021, 9:21pm UTC](https://forum.obsidian.md/t/how-to-achieve-css-code-snippets/8474/190 "2021-08-26T21:21:05Z")
This still works on v0.12.12, @Lithou? I tryed the “Side-bar Quote Snippet” and didn’t work. ---
**Author:** ![TaraUnscripted](https://forum.obsidian.md/user_avatar/forum.obsidian.md/taraunscripted/32/14524_2.png) [@TaraUnscripted](https://forum.obsidian.md/u/TaraUnscripted)\ **Post date:** [August 31, 2021, 5:34pm UTC](https://forum.obsidian.md/t/how-to-achieve-css-code-snippets/8474/191 "2021-08-31T17:34:36Z")
Thanks @EleanorKonik - I was able to import this successfully. I have a conundrum however. 1. I installed the Typography plugin as well but the quotation marks won’t change. I’m using the Blue Topaz theme and this is what they look like no matter what I try ![image](https://forum.obsidian.md/uploads/default/original/3X/b/4/b41b999edd36742a5ba4ebfd7945474dd242151f.png) Anyone have an idea or two how to change these to aesthetically pleasing curly quotes? ---
**Author:** ![anon12638239](https://forum.obsidian.md/letter_avatar_proxy/v4/letter/a/2bfe46/32.png) [@anon12638239](https://forum.obsidian.md/u/anon12638239)\ **Post date:** [August 31, 2021, 5:59pm UTC](https://forum.obsidian.md/t/how-to-achieve-css-code-snippets/8474/192 "2021-08-31T17:59:26Z")
Hello. If you are using the CSS from the [GitHub link](https://github.com/eleanorkonik/-palatinate/blob/main/fancy-blockquote.css) on Eleanor’s post, you _should_ be able to edit the appropriate line to use the quotation mark you want (unless another plugin or CSS file is overriding things). In the section that reads: ```auto .markdown-preview-view blockquote:after { content: '\201C'; position: absolute; top: 0.30em; left: -0.45em; font-size: 6em; color: #d9d4f0; } ``` Change the `content`, replacing the `\201C` with the symbol you want to use, such as: ` content: '“';` Save the CSS file and the symbol should update in your notes. Angel ---
**Author:** ![Lithou](https://forum.obsidian.md/user_avatar/forum.obsidian.md/lithou/32/2121_2.png) [@Lithou](https://forum.obsidian.md/u/Lithou)\ **Post date:** [September 2, 2021, 7:32am UTC](https://forum.obsidian.md/t/how-to-achieve-css-code-snippets/8474/193 "2021-09-02T07:32:45Z")
@LEVAF I don’t know if anything changed that would impact that. I’ll try it out this weekend and will let you know of any changes needed. ---
**Author:** ![1dan](https://forum.obsidian.md/letter_avatar_proxy/v4/letter/1/9e8a1a/32.png) [@1dan](https://forum.obsidian.md/u/1dan)\ **Post date:** [September 13, 2021, 11:18pm UTC](https://forum.obsidian.md/t/how-to-achieve-css-code-snippets/8474/194 "2021-09-13T23:18:08Z")
Hey! I’m trying the snippet “ **pub-Image Flags.css** ” from Lithou “ **sandbox** ”. My objective was to get **IMAGE URLS SIDE-BY-SIDE** , namely with imgur urls, but it seems it only works with images from the vault - ![[]] … ☹ Any help? ---
**Author:** ![Klaas](https://forum.obsidian.md/letter_avatar_proxy/v4/letter/k/ecc23a/32.png) [@Klaas](https://forum.obsidian.md/u/Klaas)\ **Post date:** [October 8, 2021, 10:14am UTC](https://forum.obsidian.md/t/how-to-achieve-css-code-snippets/8474/195 "2021-10-08T10:14:33Z")
Murf published in the `#css-themes` channel a simple bit of CSS code to manipulate panels vertically and horizontally, a bit like a work of bricks, or _masonry_ as he calls it. I have added this to to the Github repository. The link to the Github repository is given in the OP at the top of this page. On the Github page scroll down to _Panes.md_ and click on it to open. Enjoy. ---
**Author:** ![Lithou](https://forum.obsidian.md/user_avatar/forum.obsidian.md/lithou/32/2121_2.png) [@Lithou](https://forum.obsidian.md/u/Lithou)\ **Post date:** [November 3, 2021, 3:16am UTC](https://forum.obsidian.md/t/how-to-achieve-css-code-snippets/8474/196 "2021-11-03T03:16:42Z")
I had someone reach out to me to ask if it was possible to use the image flags with other plugins that use the same “alt” section such as the image caption plugin. The short answer is: “not with css” The long answer is: The image flags will play nice with the plugins since it is looking specifically for the flags. The plugin, however, will display the flags as part of the caption. To change this, you would need to change the plugin code to filter out the flags. Here are two ways of doing this with the image-caption plugin specifically. I couldn’t find any forum posts for that specific plugin which is why I’m posting here. ## First way: This will take whatever is used before the first “+” used in the alt text. If a caption has a “+” in it, then whatever comes after it will get cut off. This would be the easiest way to do it without having to conver things since you probably have the captions already in front of your image flags. To enable this, navigate to the main.js file of the image caption plugin then replace the following code (should be around line 58): ```ts const caption_text = mutation.target.getAttribute("alt"); ``` With this: ```ts const alt = mutation.target.getAttribute("alt"); const caption_text = alt.split("+", 1); ``` Save the main.js file then reload obsidian. Note: if you update the mod, the custom changes will be overwritten. ## Second way The second way is to use a flag for captions at the end. This will look for a specific call of “-cap” followed by a space. Anything that comes after that is your caption. That includes flags so put the -cap call at the end. To do this, replace the same original text as the previous method, but use this code instead: ```ts const alt = mutation.target.getAttribute("alt"); const pattern = new RegExp('\-[cC][aA][pP]\s'); const alt_array = alt.split(pattern); const caption_text = alt_array[1]; ``` Note: you can modify the flag you use by editing the RegEx variable which is currently set to `\-[cC][aA][pP]\s`. ---
**Author:** ![Lithou](https://forum.obsidian.md/user_avatar/forum.obsidian.md/lithou/32/2121_2.png) [@Lithou](https://forum.obsidian.md/u/Lithou)\ **Post date:** [November 3, 2021, 3:31am UTC](https://forum.obsidian.md/t/how-to-achieve-css-code-snippets/8474/197 "2021-11-03T03:31:48Z")
> [@1dan](#): > > Hey! I’m trying the snippet “ **pub-Image Flags.css** ” from Lithou “ **sandbox** ”. > My objective was to get **IMAGE URLS SIDE-BY-SIDE** , namely with imgur urls, but it seems it only works with images from the vault - ![] … ☹ > Any help? @1dan , The image flags was designed for internal linked images. Given the way that internal and external links are displayed, the code won’t work out of the box for external links. I’ll look at the code for you though and see if there is a way to add support for external links. — Edit — I’ll haven’t done testing for all of the flags, but this will work for the “+side” and the size modifiers. That will work to display images side by side and change their size. Currently the CSS selectors look like this: ```css span[alt*="+side"] span[alt*="-lg"]{ ``` You will want to keep the call for the span elements since that is how embedded images are displayed. You will also want to add the same call but for the ‘img’ element. However, this will apply the styling twice to internal images since they are ‘img’ elements inside of a ‘span’ element. So you want to select ‘img’ elements that are not immediately inside a span. Both internal and external embeds have an immediate parent of a ‘p’ element. so you can call each as the immediate child of a ‘p’ element. You can use a comma between them which functions as an “OR” statement. The end result would look like this: ```css p>span[alt*="+side"],p>img[alt*="+side"]{ p>span[alt*="-lg"],p>img[alt*="-lg"] ``` Make a similar change to any flags you want to use. I’ll do some more testing and do an update to the official code for the ones that work and comments on which ones won’t work. For most use cases though, you shouldn’t have a problem. Here is an example of how it looks (preview on the left. Obsidian default theme) ![image](https://forum.obsidian.md/uploads/default/original/3X/0/5/05455a4a504dbba5d64d16272afa32994de2cc71.jpeg) ---
**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 3, 2021, 5:14pm UTC](https://forum.obsidian.md/t/how-to-achieve-css-code-snippets/8474/198 "2021-11-03T17:14:59Z")
@Lithou: for the record, the plug-in dev fixed it. ---
**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, 2021, 5:36pm UTC](https://forum.obsidian.md/t/how-to-achieve-css-code-snippets/8474/199 "2021-12-02T17:36:15Z")
A number of people have embraced Live Preview, even though it is still under development. It is already an impressive piece of work. LP hides the header hashes when the line is not active. Some people prefer to keep the hashes visible in order to see what level header they are dealing with when they encounter it. @NothingIsLost has kindly provided code (“hacky code”, according to himself), which I have added to the Github repository. The link to the Github repository is given in the OP at the top of this page. On the Github page scroll down to _Headers.md_ and click on it to open, and scrll all the way down. Enjoy. ---
**Author:** ![DitchComfort](https://forum.obsidian.md/user_avatar/forum.obsidian.md/ditchcomfort/32/8409_2.png) [@DitchComfort](https://forum.obsidian.md/u/DitchComfort)\ **Post date:** [December 19, 2021, 8:28am UTC](https://forum.obsidian.md/t/how-to-achieve-css-code-snippets/8474/200 "2021-12-19T08:28:46Z")
Hi, I was just wondering how (or if) I can make external links _italic_ in both edit/preview mode (or whatever it’s called these days…) I want it in all modes. [Previous page](https://forum.obsidian.md/t/how-to-achieve-css-code-snippets/8474.md?page=9) [Next page](https://forum.obsidian.md/t/how-to-achieve-css-code-snippets/8474.md?page=11)