Children bullet points instead of dashes

[jbrewer]

Thanks to @Klaas and his GitHub repository, I’ve got alot of the CSS features in one place to add snippets, etc. One that I’m currently using to replace dashes with bullets only seems to replace the parent - with a bullet, but the children after tabbing are all still dashes.

Here’s the CSS that I’m currently using:

span.cm-formatting-list-ul {
visibility: hidden !important;
}

span.cm-formatting-list-ul:after {
content: '• ';
margin-left: -15px;
color: var(–text-normal);
visibility: visible !important;
}

Any thoughts are appreciated!

[Klaas]

@jbrewer: at my end it works.

The image shows Edit mode. Could it be something to do with the theme you are using? I am just thinking out loud, I am not a CSS expert.

[jbrewer]

So, I downloaded a separate theme and just added the bullet point snippet to the code and it’s still only showing for the parent and not for the child…

It shows up on preview just fine, just not in the editor. Not a big deal at all, just wondered if there was something I wasn’t doing correctly. Thanks for all your help and time you put into the community @Klaas

[Erisred]

@jbrewer
The code you are using is first hiding the bullets from everything:
visibility: hidden;
This has the effect of displaying what you actually typed, in this case the dash.
Then you’re adding it back to the ul element manually with the ul:after bit.

The reason you don’t see it on subsequent layers is because the ‘children’ list items are actually li elements. They’re all actually li elements, to be technical.

You can try changing the second bit to something like span.cm-formatting-list-ul:after, span.cm-formatting-list-ul li but I think that will only take you another level.

I recommend removing this completely, as the default bullets are the same character you are adding back in, anyways. You can still style them if you want different colors, padding, and margins without all of this. e.g.: li::marker {color:red;} as a dead simple example.

Hope that helps. Good luck!

edit: noticed my relation lines were off. fixed!

[jbrewer]

So…

span.cm-formatting-list-li {
visibility: visible !important;
}

span.cm-formatting-list-li:marker:after {
content: '• ';
margin-left: -12px;
color: var(–text-normal);
visibility: visible !important;
}

[Erisred]

@jbrewer - If you’re game, show me what you get when you comment out all of the current code - put a /* in the line above it, and a */ in the line after. Then tell me what you’d like to change, if anything.

Start at the bottom, then work our way up.

For the record, I was advocating for removing your whole snippet above, and replacing it with something like this:

li::marker {
color: var(--text-normal);
margin-left: -12px;
}

[jbrewer]

Here it is with everything commented out…

With the initial code that I pasted above…

Now what I see when I comment out the initial code and add the new code only…

[Erisred]

Strange. Looks like you have something that’s changing default behavior.
Are you using a community theme? Is it mostly stock?

[jbrewer]

I’m using a slightly modified version of California Coast. I also turned off all the plugins and downloaded a fresh version of a completely different theme and tried the code above with no success. Not a super big deal, just one of those things that when you can’t figure it out, it gnaws at you…

At least there’s a bullet point for the main line and hopefully the WYSIWYG is coming sooner than later! Thanks @Erisred!

[Erisred]

FWIW, I tried out the California Coast theme with everything else turned off, and the bullets look fine. You have something, somewhere, driving it wonky.

Happy to (try to) help. Hope you get it sorted.

[jbrewer]

Did you input any of the custom CSS when you used the California theme with everything turned off?

Maybe I’m not using markdown correctly? When I begin with a blank page I Type “dash” then space and it appears as a bullet. When I then to create a child line it shows the "dash’ and when I then again, all previous children remain as “dashes”

[jbrewer]

@Erisred

[Erisred]

@jbrewer Aha! Bitten by Occam’s Razor again!
–the least complex answer is the preferred answer (and usually the correct one )

I’ll try to remember to ask for the raw markdown next time - So happy you figured it out!
Happy list-making!

[Klaas]

@Klaas

Could it be something to do with the theme you are using?

@jbrewer: that’s why I asked about your theme. I did not know what theme you were using, but I found that both Minimal and California Coast (which is based on Minimal) have settings that seem to be “strong” enough to interfere with snippets.

Congrats on having sorted it out.

[navakelvin]

Wow these lists look good, you say the @klass repository can you find it? Could you link it? thanks.

[jbrewer]

Thanks for the help! @Klaas

[jbrewer]

Here’s the post where he links to the GitHub repository…

"How to achieve" CSS code snippets

As a CSS newbie I have to frequently ask fellow Obsidianites what code to use to achieve a certain effect in my custom CSS sheet. I have made a habit of collecting these habits, and, to make them more easily searchable, I transferred them to …… you guessed it: an MD file. I thought it might be useful to share this with others, who can then add their own snippets, which I can add to the file. I have categorized the snippets on the basis of what they are used for, and have added # headers. You…

[Klaas]

@navakelvin: see @jbrewer’s reply with a link.

[gokul]

Is this fixed. can you share the snippet @jbrewer .
Looks cool just like Roam.
Thanks.