#109

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:

#110

@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.

#111

so how do i use the md files you have on github as snippets?

#112

hey Klaas! doubt resolved! thanks!! just read this issue request on github https://github.com/Dmitriy-Shulha/obsidian-css-snippets/issues/8

#113

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
#114

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: Imgur: The magic of the Internet

2 Likes
#115

@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”.

#116

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.

#117

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.

#118

The Blue Topaz theme seems to use the same snippet. That’s why I wrote here.

#119

Try ![[myimage.png|+pin]].

For me, it worked.

#120

it doesn’t work. Thank you anyway

#121

@desk7: sorry, I did not bother to compare the 2.

#122

If you have other snippets enabled, there may well be one that’s interfering.

#123

no other snippet enabled. I’ll compare the 2 snippets.

#124

@desk7: this is Lithou’s last snippet, see if there’s something there.
pub-Image_Flags.css (8.0 KB)

#125

Please help if it possible.

How can I achive left-align the second task block (with bullets below), just like the first task block (tasks only), without shifting the bullet points as they are already aligned?

At the same time, without violating the markup of detached elements (bullet, task, numbered) or their subelements.

omd
omd767×663 53.7 KB

#126

@ILUMEZ: I am not a CSS expert so I cannot help you. You could try the #css-themes channel on Discord, SIRvb has recently done a fair amount with task lists.

#127

Oh, ok. Thank you very much)

#128

Those of us who use transclusions (I use them a lot), sometimes want to transclude all the text under a heading, but not necessarily the heading itself. I would resort to doing block references of each paragraph below the heading, but if there are a lot of paragraphs that could be cumbersome.

For some reason unknown even to myself I did not think it was possible, nor did I think about asking the question, if it would be possible to do a transclusion without the header. It turns out it IS possible. @SIRvb kindly provided the code after @Chromatic asked about it.

I have added it to the Github repository, file Embeds, scroll down to Tranclusion pointing to header but leave out header, only show text below . The link to the repository is given in the OP at the top of this page.
Enjoy.

2 Likes