The last 2 were the ones that almost worked (see capture below)
What I’m trying to do
However it doesn’t do what I’m wishing for. I want to change the bullet list markdown so when I insert one it looks like this:
— Level 1 list
» Level 2 list
» Level 3 list
» …
Do you think it’s possible without having to write everything in HTML? Because I do like the indentation that the bullet list markdown present and the ability to toggle it. I also do have a HUGE amount of lists to do so the less tedious it could be would be the best.
Send help please,
A lost and desperate person who spent way too much time trying to figure this out.
PS: I’m not an English native speaker so please excuse my bad spelling
That should be possible. I don’t know how to do it, but if you don’t get an answer here, try the Obsidian Discord’s #appearance channel. The people there k ow a lot about CSS and like to help.
i think snippet below is sth u looking for? anyway, some effects like box shadow (when hover and collapsed not coded here, but it’s possible, so u can try meddle with it).
on that note, post obsidian v1.x, the bullets are using background color with height and width control to achieve the bullet effects. as such e.g. width 5px, height 5px and radius 100% gives u a nice round disc look. hence why ur “chevron” bullet is flushed to the lower part (when u replace the content.
/* replace the default "bullet" with "chevron" icon, unset default bullet */
:is(.cm-fold-indicator:hover,*) ~ .cm-formatting.cm-formatting-list .list-bullet::after,
.list-bullet::after {
content:'»';
width: unset; height: unset;
background-color: unset;
box-shadow: none;
}
/* add text color and replace the collapsed state of the default like bg and box shadow */
.is-collapsed ~ .cm-formatting-list .list-bullet::after,
li.is-collapsed .list-bullet::after {
color: var(--list-marker-color-collapsed);
box-shadow: none;
background-color: transparent;
}
It worked! Thank you so much! Would you maybe know How I could change the “main bullet” as an em dash and the rest of the bullets as chevron ones?
Thank you so so much for the help!
@Wiccarium added a few lines in the middle part there. i try to follow conventions as much as i know. if u find it break (possible if u use some extensive community theme), we may need to increase the specificity to make it get priority
/* replace the default "bullet" with "chevron" icon, unset default bullet */
:is(.cm-fold-indicator:hover,*) ~ .cm-formatting.cm-formatting-list .list-bullet::after,
.list-bullet::after {
content:'»';
width: unset; height: unset;
background-color: unset;
box-shadow: none;
}
/* make first bullet em dash */
.HyperMD-list-line-1 .cm-formatting.cm-formatting-list .list-bullet::after,
.HyperMD-list-line-1 :is(.cm-fold-indicator:hover,*) ~ .cm-formatting.cm-formatting-list .list-bullet::after,
div > ul > li > .list-bullet::after {
content:'—';
}
/* add text color and replace the collapsed state of the default like bg and box shadow */
.is-collapsed ~ .cm-formatting-list .list-bullet::after,
li.is-collapsed .list-bullet::after {
color: var(--list-marker-color-collapsed);
box-shadow: none;
background-color: transparent;
}
