Changing bullet list markdown into personalized list

Hello! I feel like I’ve search through every forum and possible solutions to my problem but I can’t find any so I’m posting my problem here.

What I’ve tried

I’ve tried to do a custom css through the snippets and tried multiple css code such as:

  • ul li, ul li li, ul li li li
  • .cm-s-obsidian div:not(.CodeMirror-activeline) > pre.CodeMirror-line span.cm-formatting-list-ul::before
  • .cm-s-obsidian div:not(.CodeMirror-activeline) > pre.CodeMirror-line span.cm-formatting-list-ul.cm-list-1::before
  • .markdown-preview-view ul li::marker
  • .markdown-source-view.mod-cm6 .list-bullet:after

The last 2 were the ones that almost worked (see capture below)
Capture d’écran 2023-01-08 à 17.52.23

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.

1 Like

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;
    }

image

2 Likes

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;
    }

3 Likes

Thank you so much it’s exactly what I wanted to do! Thanks for all the help ~

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.