Is it possible to use css styles on bullet lists in edit mode?

Custom CSS & Theme Design
1

I can style the bullet lists for view mode but not edit mode.

I don’t use the view mode. I only use the edit mode, so that’s what is important to me.

I should add. It seems like the code for the first bullet level does work and sets the style for the other level. And really it is the css code for level 2 and down that don’t work.

I don’t know anything about css code, so I got ChatGPT to write up the code. Here it is:

/* === BULLETED LISTS (Reading View + Edit Mode) === */
.markdown-preview-view ul > li,
.markdown-source-view.mod-cm6 ul > li {
  font-family: 'Segoe UI', sans-serif !important;
  font-size: 1em !important;
  color: #2c2c2c !important;
}

.markdown-preview-view ul ul > li,
.markdown-source-view.mod-cm6 ul ul > li {
  font-family: 'Courier New', monospace !important;
  font-size: 0.95em !important;
  color: #444 !important;
  font-style: italic !important;
}

.markdown-preview-view ul ul ul > li,
.markdown-source-view.mod-cm6 ul ul ul > li {
  font-family: 'Arial', sans-serif !important;
  font-size: 0.9em !important;
  color: #555 !important;
  font-style: oblique !important;
}

That did not work, so I got ChatGPT to try again, and this is the next code it came up with:

/* === BULLET LIST STYLING FOR READING VIEW + LIVE PREVIEW === */

/* FIRST-LEVEL BULLETS */
.markdown-preview-view ul > li,
.markdown-source-view.mod-cm6 ul > li,
.markdown-source-view.mod-cm6 .cm-line.HyperMD-list-line:not(.cm-indent) {
  font-family: 'Segoe UI', sans-serif !important;
  font-size: 1em !important;
  color: #2c2c2c !important;
  font-weight: bold !important;
}

/* SECOND-LEVEL BULLETS */
.markdown-preview-view ul ul > li,
.markdown-source-view.mod-cm6 ul ul > li,
.markdown-source-view.mod-cm6 .cm-line.HyperMD-list-line.cm-indent-1 {
  font-family: 'Courier New', monospace !important;
  font-size: 0.95em !important;
  color: #555 !important;
  font-style: italic !important;
  font-weight: normal !important;
}

/* THIRD-LEVEL BULLETS */
.markdown-preview-view ul ul ul > li,
.markdown-source-view.mod-cm6 ul ul ul > li,
.markdown-source-view.mod-cm6 .cm-line.HyperMD-list-line.cm-indent-2 {
  font-family: 'Arial', sans-serif !important;
  font-size: 0.9em !important;
  color: #777 !important;
  font-style: oblique !important;
  font-weight: normal !important;
}

Maybe a human being can see what is wrong. Or is it just not possible?

Thanks

2

For general CSS questions (“What is salmon in rgba?”, “What is a vw unit?”, etc.), chatbots are fine, but for Obsidian specific selectors they are most often wrong or just make things up.

Have a look here:

3

Thank you. That changes the styling of the bullets themself but I was hoping to change the entire line. I’d like to be able to change styling of the fonts for different levels of bullets. Sorry if I did not make myself clear.

4

You said you use only the editing view, but I don’t know whether you meant Source mode, Live Preview, or both, so the below includes the reading view too so that rendered things in Live Preview (like callouts) will also look right.

The last section returns the styles back to normal for more deeply nested lists. You can remove it if you want deeper levels (in this case, level 4 and deeper) to have the same appearance as the last level you styled (level 3).

Not trying to harp on it, but reiterating ariehen’s info about chatbots and Obsidian selectors. For this kind of thing, learning to find selectors is more likely to save you time and help you find your solutions versus spending that time with generative AI.

Anyway, this works in the default theme:

ul > li,
.HyperMD-list-line-1 > .cm-formatting-list-ul + .cm-list-1 {
	color: orange;
	font-family: 'Segoe UI', sans-serif;
	font-size: 1em;
}

ul ul > li,
.HyperMD-list-line-2 > .cm-formatting-list-ul + .cm-list-2 {
	color: green;
	font-family: 'Courier New', monospace;
	font-size: 0.95em;
}

ul ul ul > li,
.HyperMD-list-line-3 > .cm-formatting-list-ul + .cm-list-3 {
	color: pink;
	font-family: 'Arial', sans-serif;
	font-size: 0.9em;
	
}

ul ul ul ul > li {
	color: var(--text-normal);
	font-family: var(--font-text);
	font-size: var(--font-text-size);
}
2 Likes
5

Thank you very much. That works perfectly.