Better visual signposting of collapsed blocks

Questions & Help
1

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

2

Either:

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

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.

4

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
5

Oh superb! Thanks very much - works a treat!