Thanks, I'll now have a lead where to look and experiment.
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.
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))
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");
2 Likes
Thanks for the clarification.
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.
2 Likes
Ah, so it is my window manager that prevented me from testing it. 
1 Like
Okay, I got set selected windows to have 20% opacity. What should I look for to change unselected windows?
Unfocused is the backdrop property:
.nautilus-window .sidebar:backdrop {
}
1 Like
Is this CSS?
Yes, everything covered in this thread so far has been with .css.
1 Like
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.
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.
try:
menu, .menu, .csd menu {
}
1 Like
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
I can't see it...
It's vague in the right upper corner of nautilus.
1 Like
Got it. I was looking for something icon sized. 
Do you have it positioned so that expanding the window won't cut it off?