Direct CSS Support

[a-crazy-pencil]

Allow adding custom CSS styles to the sidebar, there would be a lot of possibilities, thanks.

[elchininet]

Hi @pizzapi2012,
Did you consult all the styling options? (specially the styles one)

[a-crazy-pencil]

Hi @pizzapi2012, Did you consult all the styling options? (specially the styles one)

sorry I missed it.

[a-crazy-pencil]

Hi @pizzapi2012, Did you consult all the styling options? (specially the styles one)

sorry I missed it.

but what is the selectors?

[a-crazy-pencil]

Hi @pizzapi2012, Did you consult all the styling options? (specially the styles one)

sorry I missed it.

but what is the selectors?

for css

[elchininet]

I don't understand, what do you mean?

[a-crazy-pencil]

like
.id {} .id:before {}
for selecting certain elements of the side bar to change styles

[elchininet]

It depends on the element that you want to select, you would need to inspect the DOM, check the styles applied to those elements and write a selector with more specificity to override it. Without knowing what you want to select or what you want to style I cannot recommend you any selector 🙂

[a-crazy-pencil]

ok

[a-crazy-pencil]

how would I put

color: #fff;
background-color: linear-gradient(135deg, rgba(255,255,255,0.15), rgba(255,255,255,0.05));
backdrop-filter: blur(15px);
-webkit-backdrop-filter: blur(15px);
box-shadow: 0 8px 25px rgba(0,0,0,0.2), inset 0 1px 0 rgba(255,255,255,0.2);
border: 1px solid rgba(255,255,255,0.15);
overflow: hidden;

styling into the sidebar? @elchininet

[elchininet]

how would I put

Where do you want to put those styles? in which element? The sidebar has multiple elements, each element with other elements inside.

[a-crazy-pencil]

the whole thing basically

[elchininet]

the whole thing basically

What do you mean with "the whole thing"? Do you mean the sidebar?

[a-crazy-pencil]

the whole thing basically

What do you mean with "the whole thing"? Do you mean the sidebar?

yes the whole sidebar

[elchininet]

You need to be aware that linear-gradient is not a valid declaration value for background-color, you would need to use background instead. As the sidebar is inside a shadow root, you only need to add those styles into :host (and set an !important in the background and the overflow to override the original values).

:host {
  color: #fff;
  background: linear-gradient(135deg, rgba(255,255,255,0.15), rgba(255,255,255,0.05)) !important;
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  box-shadow: 0 8px 25px rgba(0,0,0,0.2), inset 0 1px 0 rgba(255,255,255,0.2);
  border: 1px solid rgba(255,255,255,0.15);
  overflow: hidden !important;
}

And please, do not tag me multiple times nor write different messages, you can edit a message if you want to add more things.

[a-crazy-pencil]

You need to be aware that linear-gradient is not a valid declaration value for background-color, you would need to use background instead. As the sidebar is inside a shadow root, you only need to add those styles into :host (and set an !important in the background and the overflow to override the original values).

:host {
color: #fff;
background: linear-gradient(135deg, rgba(255,255,255,0.15), rgba(255,255,255,0.05)) !important;
backdrop-filter: blur(15px);
-webkit-backdrop-filter: blur(15px);
box-shadow: 0 8px 25px rgba(0,0,0,0.2), inset 0 1px 0 rgba(255,255,255,0.2);
border: 1px solid rgba(255,255,255,0.15);
overflow: hidden !important;
}
And please, do not tag me multiple times nor write different messages, you can edit a message if you want to add more things.

ok

[a-crazy-pencil]

.liquid-glass {
  width: 280px;
  height: 160px;
  padding: 20px;
  background: rgba(255, 255, 255, 0.01);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  border: 2px solid rgba(255, 255, 255, 0.2);
  border-radius: 20px;
  box-shadow: 0 12px 48px rgba(31, 38, 135, 0.154);
  background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.1), transparent 50%);
  transition: none;
  cursor: default;
}

to the sidebar (with the sidebar being transparent)

[elchininet]

with the sidebar being transparent

Even if you set the sidebar's background transparent, most probably you will not get what you expect. Check my response here.