Make Gnome applications sidebar semi-transparent, and add blur with Blur My Shell Extension if you want to

gnome-transparent-sidebar.css

/* Mohammad Mahdi Tayebi
 * 
 * To apply transparent sidebar. copy this file into ~/.config/gtk-4.0/gtk.css and if 
 * you use adw-gtk3 theme you can add it to ~/.config/gtk-3.0/gtk.css as well
 * 
 * Use blur my shell extension to add blur effect behind the transparent part of windows
*/

/* Transparent Sidebar */
window {
  background: alpha(@window_bg_color, 0.8);
}

.sidebar-pane,
.sidebar,
.navigation-sidebar {
  background: transparent;
}

.content-pane {
  background: @view_bg_color;
}

/* Lollypop */
window>deck>grid>headerbar.titlebar>widget>widget>box>image {
  margin-top: -1px;
}

window>deck>grid>headerbar.titlebar>box> :nth-child(1) {
  margin-right: -40px;
  opacity: 0;
}

window>deck>grid>headerbar.titlebar>box> :nth-child(2) {
  margin-right: 27px;
}

window>deck>grid>headerbar.titlebar>box>.close {
  margin-right: 0;
}

window>deck>grid>headerbar.titlebar {
  background: linear-gradient(90deg,
      transparent 0%,
      transparent 197px,
      @headerbar_shade_color 198px,
      @headerbar_bg_color 198px,
      @headerbar_bg_color 100%);
  border-bottom: none;
}

/* Builder */
.org-gnome-Builder paneldockchild.center {
  background: @window_bg_color;
}

.org-gnome-Builder.workspace paneldockchild.start {
  background: transparent;
}

/* Speedtest (xyz.ketok.Speedtest) */
.horizontal>gauge.dl.horizontal>overlay>.background {
  background: transparent;
}

.horizontal>gauge.up.horizontal>overlay>.background {
  background: transparent;
}

/* Gnome Tweaks */
window>leaflet>box:last-child>scrolledwindow>viewport.frame {
  background: @window_bg_color;
}

.tweak-titlebar-left {
  background: alpha(@window_bg_color, 0.8);
}

/* Geary */
.geary-main-layout>leaflet>leaflet>box:first-child,
.geary-main-layout>leaflet>leaflet>box:first-child>headerbar {
  background: transparent;
}

/* Rhythmbox */
window box:nth-child(2) paned:nth-child(3) paned:nth-child(3) box:nth-child(2) {
  background: @window_bg_color;
}

window box:nth-child(2) paned:nth-child(3) box:first-child paned grid .sidebar-toolbar,
window box:nth-child(2) paned:nth-child(3) box:first-child paned grid .sidebar-toolbar button {
  background: transparent;
}

window box toolbar {
  background: transparent;
  /* Comment this if you don't want transparency on rhythmbox topbar */
}

/* Disks */
window>deck>box>leaflet>box:nth-child(3)>stack>statuspage>scrolledwindow>viewport.frame,
window>deck>box>leaflet>box:nth-child(3)>stack>scrolledwindow>viewport.frame {
  background: @window_bg_color;
}

window>deck>box>leaflet>box:nth-child(1)>scrolledwindow treeview.view {
  background: transparent;
}

window>deck>box>leaflet>box:nth-child(1)>headerbar.titlebar.windowhandle {
  background: transparent;
  border-bottom: none;
}

Is it possbile to get this working for adw-gtk3? Sidebars in GTK apps look awesome but gnome tweaks and geary would look better with blur.

@SVTA-OP It is working on some GTK-3 applications with adw-gtk3 right now, like lollypop. But styles should be implemented for each applications as gtk3 doesn't provide a standard sidebar that can be used in all applications like libadwaita

It now works on both geary and gnome tweak too

I am unable to get the blur effect. It's just a dark translucent background, but the blur effect is missing. Please tell me how to fix it.

I am unable to get the blur effect. It's just a dark translucent background, but the blur effect is missing. Please tell me how to fix it.

Enable blur all by default

I am unable to get the blur effect. It's just a dark translucent background, but the blur effect is missing. Please tell me how to fix it.

