if I add the modifier (|+side -med), this is what happens.
For me, to put image links in the single line, side by side in Edit mode solved the step-like problem.
1 Like
Yeah. With the change of how Obsidian handles images, you will want to put images on the same line in edit mode if you want them grouped in preview.
For a grid view, you have two options. They are detailed here: Grid Display Testing - Obsidian Publish
1 Like
Radical, thank you very much. Works perfect.
To anyone else, whoâs like me and would like to use the grid view syntax from the Image Flags for markdown embeds as well. Just add this line to the snippet css.
.markdown-preview-view .internal-embed:not(.image-embed)[alt*="+grid"]{
display:table-cell;
}
PS: I hope I posted this to the right place Iâm totally new to this forum (or forums in general for that matter)
You may have noticed in Edit mode that the line numbers donât line up with the text. @death.au has kindly provided a fix for that , and I have added it to the Github repository, file Gutter line numbers . The link to the repository is given in the OP at the top of this page.
Enjoy.
It might just be me, but when I look through the CSS examples in Publish view, all the images look the same (mostly the same image, repeated over-and-over, with explanations clearly written between each, yet the images do not change to match the description. For example, I do not see a tape effect across an image. Just the same color-palette image. (Apologies if I am missing something keyâŚ)
1 Like
hi! please can you run me through the baby steps of using the code snippets from the .md files as .css files? can i automatically extract all .md as .css into the css-snippets folder? i am a newbie to everything! & it all looks exciting! thanks! 
@vague: md and css are 2 different things. md is a formatting system whereas css is a rendering system that tells an app, Obsidian in this case, how to present a certain feature or features. css is a set of rules.
So, you cannot âextract md as cssâ, css code has to be written separately.
Referring to you quote, I was referring to a css file I have that has 1200 lines of css. That was before Obsidian had the snippets possibility. Snippets are small bits of css code (usually) for 1 very specific feature, e.g. to set the font for a theme, or the way blockquotes are rendered, and just about everything else to set.
The advantage of the Obsidian snippet system is that you can enable/disable individual snippets. Furthermore, the snippets are independent from the theme you are using. So, say for example I have a snippet that determines how a horizontal line is rendered, I can use that snippet with any theme I want to use.
It can happen that 2 snippets interfere with one another or with the theme, then I can disable the snippet causing the problem.
The snippet folder is located in the .obsidian folder in your vault. If it is not there you can create it manually. Alternatively, if you open the Obsidian settings, then Appearance tab (on the left), scroll down to âCSS snippetsâ and click on the folder icon.
so how do i use the md files you have on github as snippets?
hey Klaas! doubt resolved! thanks!! just read this issue request on github https://github.com/Dmitriy-Shulha/obsidian-css-snippets/issues/8
If you open one of those md files youâll see they have css code only in them. That code can be copy/pasted.
I never thought about it, but I agree that the .md extension is confusing. I will bring it to Dmitriyâs attention.
BTW, the repository is under Dmitriyâs name, and he set it up after asking me if he could use all of my snippets for it, which I agreed to.
1 Like
A couple of people asked me about how I do the paraphrasing blocks seen in my live notetaking session, so, here goes:
The snippet I use is here: -palatinate/fancy-blockquote.css at main ¡ eleanorkonik/-palatinate ¡ GitHub
Quoting the bot from our Discord:
Custom CSS lets your completely customize how your Obsidian looks.
To enable custom CSS, go to Settings => Appearance and toggle on âcustom CSSâ. From there, you can choose among a list of community themes, which appears in settings after you enable the custom CSS plugin.
You can further customize your theme by modifying its file in .obsidian/themes or by using CSS snippets. We recommend editing the CSS file using something like Visual Studio Code or Sublime Text to properly highlight and format it, as invalid CSS will not work.
Thereâs a wonderful guide on our forum that should get you comfortable with working with CSS, if youâd like to make tweaks yourself: https://forum.obsidian.md/t/getting-comfortable-with-obsidian-css. To use a snippet, simply save it in a CSS file in
<your vault root>/.obsidian/snippets/. Any change to that file will apply to Obsidian live.
Remember: > and <blockquote> are the same from the CSS perspective â > is the âmarkdownâ encoding and <blockquote> is the âHTMLâ encoding. To get it to work youâll need to do <blockquote class="paraphrase">paraphrased text here</blockquote> â itâs actually HTML, not Markdown, but basically youâre telling it to render the more specific version of the styling.
Note that .obsidian/snippets/ is a hidden folder (thatâs what the . means) so youâll need to override your computerâs settings if you cant find it. Directions for that are here: How To View Hidden Files (Win, OS X, Android) | Ubergizmo
@foreveryone in the Discord put together this amazing visual tutorial that might help as well: https://imgur.com/aB3eMRn
2 Likes
@EleanorKonik: 1 small correction, if I may.
In the bot quote it says:
That is now deprecated since we use snippets. In fact, when you to that Settings part, you will a remark that it is not recommended to use âcustom CSSâ.
Hello everyone!
I have Obsidian 0.11.9 with the latest Blue Topaz theme. I canât get taped image and pinned image to work. It uses a CSS snippet inside the theme css.
I put this in a note
![[myimage.png#pin]]
but it doesnât work.
Do you have the same problem? I also tried it in safe mode and it still doesnât work.
Since you posted on this page, I suggest you click on the Github link in the topmost comment of this page.
Then, scroll down to Special effects, and in there look at the code provided by Gabroel and code by Lithou. That is what I use.
The Blue Topaz theme seems to use the same snippet. Thatâs why I wrote here.
Try ![[myimage.png|+pin]].
For me, it worked.
it doesnât work. Thank you anyway