I have unordered lists each starting with a small image followed by text. I’m using a CSS snippet for dashboards from one of PAX’s YouTube videos. I want to completely remove all of the bullets from my lists and use the small images as visual bullet points. The closest I found to a solution was in the dashboard snippet:
/* Updated 2023-11-02 */
.dashboard {
font-family: inherit;
padding-left: 5px !important;
padding-right: 5px !important;
padding-top: 10px !important;
}
.dashboard .markdown-preview-section {
max-width: 100%;
}
/* Title at top of the document */
.dashboard .markdown-preview-section .title {
top: 50px;
position: absolute;
font-size: 26pt !important;
font-weight: bolder;
letter-spacing: 8px;
}
.dashboard h1 {
border-bottom-style: dotted !important;
border-width: 1px !important;
padding-bottom: 3px !important;
}
/* Get rid of the parent bullet */
.dashboard div.markdown-preview-section > div > ul > li > div.list-bullet {
display: none !important;
}
/* Remove the indentation guide lines */
.dashboard.markdown-rendered.show-indentation-guide li > ul::before,
.dashboard.markdown-rendered.show-indentation-guide li > ol::before {
display: none;
}
div.markdown-preview-section > div > ul.has-list-bullet > li {
padding-left: 0p !important;
}
.dashboard div > ul {
list-style: none;
display: flex;
column-gap: 10px;
flex-flow: row wrap;
}
.dashboard div > ul > li {
min-width: 350px;
width: 15%;
}
/* Dataview support */
.dashboard ul.dataview {
row-gap: 0px !important;
list-style-type: disc !important;
}
I noticed a portion of code labelled “Get rid of the parent bullet”. I’m hoping there is a simple way to also get rid of the children bullets as well, but I haven’t a clue as to what syntax to use. Any help would be greatly appreciated.
You could try this. It removes all bullets in all notes (in Live Preview and Reading view; Source mode still has a - ).
body {
--list-bullet-size: 0; /* default - 0.3em */
}
Or as a cssclass to only affect notes with cssclasses: no-bullets in the YAML/Properties:
.no-bullets {
--list-bullet-size: 0;
}
Neither of those worked. I guess there’s a conflict with other snippets.
Yeah, could be other CSS or your community theme causing issues. This is what I see on my end using the cssclass version.
I’m pretty sure it would be related to this line in the dashboard snippet:
ariehen snippet would “hide” the bullet but the space is still there
the dasboard CSS will “delete” the entire space with that display: none;
can you share screenshot you have right now related to above? i’m guessing you’re doing CSS snippet replacing ::marker from bullet to your own image. if that’s the case, Obsidian hides the li::marker and instead uses li > span.list-bullet::after to emulate a new bullet
1 Like
I’m not using any replacement snippets, I’m just embedding an image after the bullet point. As you can see from the screenshot, the parent bullet(Active Skills) is hidden/removed so that part of the dashboard snippet works. I just need the code I should add to the dashboard snippet to also hide/remove the children bullet points. That way, I can still see bullet points if I’m not using the dashboard css class.
Looking around, I just re-stumbled onto your MCL snippets @efemkay. I think I may try using them instead of the dashboard snippet which also seems to be affecting the Note Toolbar plugin.
I’m using your MCL list-grid CSS @efemkay and it’s displaying my content very similarly to the dashboard snippet. Now I’m back to trying to hide/remove all of the bullets. I always use dark mode, so if there is a way to change the bullet color to black, that would be a usable work around for me. Somehow utilizing display: none would work just as well though. Also, is there any way to have different widths per column? I don’t see an option for that in Style Settings.
your original post on the dashboard css seems to have a few bugs (incorrect syntax and wrong selectors). it doesn’t directly impact what you want to do for now, so i park that aside first.
btw, you can just add this simple snippet to get to the screenshot below
.dashboard div > ul li li > .list-bullet {
display: none;
}
.dashboard .HyperMD-list-line:not(.HyperMD-list-line-1) > .cm-formatting-list-ul {
visibility: hidden;
}
without
with (together with your dashboard css)
here’s the raw markdown
---
cssclasses:
- dashboard
---
- ## Header Bullet
- 🕛 Bullet 1
- ☀️ Bullet 2
- 🧭 Bullet 3
- 🎯 Bullet 3
- 🏝️ another one
I’ve decided to use your MCL snippet instead of the dashboard snippet @efemkay since yours doesn’t break the Note Toolbar plugin. I’m using List Grid with a hashtag and have found that section in your MCL snippet. How would I apply your bullet snippet above to your MCL snippet?
should be same way. i’ve modified the snippets, to have that effect, enter hidden-bullet into cssclasses Properties
the snippets is per below
/* remove the bullet only 2nd level onwards.
use ul li instead of ul li li for all bullets */
.hidden-bullet div > ul li li > .list-bullet {
display: none;
}
/* remove indentation guide for page with cssclasses: dashboard */
.hidden-bullet div > ul li {
--indentation-guide-width: 0;
}
i’m using AnuPpucin theme
Doesn’t seem to have any effect. Should I be copying the snippets into a new snippet file or adding them to your MCL snippet? If they should be added into your MCL snippet, where should I put them?
i would suggest save as new css file. noting that you’ve added dashboard css before, it should be the same step. but for clarity, here’s summarised steps
- Copy the snippet. Copy paste the snippet to any text editor
- Save as the snippet as
.css file. Save to folder [yourvault]/.obsidian/snippets. Filename does not matter, can be anything
- Reload snippet. Appearance → CSS snippets, select Reload snippets
- Enable snippet
Obsidian helps here would be useful
It’s not having any effect. I think I may have to go through all of the snippets I have and see which one(s) are causing the problem. Thank you for all of your help @efemkay .
I found this thread looking for the answer to a slightly different question, but thought what I’ve figured out might be helpful.
I was trying to figure out how to change how bullet points were formatted in live edit mode, and kept seeing that the usual list-style-type doesn’t apply. It turns out that this isn’t how list items are rendered in live edit mode.
Instead, they’re not done with ul tags at all. There’s a CSS class that applies to list items, and then the size, shape, color, etc. are also done with CSS rather than the “regular” rendering of lists that would be done in a browser (Electron in this case).
At least with my theme (primary with a few modifications), the size is stored in a variable. So the way you would remove the bullet point via a snippet is this:
.markdown-source-view {
--list-bullet-size: 0;
}
I haven’t tried this in preview mode, as I never work in that, but it at least works in live edit mode. I hope this helps!
