I seem to be able to stumble upon bits and pieces of css code for changing bullet point levels, but I cannot seem to get it to work.
What I want to do is, say, a dot for the first bullet point and then an arrow for the sub-bullet and another symbol for a third sub level. Right now, I get the same bullet point for all levels.
Could someone lend me a hand? Thanks.
I’m sure some one who understands both CSS and the Obsidian document model will provide specific worked-out answers, but unless there is a plugin that does this, broadly speaking you would need to create and enable a CSS snippet for this.
(1) Create a snippet using the following to select the elements
and the following to style the bullets:
(2) Save it in .obsidian/snippets and enable it
(3) Profit!
I’ve been thinking of setting the background colors of the nested lists on a gradient by hierarchical level so I can easily identify levels …
Thanks, @jeetsukumaran, but I am not trying to change the color, but the actual symbol. I would think there is some css code that would allow me to do it, but I haven’t figured it out (Of course, I am not a css guru).
The second example does that (too): the ::before specifies content: "\2022"; part below is how you can change the bullet to anything your want as well as set the color.
ul {
list-style: none; /* Remove default bullets */
}
ul li::before {
content: "\2022"; /* Add content: \2022 is the CSS Code/unicode for a bullet */
color: red; /* Change the color */
font-weight: bold; /* If you want it to be bold */
display: inline-block; /* Needed to add space between the bullet and the text */
width: 1em; /* Also needed for space (tweak if needed) */
margin-left: -1em; /* Also needed for space (tweak if needed) */
}
``Zenmoto posted a gem a while ago that still seems to be working:
here’s a basic premise how you can change the bullet if you want to use unique symbols like arrow or such. you may not need this if you just wanted to have bullets like circles, dashes or squares
if you can live with circles, dashes and squares, here’s a post with example that can help you. or the link ariehen shared above.
Thank you, all!
That seems to have worked…however, I am using the ITS Theme, and now I have the css snippet bullet points overlapping with the ITS Theme bullet points. I am figuring there is a setting to turn them off in ITS Theme…
Yep, found a setting to remove the outline symbols in the theme. Thanks again everyone!
This topic was automatically closed 90 days after the last reply. New replies are no longer allowed.