"How to achieve" CSS code snippets

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:

It is possible to add a background image to your notes. You can only reference an image on the web. Nevertheless, if you do want to use your own image, upload it to a specialized website, e.g. Imgur, then reference it there. Check out the “Images” header.

I have also added some code to hide and show on hover the Preview/Edit icon in the ribbon. I don’t use that icon because I use Cmd/Ctrl+E. Check out header “Ribbons”.

You can download version 19 in the OP above.


This is the best thread and most regularly updated CSS thread. Thank you so much Klaas


If you have more time (like me :joy:)
you can use Node.js to impersonate the local server so you can access the localhost:1080 to get the local image
Unfortunately,I don’t script this process…

@OliverM: I am glad you like it. Thanks for the kind words.

@Rainbow_CH: I don’t know what you mean or if/how that process can help me.

I mean if you want to resize the picture, like this

Obsidian does not support dragging the location of local images, so you can use http-server to simulate your computer into a Web Server, so that you can set the size and location of local images.

I tried to achieve this image in CSS before.
Unfortunately, I’ve been using CSS for too short a time to be successful.
To be honest, I wonder if there are other ways to do something like this (after all, it takes extra software and configuration).

You can achieve this pretty easily with a CSS but it’s easier to explain/show than type out so I’ll record a video. This is an example of what it looks like though:

You can also put images and quotes inline with paragraph elements in a similar way. You can then get as creative as you want with other elements. Here’s a random hipster-ipsum generated example with two different image types (it links to the same image but calls a different style in the MD file) and an embedded reference:


@Lithou: wow, that’s impressive. Can you share the CSS code?

Oh my God, this is so great…
Could you explain your practice in detail?
It helps me a lot! :kissing_heart:

@Klaas @Rainbow_CH

Tutorial video:

The good news: I kept my promise and recorded a video on how to do these snippets
The bad news: It was over 3 hours long and was mostly me rambling and going off on tangents.
The better news: I was procrastinating important things this weekend.
How is that better news?: It means that I downloaded resolve then spent the entire weekend playing around with it. I also managed to edit 3 hours of content down to under 12 mins.

Here’s a link: https://youtu.be/Q5GifDMEYSw

Image Pseudo Class Snippet:

Here is the code for the image snippets. Most of the attributes are customizable so feel free to change them to fit your theme/use case. You can also copy/paste and change the reference to make as many different pseudo classes as you want.

div[src$="#portrait"] {
  position: absolute;
  right: 0px;
  top: 0px;
  width: 200px;
  clip-path: ellipse(32% 45% at 50% 50%);

div[src$="#side"] {
  position: relative;
  float: left;
  width: 35%;
  margin-top: 5px;
  margin-left: 10px;
  margin-right: 12px;

Side-bar Quote Snippet:

This is for making a side bar quote that is often seen in webpages, books, physical print media. There are some drawbacks to this (see video for details) compared to the images. Also, feel free to change the details to match your theme (especially the font options since those I chose at random and probably won’t match your theme or anything else)

div[src$="-sbq"] {
    background-color: #6096cc;
    position: relative;
    right: -20px;
    float: right;
    clip-path: polygon(0% 0%,100% 0%,100% 80%,44% 80%,20% 100%,25% 80%,0% 80%);
    width: 35%;
    margin-top: 5px;
    margin-left: 10px; 
  div[src$="-sbq"] div.markdown-embed-link {
    visibility: hidden;
  div[src$="-sbq"] div.markdown-embed {
    margin-top: 0px;
    margin-bottom: 0px;
  div[src$="-sbq"] .markdown-preview-view {
    padding: 3px;
    padding-left: 10px;
    padding-bottom: 40px;
  div[src$="-sbq"] .markdown-preview-view p {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: larger;
    font-style: italic;
    color: black;

Thank you for sharing

@Lithou: my 1st reaction: thanks a lot. :+1:

Update: I just watched the video. Absolutely amazing. You should mention this in the #css-themes channel on Discord !! I will also add it to my public code snippets file at the top of this page.

Even resident CSS guru (:grinning_face_with_smiling_eyes:) @death.au will probably be impressed with your code.

I want to thank you for that video, which is a very good presentation, you speak clearly and at the right speed, and explain the various CSS elements well. I am truly impressed!

Don’t forget the #css-themes channel.


This is marvellous @Lithou, thankyou so much. I have called up an iFrame with the #portrait snippet, and I now have a clock (onliveclock.com) always in the corner of my (admittedly preview only) window as I scroll up and down. Love it!

1 Like

even resident CSS guru (:grinning_face_with_smiling_eyes:) @death.au will probably be impressed.

Yep. This is some good stuff! Using suffixes on links and targeting them specifically is genius!

Also, I found a way to get around your blockref problem for the Side-bar Quote Snippet. Change [src$="-sbq"] to [alt="sbq"] and use the pipe syntax to specify that alt (e.g. ![[I am freeman#^234f1c|sbq]]).
Interestingly, exactly the same thing (pipe syntax / alt) works for images too.

I have added code for coloring italic and bold font in Edit and Preview modes - see section “Fonts” in the file.

I have also registered Lithou’s amazing code for oval images, call-outs, images in sidebar. I have listed it under “Special effects” in the file.

You’ll find all this in version 20 of the file in the OP above.

1 Like