Better visual signposting of collapsed blocks

I often fail to spot collapsed blocks because the visual signposting of collapsed blocks is rather subtle. You have a slight halo around the bullet point, as below.

Is there way to make these more salient? I am thinking of two possibilities, firstly to make the halo brighter / a different colour, and secondly, to add some bread crumbs (preferably brightly coloured) at the end of the collapsed block.

Could this be done by CSS? I can’t seem to find any themes which provide better signposting for collapsed blocks, so I suspect not.

image

Either:

  • set css var --ls-block-bullet-border-color
  • customize css rule .bullet-container:not(.typed-list).bullet-closed
    • e.g. background-color
1 Like

Thanks. Sorry, I am not a CSS expert, and I am finding it hard to follow this. So far, I have

--ls-block-bullet-border-color:#f5b505
  
  .bullet-container:not(.typed-list).bullet-closed { background-colour: #f5b505 }

This is in my custom.css file. It does not do anything.

I do not understand the dot notation, e.g. before “bullet-container”, as this does not seem to be part of standard .css.

Accepted solution:

.bullet-container:not(.typed-list).bullet-closed {
    background-color: #f5b505
}

Don’t use both at the same time. Remove the variable (i.e. the first line) and change background-colour to background-color

1 Like

Oh superb! Thanks very much - works a treat!

This is really helpful – thanks. Just wondering if there’s a way to maybe “highlight” the whole line where subordinate bullets are collapsed for when my eyes haven’t woken up yet?

And/or, so I learn something on the way, I know how to inspect elements etc. when using a browser to find out which CSS selector to change in a web page – is there a similar technique when using Logseq?

Welcome. Logseq is based on Electron (which is a browser), so just press Ctrl + Shift + i

1 Like

Superb. Thank you @mentaloid

How to change the color of the bullet itself (not the background) if collapsed ?

Welcome. For the color of the bullet itself, customize attribute background-color inside a css rule .bullet-container:not(.typed-list).bullet-closed span.bullet

Perfect ! Thank you.