The procedure is the same one you would use with a normal todo item in edit mode. I’m just listing it out step by step, as it isn’t visually obvious with the new styling.
Maybe I misunderstand you, but the normal step to create a checkbox:
- type
-, then space; - type
[, then space, then], then space again; - still on the same line type a text for the checkbox.
Now, to place a checkmark, click once on the checkbox when in Preview. This is the normal step when one encounters a checkbox on a webpage.
That’s all there is to it, and it is intuitive. TBH, I don’t find your procedure intuitive.
Minimalistic Red / Green checkboxes
/* CHECKBOX: Green / Red color */
.markdown-preview-view .task-list-item-checkbox{
-webkit-appearance: none;
box-sizing: border-box;
border: 1px solid var(--text-muted);
border-radius: 2px;
position: relative;
width: 1.3em;
height: 1.3em;
margin: 0;
outline: none;
margin-right: 4px;
margin-bottom: 2px;
cursor: pointer;
vertical-align: baseline;
background-color: #d068688f;
}
.markdown-preview-view .task-list-item-checkbox:checked {
background-color: #68d0688f;
}
4 Likes
Stylish blockquotes
0.7.6 / 0.8.4 / 0.8.5 Compatible
Add quotation mark before quote
/* Add quotation character before quote */
blockquote:before {
font: 14px/20px italic Times, serif;
content: "“";
font-size: 3em;
line-height: 0.1em;
vertical-align: -0.4em;
}
blockquote p { display: inline; }
Remove left margin
/* Remove blockquote left margin */
blockquote {
margin-inline-start: 0;
}
19 Likes
Does not work for me.
Remove Yaml Front Matter from embeds
I had to write a new version for obsidian version 0.8.5, If you are on obsidian 0.8.4 or below, please use the other version!
0.8.5+ Compatible
Please note that Obsidian did add an option to hide the yaml frontmatter in Editor > Show frontmatter. If you turn that option off, you can’t see the yaml in preview mode and for previewed content.
This CSS tweak is still relevant if you have this option turned on but you still don’t want to see the frontmatter for previewed content (when you hover the mouse on a note) but still see it in preview mode.
/* Remove embed yaml front matter */
.markdown-embed-content > .language-yaml { display: none; }
0.7.6 / 0.8.4 Compatible
Since obsidian version 0.8.5, the yaml header is understood by obsidian so you don’t need to use that version if you have Obsidian version 0.8.5+.
Code
v1
/* Remove embed yaml first separator */
.markdown-embed-content > hr:first-child { display: none; }
/* Remove embed yaml content */
.markdown-embed-content > hr:first-child + p { display: none; }
/* Remove embed yaml second separator (if empty) */
.markdown-embed-content > hr:first-child + hr { display: none; }
/* Remove embed yaml second separator */
.markdown-embed-content > hr:first-child + p + hr { display: none; }
v2 (works with longer yaml frontmatter blocks)
/* Remove first hr */
.markdown-embed-content > hr:first-child { display: none; }
/* Remove blocks after first hr (max 5 blocks - repeat the pattern for more...) */
.markdown-embed-content > hr:first-child + :not(hr) { display: none; }
.markdown-embed-content > hr:first-child + :not(hr) + :not(hr) { display: none; }
.markdown-embed-content > hr:first-child + :not(hr) + :not(hr) + :not(hr) { display: none; }
.markdown-embed-content > hr:first-child + :not(hr) + :not(hr) + :not(hr) + :not(hr) { display: none; }
.markdown-embed-content > hr:first-child + :not(hr) + :not(hr) + :not(hr) + :not(hr) + :not(hr) { display: none; }
/* Remove second hr (max after 5 blocks - repeat the pattern for more...) */
.markdown-embed-content > hr:first-child + :not(hr) + hr { display: none; }
.markdown-embed-content > hr:first-child + :not(hr) + :not(hr) + hr { display: none; }
.markdown-embed-content > hr:first-child + :not(hr) + :not(hr) + :not(hr) + hr { display: none; }
.markdown-embed-content > hr:first-child + :not(hr) + :not(hr) + :not(hr) + :not(hr) + hr { display: none; }
.markdown-embed-content > hr:first-child + :not(hr) + :not(hr) + :not(hr) + :not(hr) + :not(hr) + hr { display: none; }
Comparison
Before
After
Works also with Naked embed
4 Likes
Pasting the code into my css gave me this in Editor
hi, I’m new to CSS. This indent looks awesome and I figure I just need to paste them into the body section of my CSS file and that’s all done?
2 Likes
Replace the above line (Located in the second block of code) with
color: transparent !important;
2 Likes
Adding all kinds of embedded lists:
.cm-hmd-list-indent .cm-tab,
ul ul,
ol ul,
ul ol,
ol ol {
position: relative;
}
.cm-hmd-list-indent .cm-tab::before,
ul ul::before,
ol ul::before,
ul ol::before,
ol ol::before {
content:'';
border-left: 1px solid var(--background-modifier-border);
position: absolute;
}
.cm-hmd-list-indent .cm-tab::before { left: 0; top: -5px; bottom: -4px; }
ul ul::before,
ol ul::before,
ul ol::before,
ol ol::before {
left: -11px;
top: 0;
bottom: 0;
}
3 Likes
Is there a way to apply formatting to the filenames in the File Explorer? I would love to be able to apply colored Tag Pills to filenames, so that if I have notes related to a #podcast or #meeting or #PKM, they would stand out when browsing files.
1 Like
Can you clarify what this is supposed to mean?
1 Like
The original version only supports bullet points nested in bullet points, so I added all four combinations of bullet points and numbered points 
The pills looks great but can’t seem to adjust the font color. I’m getting a really low contrast font color that is hard to read. Tried the obvious color: white; and even some other more ridiculous colors to make sure it was in fact not working. Any ideas?
Highlighting for progressive summarization
So as Tiago Forte says, glanceability is important when one is progressively summarizing. Glanceability means that you can get the gist of the text by one look. And for that, he first boldens the most important parts, and then he again highlights the extremely important ones. Markdown doesn’t support such a thing (as far as I know). So I repurposed the italic function.
compatible with: v 0.7.6.
.cm-em {
background-color: #39717d;
font-style: normal;
}
and if you want to change the preview as well, add this, also:
em {
background-color: #39717d;
font-style: normal;
}
6 Likes
Obsidian already has support for highlighting text, it’s done through ==highlighted text==
4 Likes
OH that’s great! I don’t know if I should delete my post here now. Should I?
maybe try color: white !important; ? and put the tagpills rules near the end of your css.
1 Like
Forgive me I sound facetious, but aren’t highlighting and boldening, as well as italicising, underlining, and using red (or colours) for the font of certain parts of text all formatting features that have been around for yonks? And we know how to implement that kind of formatting, as @Meins points out for highlighting.
Having read Tiago Forte’s article, his point is not the special formatting per se, but the use of it to guide him in his progressive summarisation process.
1 Like
You are right. I just don’t know if I should delete my post or not.
1 Like