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
If you have other snippets enabled, there may well be one that’s interfering.
no other snippet enabled. I’ll compare the 2 snippets.
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.
@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.
Oh, ok. Thank you very much)
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.
3 Likes
This is great, thanks very much.
A question - when I add a tag, suddenly the image enlarges on mouse-over. Is there a way to stop this?
@Spidrax: as I pointed out in the 1st comment at the top of this page, I am not a CSS expert. And even though that comment was written 5 months ago, it still applies. Yes, I do feel a bit more comfortable with CSS, but that only goes as far as knowing how to tweak/amend bits of the code of a snippet I get from someone.
As for your issue, it seems strange. The image enlarge is probably due to zoom code - check if it exists in the theme you are using or if you have a snippet enabled for it - whereas inserting a tag should have no secondary effect.
If you are unable to figure it out I suggest you ask in Obsidian’s #css-themes channel on Discord. There are many friendly, helpful people active who have a lot of CSS expertise, I am sure you’ll get a good answer there.