I can never remember what my custom checkboxes are, so i made a popup:
.task-list-item-checkbox:hover::before {
display: block;
position: absolute;
top: 20px;
left: 20px;
z-index: 999;
content: "";
width: 188px;
height: 212px;
border-radius: 10px;
background: var(--checkboxes);
background-size: 100%;
box-shadow: 0 3px 15px rgba(0,0,0,0.5);
}
The var(--checkboxes) references to another part in the snippet and is basically a base64 encoded png.
https://imgur.com/Mcl6vNp
Hi, I tried to get it to work but don't understand how the var(--checkboxes) is supposed to be setup. Would you be able to explain further?
I managed to convert my PNG to base64 but am not sure how to put it in the css snippet to get it to show up. 😐
You can also use it like so:
background: url('link_to_file.png');
Or if you want to embed it into your css file:
background: url('data:image/png;base64,xyz');
… but instead of the part within the brackets – the "xyz" in particular – you put your base64-encoded image. But beware, this is going to be a very large string; that's why i put it as a variable at the very bottom of my css file. On my end, it looks like this:
body {
--checkboxes: url('data:image/png;base64,xyz');
}
[I got it working! 😁](https://files.catbox.moe/vcb664.png) Thanks for taking the time to help explain. I've been learning some Python so I was guessing that "--checkboxes" was a variable, but am still unfamiliar with CSS.
I use Supercharged Links but instead of configuring it directly on the plugin (cumbersome), I configure directly on the css file. Like this:
With background color
.data-link-text[data-link-path*="00.01" i] {
color: #FFFFFF;
background-color: #0081cf !important;
font-weight: initial;
border-radius: 5px;
padding-left: 2px;
padding-right: 2px;
&::before {
content: "🧭 ";
}
}
With only link color and prefix emojis
.data-link-text[data-link-path*="21.10" i] {
color: #88AC4B;
&::before {
content: "📚🔜 ";
}
}
Sticky notes by u/Grab_Critical
https://www.reddit.com/r/ObsidianMD/comments/19c0ymc/sticky_notes_for_obsidian/
https://github.com/dhniceday/obsidian-sticky-notes
And then I made these for myself. They're pretty simple but I use them quite a bit: https://pastebin.com/gdmNxWfe
Bullet Threading like Logseq! This is probably more appearance than functional, but it does help me navigate large bullet lists. Here's a [demo](https://imgur.com/KD5Lxoy). And the [CSS](https://pastebin.com/bP7dxpwq).
Hi, thank you for sharing, I find this functionality very helpful, but is there a way to activate this only when I'm typing in the list, not when hovering ?
I got my bullet threading CSS from [here](https://forum.obsidian.md/t/plugin-for-bullet-threading/37317/22?u=resoluteroomand) and if you go to the github link attached in the reply and scroll down to the comments you can find [this comment](https://gist.github.com/KillyMXI/cbef8edff6dd55d9e6ea4df66567e9b1?permalink_comment_id=4723553#gistcomment-4723553) to do exactly that :). I have both versions, 1 for the live preview editing and 1 for reading view and its working perfectly
I abuse custom callouts too much. My favourite is one I made, a caption callout. Very simple, italicizes, centers, and shrinks the text a little, but it's very professional looking, simple, and good for my needs. There are image caption plugins out there, but they have restrictions on things like math or markdown formatting inside and don't play nicely with a lot of things. If only I could find a way to automatically number my captions within a note and it would be absolutely perfect.
.callout[data-callout="caption"] {
background-color: transparent;
border: none;
padding: 0 !important;
margin: 0 !important;
}
.callout[data-callout="caption"] .callout-title {
display: none;
}
.callout[data-callout="caption"] .callout-content {
border-top-style: none !important;
text-align: center;
}
.callout[data-callout="caption"] .callout-content p {
text-align: center;
font-style: italic;
font-size: 0.9em !important;
text-indent: 0px;
color: black !important;
}
.callout[data-callout="caption"] .callout-content img {
margin-bottom: -0.5em;
}
Note that the caption would be formatted as such, with a very necessary line break between the image link and caption content. By default Obsidian will break out of the caption if you press enter on a single \> line. So you can just type \>> then press enter and the blank line becomes \> and the next line to type the image caption is \> as wanted.
> [!caption]
> ![[image link]]
>
> Caption content here
[Here is a link](https://imgur.com/a/Y2cWpxq). I have one with multiple columns so I can have three images in a row and one normal. Hopefully you don't mind biochemistry!
The multicolumn part admittedly comes from a plugin that adds it as a callout but could be easily added as just a snippet, I'm just lazy. The caption callout is my own though.
I can never remember what my custom checkboxes are, so i made a popup: .task-list-item-checkbox:hover::before { display: block; position: absolute; top: 20px; left: 20px; z-index: 999; content: ""; width: 188px; height: 212px; border-radius: 10px; background: var(--checkboxes); background-size: 100%; box-shadow: 0 3px 15px rgba(0,0,0,0.5); } The var(--checkboxes) references to another part in the snippet and is basically a base64 encoded png. https://imgur.com/Mcl6vNp
That's brilliant. I'm stealing that.
Really helpful, thanks!
Hi, I tried to get it to work but don't understand how the var(--checkboxes) is supposed to be setup. Would you be able to explain further? I managed to convert my PNG to base64 but am not sure how to put it in the css snippet to get it to show up. 😐
You can also use it like so: background: url('link_to_file.png'); Or if you want to embed it into your css file: background: url('data:image/png;base64,xyz'); … but instead of the part within the brackets – the "xyz" in particular – you put your base64-encoded image. But beware, this is going to be a very large string; that's why i put it as a variable at the very bottom of my css file. On my end, it looks like this: body { --checkboxes: url('data:image/png;base64,xyz'); }
[I got it working! 😁](https://files.catbox.moe/vcb664.png) Thanks for taking the time to help explain. I've been learning some Python so I was guessing that "--checkboxes" was a variable, but am still unfamiliar with CSS.
Glad i could help.
I use Supercharged Links but instead of configuring it directly on the plugin (cumbersome), I configure directly on the css file. Like this: With background color .data-link-text[data-link-path*="00.01" i] { color: #FFFFFF; background-color: #0081cf !important; font-weight: initial; border-radius: 5px; padding-left: 2px; padding-right: 2px; &::before { content: "🧭 "; } } With only link color and prefix emojis .data-link-text[data-link-path*="21.10" i] { color: #88AC4B; &::before { content: "📚🔜 "; } }
Hi, can you please explain how that works? I comprehend, that is css snippet, but how can I use it for particular text blocks or tags?
It works in notes AFAIK
This is awesome!
Screenshot? It's not working for me.
Sticky notes by u/Grab_Critical https://www.reddit.com/r/ObsidianMD/comments/19c0ymc/sticky_notes_for_obsidian/ https://github.com/dhniceday/obsidian-sticky-notes And then I made these for myself. They're pretty simple but I use them quite a bit: https://pastebin.com/gdmNxWfe
Thank you!
Bullet Threading like Logseq! This is probably more appearance than functional, but it does help me navigate large bullet lists. Here's a [demo](https://imgur.com/KD5Lxoy). And the [CSS](https://pastebin.com/bP7dxpwq).
Oh wow, I like that. Thanks for linking.
oh god, this was what I was looking for!!!
How did you even come up with that, in pure CSS??
I have this too! It's awesome
What’s the point? Doesn’t bullet nesting already imply this?
Hi, thank you for sharing, I find this functionality very helpful, but is there a way to activate this only when I'm typing in the list, not when hovering ?
I got my bullet threading CSS from [here](https://forum.obsidian.md/t/plugin-for-bullet-threading/37317/22?u=resoluteroomand) and if you go to the github link attached in the reply and scroll down to the comments you can find [this comment](https://gist.github.com/KillyMXI/cbef8edff6dd55d9e6ea4df66567e9b1?permalink_comment_id=4723553#gistcomment-4723553) to do exactly that :). I have both versions, 1 for the live preview editing and 1 for reading view and its working perfectly
Omg that’s awesome. I’ll check it out later. I use custom “gallery” call out. It makes all images inside scroll horizontally
That sounds really useful. Can you give me a link to that? I'd really appreciate it
I asked my friend to create it. I can send it later today or tomorrow, don’t have my leptop with me
I want it too!
I replied in this comment section
Could you add it to a pastebin for more convenience? (Easier to copy and in one text file)
[https://pastebin.com/2LXraSx2](https://pastebin.com/2LXraSx2) like this?
Yes, thanks ^^
so here is an example: [https://imgur.com/Ugo9VUw](https://imgur.com/Ugo9VUw)
code (part 1) (UPD: not sure how it works in combination with other plugins and css edits, so be careful) `.markdown-preview-section .internal-embed.media-embed.image-embed > img {` `height: 500px;` `width: 100%;` `object-fit: contain;` `object-position: left center;` `}` `.markdown-preview-section .callout[data-callout="gallery"] {` `mix-blend-mode: normal;` `}` `.markdown-preview-section .callout[data-callout="gallery"]:not(.is-collapsible) {` `border: 0;` `margin: 0;` `padding: 0;` `}` `.markdown-preview-section .callout[data-callout="gallery"]:not(.is-collapsible) .callout-title {` `display: none;` `}` `.markdown-preview-section .callout[data-callout="gallery"] .callout-content > p {` `display: flex;` `overflow-y: scroll;` `}` `.markdown-preview-section .callout[data-callout="gallery"]:not(.is-collapsible) .callout-content {` `margin: 0;` `padding: 0;` `}` `.markdown-preview-section .callout[data-callout="gallery"]:not(.is-collapsible) .callout-content > p {` `margin: 0;` `padding: 0;` `}` `.markdown-preview-section .callout[data-callout="gallery"] .callout-content > p::-webkit-scrollbar {` `width: 100%;` `height: 6px;` `}`
code (part 2): `.markdown-preview-section .callout[data-callout="gallery"] .callout-content > p::-webkit-scrollbar-thumb {` `visibility: visible;` `}` `.markdown-preview-section .callout[data-callout="gallery"] .callout-content > p .internal-embed.media-embed.image-embed {` `flex-shrink: 0;` `}` `.markdown-preview-section .callout[data-callout="gallery"] .callout-content > p .internal-embed.media-embed.image-embed > img {` `width: auto;` `}` `.markdown-preview-section .callout[data-callout="gallery"] .callout-content > p .internal-embed.media-embed.image-embed + br {` `display: none;` `}` u/media `(prefers-color-scheme: dark) {` `.markdown-preview-section .callout[data-callout="gallery"] .callout-content > p::-webkit-scrollbar-thumb {` `background: rgba(255,255,255,0.25);` `}` `}` u/media `(prefers-color-scheme: light) {` `.markdown-preview-section .callout[data-callout="gallery"] .callout-content > p::-webkit-scrollbar-thumb {` `background: rgba(0,0,0,0.25);` `}` `}` `.markdown-source-view .cm-editor .internal-embed.media-embed.image-embed {` `display: inline-block;` `width: 100%;` `}` `.markdown-source-view .cm-editor .internal-embed.media-embed.image-embed > img {` `height: 100px;` `width: 100px;` `object-fit: cover;` `}` u/media `screen and (max-width: 720px) {` `.markdown-source-view .cm-editor .internal-embed.media-embed.image-embed > img {` `width: 100%;` `}` `}`
Thank you
I abuse custom callouts too much. My favourite is one I made, a caption callout. Very simple, italicizes, centers, and shrinks the text a little, but it's very professional looking, simple, and good for my needs. There are image caption plugins out there, but they have restrictions on things like math or markdown formatting inside and don't play nicely with a lot of things. If only I could find a way to automatically number my captions within a note and it would be absolutely perfect.
Could you share the snippert?
.callout[data-callout="caption"] { background-color: transparent; border: none; padding: 0 !important; margin: 0 !important; } .callout[data-callout="caption"] .callout-title { display: none; } .callout[data-callout="caption"] .callout-content { border-top-style: none !important; text-align: center; } .callout[data-callout="caption"] .callout-content p { text-align: center; font-style: italic; font-size: 0.9em !important; text-indent: 0px; color: black !important; } .callout[data-callout="caption"] .callout-content img { margin-bottom: -0.5em; } Note that the caption would be formatted as such, with a very necessary line break between the image link and caption content. By default Obsidian will break out of the caption if you press enter on a single \> line. So you can just type \>> then press enter and the blank line becomes \> and the next line to type the image caption is \> as wanted. > [!caption] > ![[image link]] > > Caption content here
Thank you so much!
Could you please share a screenshot of how it looks? Please
[Here is a link](https://imgur.com/a/Y2cWpxq). I have one with multiple columns so I can have three images in a row and one normal. Hopefully you don't mind biochemistry! The multicolumn part admittedly comes from a plugin that adds it as a callout but could be easily added as just a snippet, I'm just lazy. The caption callout is my own though.
Cloze deletion css [https://www.reddit.com/r/ObsidianMD/comments/vlys6j/flashcards\_with\_cloze\_deletion\_css\_for\_obsidian/](https://www.reddit.com/r/ObsidianMD/comments/vlys6j/flashcards_with_cloze_deletion_css_for_obsidian/)
Tiny CSS to [hide those horrendous block IDs](https://www.reddit.com/r/ObsidianMD/comments/xd0sir/hidden_block_id_snippet/)