Alternative bullet color for nested bullets

[chintuosp]

I want to have alternative colors of bullets as they are being nested.

I have been trying to use CSS snipped to achive this goal. Odd numbered nested bullets be black and even numbered nested bullets be brown.

Here is the code I have so far. But it does not seem to work for me in the live preview mode. Can anyone help me with this issue?

/* Black bullet point */
.markdown-preview-view ul > li::before,
.markdown-preview-view ol > li::before {
  content: "•";
  color: black;
}

/* Brown bullet point */
.markdown-preview-view ul > ul > li::before,
.markdown-preview-view ol > ol > li::before {
  content: "•";
  color: brown;
}

/* Alternate black and brown bullet points */
.markdown-preview-view ul > ul:nth-child(even) > li::before,
.markdown-preview-view ol > ol:nth-child(even) > li::before {
  content: "•";
  color: black;
}

.markdown-preview-view ul > ul:nth-child(odd) > li::before,
.markdown-preview-view ol > ol:nth-child(odd) > li::before {
  content: "•";
  color: brown;
}

[holroy]

I’m not sure how it applies to your case, but Obsidian seems to be using the marker thingy to mark the lists, see my post on multi-numbering.

How to create multi-numbered outline

Some questions trigger me more than others, and especially if they ask for something which I don’t know how to do, but I do believe is doable. Like this one, I was sure I’ve seen something like this, but I’m not that well versed in CSS, so I couldn’t tell how to do it immediately. However, with some googling and playing around I came up with the following CSS-code: .markdown-preview-section ol>li::marker { content: counter(list-item) "\A0" } .markdown-preview-section ol>li ol>li::marker { …

So not sure how, but I do believe you need to change the syntax to be related to the ::marker syntax, to get it to work. But I might be mistaken, I’m not that confident when replying to CSS stuff, it’s still a bit of a grey area for me.

[holroy]

When looking a little more into this, it’s even more convoluted, and it seems like in the default theme, that it’s using list-style-type for doing the bullets and similar.

I strongly suggest for you to read the post below, and check out how the bullet points actually get their style, and then try changing that.

Obsidian CSS Quick Guide

Obsidian CSS Quick Guide Hi friends! CSS in Obsidian can be confusing to get into, so this is a guide to get you started with information on the tools, methods, and some background knowledge! Let’s get started by looking at how you can look behind the curtain of Obsidian’s visuals. The Developer Console Obsidian is technically like a website. As such, you can view the source like any other browser. While you are inside the Obsidian window, you can press ctrl+shift+i to bring up the develope…

[ariehen]

From your CSS, .markdown-preview-view is for targeting reading mode (yeah, it’s confusing). For general targeting of Source + Live-Preview you want to be using .markdown-source-view or .markdown-source-view.mod-cm6 (see linked examples).

I’ve played around with using different shapes before in nested lists (think they look neat), but end up turning off the snippet after a while because I hit an edge case and things start looking strange. I don’t know exactly what is going on, but the bullets (or shapes) seem to be drawn on the fly. I do know that different themes, spaces instead of tabs, scrolling too fast, etc, will distort them. Default bullets for me.

As holroy said, it’s quite convoluted. In addition to their thread (above), I’ve looked at these two quite a few times:

Style Bullets in Lists by Level

Discussing this on the Discord help me find an answer that works: :root { /* --bullet-new-color: Orange; */ --bullet-new-color: rgb(89,89,89); } .markdown-source-view.mod-cm6 .HyperMD-list-line-1 .list-bullet:after { /* Bullet */ height: 5px; width: 5px; border-radius: 50%; background-color: var(--bullet-new-color); } .markdown-source-view.mod-cm6 .HyperMD-list-line-2 .list-bullet:after { /* Dash */ height: 1px; width: 7px; border-radius: 0%; background-color: var(--bullet-new-colo…

Problems encountered when modifying unordered lists styles with CSS

Hey This will cover all 7 levels in reading-mode + edit-mode: SCREENSHOT (reading-mode) [Screen Shot 2023-02-07 at 3.00.06 PM] CSS /* LEVEL 1 */ .markdown-reading-view ul > li > .list-bullet:after, .markdown-source-view.mod-cm6 .HyperMD-list-line-1 .list-bullet:after { /* Bullet */ height: 5px; width: 5px; border-radius: 50%; background-color: var(--bullet-new-color); } /* LEVEL 2 */ .markdown-reading-view ul > li > ul > li > .list-bullet:after, .markdown-sourc…

This sort of works (with just a little distortion ):

ul>li> .list-bullet::after, .cm-list-1 .list-bullet::after {
  background-color: black;
}
ul>li> ul>li> .list-bullet::after, .cm-list-2 .list-bullet::after {
  background-color: brown;
}
ul>li> ul>li> ul>li> .list-bullet::after, .cm-list-3 .list-bullet::after {
  background-color: black;
}

EDIT: the odd shape, in this case, is caused by the font. I tried on a different machine with a different font, and the bullet circles are all the same shape.