@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:
7 Likes
Oh my God, this is so great…
Could you explain your practice in detail?
It helps me a lot! 
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;
}
16 Likes
Thank you for sharing
@Lithou: my 1st reaction: thanks a lot. 
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 (
) @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.
2 Likes
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 (
) @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
Background Images from Local files:
So… Lithou is avoiding studying for finals… which means cool CSS stuff!
How to do it:
- Embed an image into a document
- Make sure preview mode is visible
- Open up the developers tools
- Find that image in the elements list
- Click on “Properties” tab then expand the first item “img”
- There will be an absolute file path listed after "src: “path goes here”
- Copy/paste that path into your css as a background-image
Here is an example:
Endless Possibilities:
- You can use the background in general such as preview mode/edit mode.
- You can use it for preview mode on pages with a certain cssclass in their meta data
- you can use it on other elements of obsidian.
- Want to make a divider bar look like wood?
- Want to make your title bar look like some diamond plate?
- How about combining two backgrounds for a cool stylized parchment effect?
- Want to do all at the same time so it clashes horribly?
Go right ahead I’m not here to tell you how to live your life. 
Future / Coming Soon:
Putting together some of the psuedo class stuff (thanks to @death.au and some others on discord/forums) and some bg stuff and a few other random items. Still super buggy and working on a few CSS odities, but here’s a preview. Will update with snippets to add to @Klaas 's list when stable.
12 Likes
@Lithou: it seems this guru cannot be held back either 
Any chance to make some of this incredible stuff into (a) plug-in(s)?
Yes, I also designed a CSS style from your interesting approach
When you click on the “I”, it will show you the hidden thing
I feel interesting as a CSS novice
2 Likes
Weird… all this stuff has stopped working in my Obsidian. I don’t think I have changed anything, just turned my machine off last night, and turned it on today. All the positioning commands have stopped working. I’ve tried all the obvious stuff (restarting Obs, restarting my machine, turning off and restarting the snippets, changing the ‘float’, and positioning measurements)… Nothing. This is a little heart-breaking
Can you suggest anything I have missed?
I tracked down the source of the problem - the ‘active-line highlight’ snip that @mano put on Discord. Not sure what in there specifically did it, but I can live without it; the floating images and quotes are much more important to me.
The Problem of Perfection
I love tinkering around with things and experimenting with CSS brings me lots of excitement and joy. I like sharing cool ideas I’ve had or promising discoveries. When I share something, others will have incredible improvements or creative uses for my ideas that I never would have thought of on my own.
The problem is that when someone asks how I did something or asks for a CSS snippet, I don’t want to share it because an idea is just that, an idea. It isn’t robust, it isn’t complete, it isn’t polished. I’m also a socially prescribed perfectionist so I often will say “You will have to wait”
Opening Up the Garage Door
The truth is, no idea comes fully formed, no project is ever complete. Even though things may be unfinished, unpolished, and incredibly messy, they still benefit from collaboration and questions (especially in this community where people are so helpful and constructive).
I’ve decided that in this I want to “work with the garage door up” to borrow a phrase. I created and uploaded a sandbox vault into a git repository. This is the vault that I will use for tinkering around with CSS, trying to reproduce bugs and other behaviour, and writing plugins if/when I get to that point. I just started to solidify my notes and CSS snippets so you won’t find everything there just yet, but you will find the CSS that I used for the page layout.
Inside the Garage
Just like any workspace there will be tools and projects lying around in various stages of completion. However, I hope that you will find insight, help, or simply have fun peaking over my shoulder to ask “what ya’ doin there?” I am hoping this will slowly help combat my unhealthy levels of socially prescribed perfectionism and provide a bit of accountability for me to not procrastinate some basic organization along the way.
Feel free to comment, clone, fork, create pull requests, etc. Ask questions here or on the discord. All those things. If you’d like to join me, send me a message and we can look at setting up some branches for various projects to collaborate on. Thanks for letting me share.
Go have fun: https://github.com/Lithou/Sandbox
4 Likes
Blowing my mind. This is so generous. Onward noble knight!
1 Like
All the code in the file has now been put on Github, courtesy of StreLock. You can view or download the file here. If you have a Github account you can add interesting code too.
Today I added some more amazing code from Gabroel: sticky notes, and images with a scotch tape effect.
You can find this code under the heading “Special effects”. Enjoy.
Note: I will continue informing people of new additions to the Github file via this Obsidian forum page.
2 Likes