Adding Vertical Line Indents to Bullet Points (Live Preview)

[masen]

Hello all,

Currently running into an issue getting my vertical line indents to work with Live Preview. I’m currently using the California Coast theme and have unfortunately I’ve not been able to figure it out yet.

Things I have tried

• Adding CSS from Rainbow Plugin.
• Tried to implement Rainbow Plugin css in many ways, even removing all other css in my snippets folder.
• Changing theme to default.
• Changing some variable names on the Rainbow Plugin
• Downloaded & enabled Outliner Plugin

What I’m trying to do

• Have vertical line indents (like Roam or Workflowy) in Live Preview

Any help would be greatly appreciated, thank you for your time!

[Kaimera]

Ever since the removal of the css class .cm-tab, this seems nearly impossible to reimplement. It might be possible to use the style:text-indent: property to an extent, but the editor seems to use different values at times (like -66px and -75px at the same indentation level).

[masen]

That makes sense. Yeah this has been very hard to find a solution for. I wonder if there are people working on it now.

Have you tried the style:text-indent method? If so did it work well?

[Kaimera]

I tried that method for a moment (code below), but it didn’t work out too well due to the initial text-indent and padding of the element it’s attached to. It doesn’t seem trivial to remove those. There might be a better way.

/* Add faux vertical lines & indentation levels */
*[style*='text-indent:-3']:before {
	content: '| ';
}
*[style*='text-indent:-4']:before {
	content: '|   |   ';
}
*[style*='text-indent:-6']:before {
	content: '|   |   |   ';
}
*[style*='text-indent:']:before {
	opacity: 0.3;
}
/* Hide existing indentation...? */
*[style*='text-indent:'] {
}

[masen]

Even though this is not quite there, this is still better than nothing. Could be a starting point for solving it.

[Maley_typek]

I also want the same thing! I have tried many custom CSS, but it didn’t work. I hope someone will find a solution.

[Maley_typek]

Hello again, I found a solution! It’s funny because I found out randomly . It is a plugin and only supported in Live Preview. I think it’s not a problem because u can add the vertical lines in reading view by CSS snippet.

Here: Obsidian Indentation Guides

[Maley_typek]

Or you can try Minimal Theme

[jadoff]

I gave this a try, but it also appeared to make the bullet notes invisible. When I tried disabling it and uninstalling it, the normal bullets are behaving strangely. They either don’t appear or if they are a bullet with indented bullets below, the bullet appears twice. Any advice on getting bullets back to default? (this behavior happens in live preview only)

[masen]

This worked for me, thank you!

[greasemonkey]

Minimal theme doesn’t show indent lines in live preview for me? I have both Preview and Editor lines selected in the Minimal themes plugin…is there something I’m missing? No snippets turned on, just Minimal theme.