CSS to make specific blocks look like paragraphs (hiding bullet points)

Customization Look what I built
1

In case you want to make some blocks look like paragraphs instead of indented lists, here there is the CSS you can add to custom.css to hide the bullet points for blocks that have the tag #.no-bullet (or whatever you want):

.ls-block[data-refs-self*=".no-bullet"] > div > div > a > .bullet-container {
    display: none !important;  
}

a.tag[data-ref=".no-bullet"] {
    visibility: collapse;
}

The first part hides the bullet point, the second one hides the tag #.no-bullet.

Result:

image

Notice that you won’t be able to easily focus the view on that block because obviously there is not bullet to click on.

Edit - here there is a version that doesn’t change the alignment and it shows the bullet point when hovering the block:

.ls-block[data-refs-self*=".no-bullet"] > div > div > a > .bullet-container {
    opacity: 0;
}

.ls-block[data-refs-self*=".no-bullet"]:hover > div > div > a > .bullet-container {
    opacity: 100;
}

a.tag[data-ref=".no-bullet"] {
    visibility: collapse;
}

Result:

image

2

This is a make-do that turns out really pretty but unfortunately has other problems other than no way to focus on a text block — if users of this hack are used to how it makes the content look, they may start to think “the bullet point really is a sub-point of the paragraph above”, but those are actually on the same level so there is no “reference inheritance”, and they might be shocked in the future that they cannot query for those bullets by looking for the [[link]] or #tag from above.

Maybe text blocks should retain their original distance from the left.

image

1 Like
3

Suggestion: perhaps the bullet could appear when you hover on the block, but disappear by default. This way, you can still access the block context menu.

1 Like
4

@candide @WQing thank you, I have edited the post adding a second approach :slight_smile:

3 Likes
5

Thank you for the update, @alex0! I wanted to share my remix of your code which would recreate your idea out of the box without having to add #.no-bullet :

.bullet-container {
  opacity: 0; /*hide bullet by default*/
}

.ls-block:hover > div > div > a > .bullet-container {
  opacity: 1; /*show bullet when hovering on block*/
}

Here’s a demo:

Logseq - Hidden bullets

As the demo shows, you can add bullets by holding down SHIFT to create a line break and adding an asterisk *, although it’s not as neat as how Logseq handles bullet-blocks out of the box.

1 Like
6

Hi @alex0
I try to use data-refs-self=“something” instead of *= to avoid to have random behaviors.
But it seems not working, even ^= seems not doing the job.

Any solution to avoid random behaviors?