Video Tutorial For Beginners On Bullet Point Lines

Share & showcase
#1

Hey guys, check out this obsidian video I just posted

I started making YouTube video series on my favorite obsidian community hacks for style and functionality.

My goal with this video series is to help beginners set up awesome community features

In this video I covered how to add bullet point relationship lines created by @death.au (thanks for making this)

Meta Post - Common CSS Hacks

I’d love to get feedback on it, wheather here or on YouTube comments

If anyone has requests for future videos that’d be awesome too

Hope you enjoy it!

14 Likes
Bullet list everything
#2

Really useful especially for a non-techie person as myself. I really want these points and lines so will add. How will I change the colour of the bullets and lines?

Thank you by the way for the clear helpful video and instructions

1 Like
#3

Hey @KaneDodgson
Thanks a lot for your awesome message, means a lot man!

I’m really happy you found it helpful.

Lines Color

For changing the lines color check out minute 12:35

but feel free to let me know if you are having trouble.

Bullet Point Color

I forgot to show how to change bullet point color, but it’s super easy too. (I might make a video on it)

If you’d like feel free to let me know what color you want for lines and bullet points and I can modify the code and send it to you here, for you to simply paste it.

Thanks again for watching, means a lot!

2 Likes
#4

the video link doesn’t work for me

#6

That’s strange, I just checked to make sure it works

Try this one:

https://youtu.be/rukFr8CjzPo

If it doesn’t work, it could be some YouTube country location restriction perhaps, let me know if it’s still not working and I’ll look into it
Thanks!

#7

Oh, I’m just doubly stupid. Youtube itself doesn’t load either, because yesterday I edited Window’s “hosts” file to prevent me from getting sucked into youtube and other rabbit holes. The Obsidian forum was on that list for a while, and will be going back on given this evident attempt at self-sabotage. I’m sure your video is great!

1 Like
#8

I get you, these things happen, Happy it works!
Let me know what you think of the video either here or in YouTube comments, it helps me keep making these type of videos.

If you also have an future video requests let me know
Have a great day!

#9

I can’t compress, I can’t compress, I can’t compress them to save space, I try shortcuts and it doesn’t work, help

#10

Hi, is it possible to have a custom colour for the lines of each indent level?

1 Like
#11

that’s an interesting challenge, I would guess it’s possible but I havn’t tried it myself, and I havn’t seen anyone else achieving it yet

#12

In my limited testing the code below should work for Edit mode

.cm-hmd-list-indent > .cm-tab:nth-child(1)::after{
border-right-color: red;
}

.cm-hmd-list-indent > .cm-tab:nth-child(2)::after{
border-right-color: yellow;
}

.cm-hmd-list-indent > .cm-tab:nth-child(3)::after{
border-right-color: blue;
}

.cm-hmd-list-indent > .cm-tab:nth-child(4)::after{
border-right-color: green;
}

This is for 4 levels, you can copy and modify the nth-child(1) in the selector to add more levels down.

For preview mode lines, this should work,

 .markdown-preview-view ul ul::before{
border-left-color: red ;
}

.markdown-preview-view ul ul ul::before{
border-left-color: yellow;
}

.markdown-preview-view ul ul ul ul::before{
border-left-color: blue;
}

.markdown-preview-view ul ul ul ul ul::before{
border-left-color: green;
}

In this case, to add more levels, you’d need to add one more ul each level down in the selector.

1 Like
#13

Hey santi,
Thanks for the video.
I have used the code, but in edit mode it doesn;t show correctly. Details are in thiis link:https://forum.obsidian.md/t/meta-post-common-css-hacks/1978/324?u=peterhou
Could you help please?

1 Like
#14

Hey @Peterhou happy to help!

I just tried your the code you pasted and it doesn’t work for me neither

try copying the exact code that is here

Meta Post - Common CSS Hacks - #2 by lizardmenfromspace

That one works without any issues.

I’m not sure if you are trying to achieve something different with your variation of your code thought, not sure why it isn’t working.

Hope that helps

#15

Hey @santi

I tried the same code, but the problem remains the same.

The difference from my code it to make it applicable to both the Unordered List and the Numbered List (Ordered List).

Thanks for you time.

1 Like
#16

Hey @Peterhou sorry to hear it didn’t work. I’m not sure what might be the proble, sorry I can’t be of more help

#17

Hi i try your snippet but it doesn’t work, is it a 2 sepperate file or 1 file combine if so which one first. I use default obsidian light theme, version of obsidian: 0.12.19.