[css] highlights current path (bullets color)

this will highlight the selected tree path (the bullets)


add this to your custom.css or use it with the Stylus extension for web browser.

/*==================================================*/     
/* === highlight current path by cannnibalox v0.2 ===*/ 
/*==================================================*/

.ls-block .bullet{
    background-color:#dd0707;
}

.ls-block:not(:focus-within) .bullet{
    background-color:var(--ls-block-bullet-color);
}

PS : you can replace .ls-block:not(:focus-within) (this works when a block is selected) with .ls-block:not(:hover) (will trigger highlight on hover) for a more interactive experience.

5 Likes

This is useful for dealing with many layer’s notes. It make tracking the train of thoughts more easily.

. code has been updated in the first post to avoid unwanted highlights inside the linked refs block

. optionnal highlights for tree lines (needs a bit of tweaking if you’re using a custom theme, and lines are full height) - this would be better using javascript
result


code

/*--- highlight tree lines ---*/
/*--- tweak left: and top: offset to match yout theme */
.blocks-container > div:not(:first-child) .ls-block:focus-within > div:first-child .bullet:before{
    content : "└─";
	color:#f00;
	display: inline-block;
	left: -24px;
	top: -6px;
	width: 30px;
	position: relative;
}
.ls-block > .block-children:focus-within {
	border-left-color:#f00;
}
1 Like

Hi, is it able to change pixel/width of vertical line?

under the last line .ls-block > .block-children (...), add border-left-width: 2px; (or change it to the width you want)

here’s the full script I use with hover instead of :focus-whithin (meaning that the bullets and path are highlighted when hovering, if you prefer to highlight on select, then replmace all :hover by :focus-whithin

/*===================================================*/     
/*= highlight current path by cannnibalox v20210220 =*/ 
/*====== option: (:hover) to (:focus-whithin) =======*/

.ls-block .bullet{
    background-color:#dd0707;
}

.ls-block:not(:hover) .bullet{
    background-color:var(--ls-block-bullet-color);
}

/*--- highlight indentation line - remove if not useful ---*/
/*---- tweak left: and top: offset to match yout theme ----*/
.blocks-container > div:not(:first-child) .ls-block:hover > div:first-child .bullet:before{
    content : "└─";
	color:#6e2222;
	display: inline-block;
	left: -20px;
	top: -10px;
	width: 30px;
	position: relative;
}
.ls-block > .block-children:hover {
	border-left-color:#6e2222;
	border-left-width: 2px;
}
```
4 Likes

This is by far my favorite css hack! It’s been super useful thanks for sharing it!! Highly recommend it

Many thanks for updating the code.

Thanks for the code! I am currently also using your code of “colorful indention” by changing the block-children [level="n"].

There will be overlapping between the original colorful tree line and the highlighted line. Can I temporarily remove the original colorful line when it is highlighted? Or just paint the highlighting color on top of the original lines to fully hide them.

image

Niiiiiicceeee,

Was a perfect addition for me - i opted for the focus-within version…

Thanks so much!

can’t check now, but I think there was some opacity involved, you should be able to tweak the opacity to overlap the highlighting to hide what’s underneath (you’ll probably need to tweak the alignement too). I’ll try to take a look this w.e.

glad you find it useful! I like the colors on your screenshot, smooth and relaxing.

Thanks for the reply. I will try it first :blush:

First thanks a lot for this,
I am not sure what it is but sometimes it “breaks”, if u look at the image the first level “line” is not highlighted with “└─” it happens (I think) when the first line of the page is a [[link]]
image

not sure if this helps

still unable to solve this :frowning:

hmm… yes the selector is a bit messy, it should work if you remove the first > here:

.blocks-container > div:not(:first-child) .ls-block:hover > div:first-child .bullet:before{
    content : "└─";

so that it becomes :

.blocks-container div:not(:first-child) .ls-block:hover > div:first-child .bullet:before{
    content : "└─";

although it might have other side effects… please let me know if you encounter other bugs after the modification

2 Likes

lol can’t believe it I’ve been knocking my head for 3 days

Thank you so much

thanks, this is my improved version of [css] highlights current path (bullets color) - #3 by cannibalox

.block-children{border-left-color:#037ef3;}
.block-children .block-children{border-left-color:#00c16e;}
.block-children .block-children .block-children{border-left-color:#0cb9c1;}
.block-children .block-children .block-children .block-children{border-left-color:#f48924;}
.block-children .block-children .block-children .block-children .block-children{border-left-color:#f85a40;}
.block-children .block-children .block-children .block-children .block-children .block-children{border-left-color:#ffc845;}
.block-children .block-children .block-children .block-children .block-children .block-children .block-children{border-left-color:#52565e;}

.block-children .block-children .block-children .block-children .block-children .block-children .block-children .block-children{border-left-color:#037ef3;}
.block-children .block-children .block-children .block-children .block-children .block-children .block-children .block-children .block-children{border-left-color:#00c16e;}
.block-children .block-children .block-children .block-children .block-children .block-children .block-children .block-children .block-children .block-children{border-left-color:#0cb9c1;}
.block-children .block-children .block-children .block-children .block-children .block-children .block-children .block-children .block-children .block-children .block-children{border-left-color:#f48924;}
.block-children .block-children .block-children .block-children .block-children .block-children .block-children .block-children .block-children .block-children .block-children .block-children{border-left-color:#f85a40;}
.block-children .block-children .block-children .block-children .block-children .block-children .block-children .block-children .block-children .block-children .block-children .block-children .block-children{border-left-color:#ffc845;}
.block-children .block-children .block-children .block-children .block-children .block-children .block-children .block-children .block-children .block-children .block-children .block-children .block-children .block-children{border-left-color:#52565e;}

.ls-block > .block-children:focus-within {
    border-left-width: 2px;
    margin-left: 20px!important;
    border-left-color:#6a3be4!important;
}
.blocks-container > div:not(:first-child) .ls-block:focus-within::before{
    content: "";
    display: inline-block;
    left: -2px;
    top: 13px;
    width: 20px;
    position: absolute;
    height: 0;
    border-bottom: 2px solid #6a3be4;
    z-index: 1;
}
.blocks-container > div:not(:first-child) .ls-block>.flex-row{
  	position:relative;
  	z-index:10;
}
1 Like

you might want to use [css mod] colorful indentation lines as the code is more compact (both mods should be compatible)

1 Like

Hey @cannibalox I’ve been using this awesome hack since you announced it here. I was checking through your github to find the latest version of this css (as well as to keep updated with improvements)

can you point me in the right direction to the latest code on this

Thanks a lot, this is amazing!

I’ve just pushed a commit to sync github with my local versions, thanks for the reminder. not much changes though, maybe you’ll need to tweak the margins/paggind if you use a custom theme (the default values are working for the theme logseq-darker-hpx)

1 Like