Enable blur all by default

Thanks that worked beautifully.

I have been using this for weeks and it's great! Is there a way to adjust the opacity?

You can change it in the Blur my shell extension settings, but you can't change the blur part opacity.

I have been using this for weeks and it's great! Is there a way to adjust the opacity?

@dylankird On line 11 and line 76, 0.8 is the opacity. Change them to the number you want. Both of them should be equal though...

Thanks so much! I found that 0.85 works a bit better for me.

I really appreciate you updating this, by the way. I see you have made a bunch of changes since I first started using this

You're welcome! I'm glad you liked it :)

Thanks so much! I found that 0.85 works a bit better for me.

I really appreciate you updating this, by the way. I see you have made a bunch of changes since I first started using this

Hello, just for your information: with the coming Blur-my-Shell v60 for GNOME 46 (which I will probably backport to GNOME 45), you should not be using the "No artefacts" option in the preference if you don't really need it, as the applications blur really has been improved and this option degrades the GNOME performances a lot!

It will be disabled automatically if you enabled it before this update, but I say it in the case somebody decides to simply enable this option without testing without it before :)

@aunetx Hi, thank you for the hard work on this great extension and all the improvements. And thank you for informing us here :)

Thank you so much for the CSS, you should make an style for Gradience. ❤️

for me it woking, but why the background are dark?

@rahimgg-github You probably have an extensions that creates a layer above your desktop. Something like Desktop Icon NG. What is it though?

@taiwbi thanks I didn't notice that, but still can't find a solution for trying to redraw the window

Screencast.from.2024-04-19.18-23-41.mp4

Is it possible for you to add support for Rhythmbox sidebar? Thanks in advance!

@Karol739 I will try to convince myself to do that but lollypop is a great music player and transparent sidebar already works with it

@taiwbi thanks I didn't notice that, but still can't find a solution for trying to redraw the window

Screencast.from.2024-04-19.18-23-41.mp4

@rahimgg-github I'm honestly not sure. Update "blur my shell" extension to the latest version, if didn't work, try the "No Artifact" setting. It shouldn't be necessary though

@Karol739 DONE!

very good work and something Nautilus should adopt - thank you

Outstanding! You made Gnome 10x prettier.

Outstanding! You made Gnome 10x prettier.

Yeah but the frame rate drops when 5 windows are open and on top of each other

Outstanding! You made Gnome 10x prettier.

Yeah but the frame rate drops when 5 windows are open and on top of each other

If you want blur on GNOME, that's what you should pay for because mutter does not support background blur.

Rounded corners extension doesn't work when I set "Enabled all default"

how to get blur on right context menu and titlebar

how to get blur on right context menu and titlebar

@kprabhat248 Using this awesome work of art: https://github.com/aunetx/blur-my-shell

Thanks for this, looks beautiful on swayfx.
The only thing I don't like is when the nautilus window gets small and the sidebar is hidden, the whole window goes transparent. Is there any way to change this? I think it would be more consistent if the main section is always opaque and only the sidebar goes transparent.
I think it's because content-pane doesn't exist in this mode.

Any help appreciated :-)

Update: here is some CSS that works well for my use case. The only thing I can't work out is why the header goes transparent when not focused

.nautilus-window {
  background: transparent;
}

.content-pane, gridview {
  background: white;
}

.sidebar-pane {
  background: transparent;
}

.nautilus-window > dialog-host > widget > widget > widget > toastoverlay > overlay-split-view > widget > toolbarview > .top-bar > windowhandle > .collapse-spacing {
  background: alpha(white, 1);
}

.bottom-bar {
  background: alpha(white, 1);
}

Result:

• Full size
  (see below)

• Small size
  (see below)

• Small size, not focused -- why is the header transparent?
  (see below)

In fact this was all I needed:

.nautilus-window {
  background: transparent;
}

.content-pane, .undershoot-top.undershoot-bottom {
  background: white;
}

.sidebar-pane {
  background: transparent;
}

Now I have:

(using blur my shell for testing, it looks normal in real life)

And:

In my opinion this is more consistent :-)

gnome browser?

or proyect is died?