How do I make the sidebar transparent?

[Aravisian]

.nautilus-window .sidebar {
}
.nautilus-window placessidebar.sidebar row.sidebar-row {
}
.nautilus-window placessidebar.sidebar row.sidebar-row:hover, .nautilus-window placessidebar.sidebar row.sidebar-row:selected {
}

Above: For nautilus sidebar, treeview and "treeview button."

This is a good question - and not so easy to suss out. The problem is that though you can set transparency e.g. background-color: transparent; or with rgba background-color: rgba(0, 0, 0, 0.1); this will apply only within the window and not to the Nautilus Window in relation to the Desktop Background.
Even setting the window background to transparent will still render the sidebar to be opaque in relation to the desktop.
If you attempt to use an image that is transparent, then it will still appear as opaque as the background color will then be displayed through the transparent image.
I could be wrong and I would be happy to see that Arc Maya theme doing it...

[Storm]

Thanks, I'll now have a lead where to look and experiment.

[Aravisian]

Yes. Since I am running XFCE or Cinnamon, usually, it may also be that my Window Manager is drawing the background even behind the Gnome Apps. I know that a transparent sidebar in Nautilus used to be possible prior to gtk 3.16.
I may try testing later on a pure Gnome Build to be sure.

[Storm]

I got a string that says;

background-image: image(#4cd9a4)

If I want to convert it to rgba is that possible when it set to background image?
Would it look like;

background-image: image(rgba (20, 20, 20, 1.0))

[Aravisian]

To set a background color, you would use the background-color property, not image.

background-color: rgba (20, 20, 20, 1.0);

For a background image, you would have the url to the file. If you place the image referenced near the gtk.css, you do not need the full path. If you place the image in the same directory as the gtk.css, for example:

background-image: url("image-file.png");

If the image is placed two folders away from the gtk.css, for example in /theme/assets:

background-image: url("theme/assets/image-file.png");

[Storm]

Thanks for the clarification.

[Aravisian]

You can use a color under the background-image property when using a gradient.
To use mine from Azenis2021 for example:

background-image: linear-gradient(to right, #353535 0%, #4c4e52 15%, #53565B 85%, #2e2e2e 100%);

Let's say you want that to be one color; an easy way would be:

background-image: linear-gradient (to right, #4cd9a4, #4cd9a4);

You can use rgba (The a in rgba is the alpha or opacity) instead of hex in gradients, too:

background-image: linear-gradient (to right, rgba(76, 217, 164, 0.5), rgba(76, 217, 164, 0.9));

While exploring, you can explore radial gradients as well as gradient stops to get even more clever things, as well.
My example from Azenis 2021 above is an example of color stops.

[Storm]

Progress...

[Aravisian]

Ah, so it is my window manager that prevented me from testing it.

[Storm]

Okay, I got set selected windows to have 20% opacity. What should I look for to change unselected windows?

[Aravisian]

Unfocused is the backdrop property:

.nautilus-window .sidebar:backdrop {
}

[adhitht]

Is this CSS?

[Aravisian]

Yes, everything covered in this thread so far has been with .css.

[Storm]

I have uploaded my changes to githhub for those who are interested - GitHub - SethStormR/Shade-of-Z---Desktop: This is a fork of Zorin OS Desktop theme(s) and is modified by me. It adds opacity to the GTK theme and Gnome-shell menus.

[Storm]

Added opacity to the context menus, 90% not 80% so they don't melt together.

[Storm]

It seems that right click on some elements in nautilus doesn't get opacity when editing menu. I'm not sure what to look after here. Is it in the .menu section or the .nautilus section.

[Aravisian]

try:

menu, .menu, .csd menu {
}

[Storm]

Found it:

.csd menu, .csd .menu, .csd .context-menu { border: none; border-radius: 8px; background-color: rgba ( 20, 20, 20, 0.9);}

Noticed that I inserted an Zorin logo in nautilus

[Aravisian]

@Storm

Noticed that I inserted an Zorin logo in nautilus

I can't see it...

[Storm]

It's vague in the right upper corner of nautilus.