[Problem fixed] CSS Problem: Bullet Point Relationship Lines doesn’t show correctly in edit mode

Custom CSS & Theme Design
1

CSS Problem: Bullet Point Relationship Lines doesn’t show correctly in edit mode. It seems the Lines all aligned to the left.

1099×441 25.5 KB

Basic settings:

  • Windows 7
  • Obsidian v0.11.3 using the default dark style.
  • I added a snippet with the following code:

.cm-hmd-list-indent .cm-tab,
ul ul,
ol ul,
ul ol,
ol ol {
position: relative;
}
.cm-hmd-list-indent .cm-tab::before,
ul ul::before,
ol ul::before,
ul ol::before,
ol ol::before {
content:’’;
border-left: 2px solid rgba(0, 122, 255, 0.25);
position: absolute;
}
.cm-hmd-list-indent .cm-tab::before { left: 0px; top: -5px; bottom: -4px;
}
ul ul::before,
ol ul::before,
ul ol::before,
ol ol::before{ left: -11px; top: 0; bottom: 0;
}

And I tried the original code in this post. Meta Post - Common CSS Hacks - #2 by lizardmenfromspace

.cm-hmd-list-indent .cm-tab, ul ul { position: relative; }
.cm-hmd-list-indent .cm-tab::before, ul ul::before {
content:‘’;
border-left: 1px solid rgba(0, 122, 255, 0.25);
position: absolute;
}
.cm-hmd-list-indent .cm-tab::before { left: 0; top: -5px; bottom: -4px;
}
ul ul::before { left: -11px; top: 0; bottom: 0;
}

Both the above codes show correctly in preview mode, but have the same problem in the edit mode.

Anybody can help?
Thanks!

2

Because no-one could help you here, you might have better luck asking for help on Discord in #css-themes with a link to this post.

3

@Peterhou What are you using for indentation — tabs or spaces? Please add your Markdown input example here, so we can take a look.

4

@saf-dmitry
I’m using tabs indentation.

input example:
tabs indentation.zip (235 Bytes)

5

@Peterhou Sorry, I cannot confirm the problem using your example. With this CSS (basically the same as your snippet above) on my machine (macOS 10.14.6, Obsidian 0.11.5) it looks as follows:

Screenshot 2021-03-18 at 16.10.19

The slight shift in lines is caused by mixing spaces and tabs used for indentation in your example, which should be avoided.

Here the CSS snipped I am using:

.theme-light {
    --guide-line-fg: rgba(120, 120, 120, 0.2);
}

.theme-dark {
    --guide-line-fg: rgba(120, 120, 120, 0.2);
}

.cm-hmd-list-indent .cm-tab, ul ul, ol ol, ul ol, ol ul {
    position: relative;
}

.cm-hmd-list-indent .cm-tab::before, ul ul::before, ol ol::before, ul ol::before, ol ul::before {
    content: "";
    border-left: 1px solid var(--guide-line-fg);
    position: absolute;
}

.cm-hmd-list-indent .cm-tab::before {
    left: 0;
    top: -0.4rem;
    bottom: -0.4rem;
}

ul ul::before, ol ol::before, ul ol::before, ol ul::before {
    left: -1rem;
    top: 0;
    bottom: 0;
}
4 Likes
6

@saf-dmitry Thank you very much. Now the problems is fixed. I just copied your code.

7

Thanks for the tip.

Just FYI, I also needed to set up my options: Editor → Use tabs: On.
Unless, without .cm-tab, the relationship lines disappeared.

1 Like
8

This works great. Thank you. Question though. On mobile in editor mode the lines do not show. In preview it does. Any ideas how to fix that?

9

Make sure you use tabs and not spaces for indentation.