Block background color setting (specific)

[HLDFR]

523 / 5.000

Hi!

First, I would like to commend the work of the entire team behind Logseq. The software is amazing! I’m using it for personal notes on legislation (I’m a Brazilian student).

Basically, I copy the legislation and, under each topic, my personal notes. To facilitate the visualization (with a visual distinction between the passage that is the copy of the legislation and my notes) and the later location, I inserted a symbol as a tag (código abaixo):

a.tag[data-ref=“Anotação” i]::before {
content: “”;
visibility: visible;
padding: 1px;
}

a.tag[data-ref=“Anotação” i] {
visibility: hidden;
width: 24px;
white-space: nowrap;
}

This code above results in the following situation when inserting the #Anotações tag:

(Blue bullet).

From there, I would like to change the background color of the block relative to the icon (which contains the annotations made).

I made a simulation here to illustrate what I intend to do:

Option 01:

or

Option 02:

I used 3 colors for the bullets (blue, purple and red) to differentiate the notes. I want to modify the background to insert the respective color (blue, purple and red). Example:

My question:

How to do this? Is it possible with CSS? I’ve done a lot of research, but I’m an inexperienced CSS user and I’m having a hard time.

Sorry for my bad English. Thanks. Have a great day.

[Ikarus]

Fala bro @HLDFR

First, is this code right? Here I am not able to reproduce this same transformation =/

But I can help you with the coloring.

div:not(.initial) > div > div > div > [data-refs-self='["your-tag"]'] {
   --ls-selection-background-color: #EBCB8B;
   --ls-block-highlight-color: #EBCB8B;
    padding: 8px 0;
    border-radius: 5px;
    border-left: 4px solid #88C0D0;
    background-color: #D8DEE9;
    transform: translateX(-4px);
}

You’ll get this

[HLDFR]

This is amazing and will solve my problem perfectly. Thank you very much.

As a partial solution, I was using “quote” (>). However, I was limited to a single coloring and had to enter the tag and quote syntax. The issues were resolved with your help. Thank you very much.

In answer to your question, I am now using the following CSS codes:

Simple annotation:

div:not(.initial) > div > div > div > [data-refs-self=‘[“annotation”]’] {
–ls-selection-background-color: #EBCB8B;
–ls-block-highlight-color: #EBCB8B;
padding: 8px 0;
border-radius: 5px;
border-left: 4px solid #0974c5;
background-color: #e8f2f9;
transform: translateX(-4px);
}

And:

a.tag[data-ref=“annotation” i]::before {
content: “”;
visibility: visible;
padding: 1px;
}

a.tag[data-ref=“annotation” i] {
visibility: hidden;
width: 24px;
white-space: nowrap;
}

Alert note:

div:not(.initial) > div > div > div > [data-refs-self=‘[“divergence”]’] {
–ls-selection-background-color: #EBCB8B;
–ls-block-highlight-color: #EB2B8B;
padding: 8px 0;
border-radius: 5px;
border-left: 4px solid #cc0000;
background-color: #F8EAEA;
transform: translateX(-4px);
}

And:

a.tag[data-ref=“divergence” i]::before {
content: “”;
visibility: visible;
padding: 1px;
}

a.tag[data-ref=“divergence” i] {
visibility: hidden;
width: 24px;
white-space: nowrap;
}

I don’t know if I was clear, but the icon (blue or red) replaces the tag (#annotation or #divergence). I do this to improve the visualization. Also, the icon, being a tag, allows me a later lookup (backlink).

Examples (With an alert inserted inside a common annotation):

Note: I’m doing some theme tests to define a specific one. Today I decided to test solarized.

@Ikarus
Again, thank you very much for taking the time to help me.

[Ikarus]

Glad it worked out.

Unfortunately I couldn’t replace the tag with the icon here. I have no idea why the change is not happening. But thanks for sharing this!

[HLDFR]

@Ikarus

I searched here and found the topic that served as the basis for the adjustment I made to the tags. It is worth taking a look:

Custom tags rendering with Emojis

I often would like to use emoji tags with backlinks lke #[[⭐️]] to highlight blocks. However, they are not visually outstanding at a glance: [image] To make the tags more attractive, I did some tricks to use #star instead of #[[⭐️]] to make it a bit easier to type give it a red background & shadow hide the # sign Here it is a demo [image] The css is here a.tag[data-ref="star" i]::before { content: "️"; visibility: visible; border-radius: 2px; padding: 2px; background: red; …

[HLDFR]

@Ikarus

Hello. Sorry to call you again, but I have a question.

When I insert a backlink, it doesn’t allow background coloring.
Ex:

However, when I place a backlink (and or tags) inside a child block, it allows coloring.

Another situation: if I insert another tag in the same block, it doesn’t allow background coloring.

Question:
Is there any command for it to allow backlink (and tags) in parent block?

In the image you put as an example, it would be like putting a backlink in the same block as the tag (#your-tag).

[Yuri_BC]

The solution of @Ikarus works sometimes, but not for blocks divs that contain multiple attributes, for example the first line of a block also includes a reference to itself as attribute:

data-refs-self="["block title", "your-tag"]"

in order to make this work in all cases, better use a wildcard selector like this in your css:

[data-refs-self*="your-tag"]

[danzu]

You can also use the plugin “admonition panels”.