"How to achieve" CSS code snippets

Really great work.

How to batch add “-med” to all images ?

I have added code showing how to change the color of bold and italic text to the Github repository. You can find it at the bottom of the file Fonts.

The Github repository page link is given in the OP at the top of this page.
Enjoy.

If you use footnotes, you may have noticed that the supscripted footnote number widens the line a bit.

@phlind has kindly provided a simple block of code to correct this, and I have added it to the Github repository, file Footnotes. The link to the repository is given in the OP at the top of this page.
Enjoy.

1 Like

Hey @Lithou,

I’m a noob with code, with no knowledge. Is it possible to achieve this result? Like with the side-by-side grid?

Right now mine shows up like this, with your code stored at the bottom of the github link you attached:

Documentation

I’m not sure.
Maybe, you didn’t install & enable the snippet for those function, or you didn’t add some flags such as
[[image.png|+side -med]]

1 Like

Can you show me what your edit mode looks like for those pictures? I can help you troubleshoot it.

Thank you.

if I add the modifier (|+side -med), this is what happens.

I was hoping for something more uniform like the Display side by side image grid - #51

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! :slight_smile:

@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